-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwidget.html
102 lines (75 loc) · 2.23 KB
/
widget.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html>
<head>
<title>Clock Widget</title>
<style>
body {
display: block;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: Veranda, sans-serif;
font-style: italic;
font-size: 25px;
text-align: center;
}
.date {
font-size: 18px;
}
</style>
</head>
<body id="mainWidget">
<p id="greeting">Greeting</p>
<p id="time">Time</p>
<p id="date" class="date">Date</p>
</body>
<!--Date and time script-->
<script>
function currentTime() {
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var today = new Date();
var hrs = today.getHours();
var min = today.getMinutes();
var dayOfWeek = weekday[today.getDay()];
var date = dayOfWeek + ", " + (today.getMonth()+1) + " / " + today.getDate() +' / '+today.getFullYear() ;
var greet;
var tod = 'PM'; // Time of day AM/PM
// Determine message
if (hrs < 12)
{
greet = 'Good Morning';
tod = 'AM';
}
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';
// Convert to 12 hour format
if (hrs > 12)
hrs -= 12;
else if (hrs === 0)
hrs = 12;
// Add "0" for minutes less than 10
if (min < 10)
min = '0' + min.toString();
// Time as a string
var time = hrs.toString() + ':' + min.toString();
// Display date and time
document.getElementById("greeting").innerHTML = greet;
document.getElementById("time").innerHTML = time + ' ' + tod;
document.getElementById("date").innerHTML = date;
}
setInterval(currentTime, 1000);
</script>
<!--Change background and text colors-->
<script>
const params = new URLSearchParams(window.location.search);
var backColor = "#" + params.get('backColor');
var textColor = "#" + params.get('textColor');
document.getElementById("mainWidget").style.backgroundColor = backColor;
document.getElementById("mainWidget").style.color = textColor;
</script>
</html>