-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadventcalendar.html
171 lines (167 loc) · 7.66 KB
/
adventcalendar.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Advent Calendar</title>
<style>
body, html {
margin: auto;
background-image: url("https://avante.biz/wp-content/uploads/Christmas-Wallpaper/Christmas-Wallpaper-027.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.calendar {
max-width: 1000px;
text-align: center;
margin: auto;
padding-top: 2%;
}
.boxes {
background-color: rgba(5, 73, 28, 0.2);
color: rgba(170, 10, 10, 1);
text-shadow: 2px 2px rgba(5, 73, 28, 0.7);
padding: 20px;
border: 3px solid rgba(126, 4, 4, 0.35);
display: inline-block;
height: 80px;
width: 80px;
text-align: center;
font: 60px cursive;
cursor: pointer;
margin: 10px;
border-radius: 25px;
}
.red {
background-color: rgba(126, 4, 4, 0.2);
border: 3px solid rgba(5, 73, 28, 0.3);
}
.open {
height: 500px;
width: 800px;
font: 25px cursive;
text-shadow: none;
color: rgba(120, 10, 10, 1);
padding: 20px;
background-color: rgba(255, 253, 142, 0.815);
}
.boxes:hover {
background-color: rgba(5, 73, 28, 0.5);
}
.boxes.red:hover {
background-color: rgba(126, 4, 4, 0.5);
}
.boxes.open:hover {
background-color: rgba(255, 249, 128, 0.568);
}
</style>
</head>
<body>
<div class="calendar">
<div id="1" class="boxes" onclick="clicking('1', content1)"> 1 </div>
<div id="6" class="boxes red" onclick="clicking('6',content6)"> 6 </div>
<div id="11" class="boxes" onclick="clicking('11', content11)"> 11 </div>
<div id="24" class="boxes red" onclick="clicking('24', content24)"> 24 </div>
<div id="7" class="boxes" onclick="clicking('7', content7)"> 7 </div>
<div id="22" class="boxes red" onclick="clicking('22', content22)"> 22 </div>
<div id="16" class="boxes red" onclick="clicking('16', content16)"> 16 </div>
<div id="5" class="boxes" onclick="clicking('5', content5)"> 5 </div>
<div id="2" class="boxes red" onclick="clicking('2', content2)"> 2 </div>
<div id="21" class="boxes" onclick="clicking('21', content21)"> 21 </div>
<div id="15" class="boxes red" onclick="clicking('15', content15)"> 15 </div>
<div id="12" class="boxes" onclick="clicking('12', content12)"> 12 </div>
<div id="20" class="boxes" onclick="clicking('20', content20)"> 20 </div>
<div id="3" class="boxes red" onclick="clicking('3', content3)"> 3 </div>
<div id="23" class="boxes" onclick="clicking('23', content23)"> 23 </div>
<div id="17" class="boxes red" onclick="clicking('17', content17)"> 17 </div>
<div id="8" class="boxes" onclick="clicking('8', content8)"> 8 </div>
<div id="10" class="boxes red" onclick="clicking('10', content10)"> 10 </div>
<div id="14" class="boxes red" onclick="clicking('14', content14)"> 14 </div>
<div id="4" class="boxes" onclick="clicking('4', content4)"> 4 </div>
<div id="13" class="boxes red" onclick="clicking('13', content13)"> 13 </div>
<div id="18" class="boxes" onclick="clicking('18',content18)"> 18 </div>
<div id="19" class="boxes red" onclick="clicking('19', content19)"> 19 </div>
<div id="9" class="boxes" onclick="clicking('9', content9)"> 9 </div>
</div>
<script>
function getSeen() {
let stored = localStorage.getItem("alreadySeen");
if (stored != null) {
stored = stored.split(",");
for(var i in stored) stored[i] = parseInt(stored[i]);
} else {
stored = [];
}
return stored;
}
let seen = getSeen();
for(var i in seen) {
const elem = document.getElementById(seen[i]);
elem.innerHTML = ":)"
}
const year = 2017;
const content1 = "Dashing through the snow <br> In a one horse open sleigh"
+ "<br>O'er the fields we go <br> Laughing all the way"
+ "<br>Bells on bob tails ring<br>Making spirits bright"
+ "<br>What fun it is to laugh and sing<br>A sleighing song tonight"
+ "<br><br>Oh, jingle bells, jingle bells Jingle all the way<br>Oh, what fun it is to ride In a one horse open sleigh"
+ "<br>Jingle bells, jingle bells Jingle all the way<br>Oh, what fun it is to ride In a one horse open sleigh";
const content2 = '<img height=500 src=http://www.gifmania.hu/Animalt-Gif-Karacsony/Animalt-gifek-Karacsony-Viccek/Karacsony-Viccek-44587.gif>';
const content3 = '<iframe width="700" height="400" src="https://www.youtube.com/embed/sWEfszb9h8Q?autoplay=1" frameborder="0" allowfullscreen></iframe>';
const content4 = "This is the content of day 4";
const content5 = "This is the content of day 5";
const content6 = "This is the content of day 6";
const content7 = "This is the content of day 7";
const content8 = "This is the content of day 8";
const content9 = "This is the content of day 9";
const content10 = "This is the content of day 10";
const content11 = "This is the content of day 11";
const content12 = "This is the content of day 12";
const content13 = "This is the content of day 13";
const content14 = "This is the content of day 14";
const content15 = "This is the content of day 15";
const content16 = "This is the content of day 16";
const content17 = "This is the content of day 17";
const content18 = "This is the content of day 18";
const content19 = "This is the content of day 19";
const content20 = "This is the content of day 20";
const content21 = "This is the content of day 21";
const content22 = "This is the content of day 22";
const content23 = "This is the content of day 23";
const content24 = "This is the content of day 24";
function setSeen(id) {
const seen = getSeen();
if(seen.indexOf(id) == -1) {
seen.push(id);
}
localStorage.setItem("alreadySeen", seen.join(","));
}
function clicking(id, content) {
const elem = document.getElementById(id);
const today = new Date();
const future = new Date(year, 11, parseInt(id), 00, 01, 01);
elem.classList.toggle("open");
if (future < today) {
if (elem.innerHTML == parseInt(id)) {
setSeen(parseInt(id));
elem.innerHTML = content;
} else if (elem.innerHTML == ":)") {
elem.innerHTML = content;
} else {
elem.innerHTML = ":)"
}
elem.scrollIntoView();
} else {
if (elem.innerHTML == parseInt(id)) {
elem.innerHTML = "<span style='color: black'>The time has not come yet!</span>";
elem.scrollIntoView();
} else {
elem.innerHTML = parseInt(id)
}
}
}
</script>
</body>
</html>