-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheventListener_challenge.html
119 lines (85 loc) · 5.32 KB
/
eventListener_challenge.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Listener Challenge</title>
</head>
<body>
<div id="initial" style="display:none;">
<div id="final">
<button id="button-id" class="button">Cancel</button>
<form action="https://github.com/joyceling">
<button id="accept-prize" class="button">Accept!</button>
</form>
<p>
You won a prize!
</p>
</div>
</div>
<h1>Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, at, beatae consectetur cupiditate dicta dolorem dolorum eaque labore magnam maxime natus neque nisi placeat provident quibusdam reiciendis soluta sunt unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet aut, dignissimos dolorum explicabo fuga ipsa iusto laboriosam maiores molestiae quibusdam similique ullam vel, vitae voluptates. Fuga quae quam quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur commodi cum eaque, eius esse est eveniet explicabo fuga ipsa non placeat, quo rem suscipit, tenetur totam voluptas! Impedit, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur commodi cum eaque, eius esse est eveniet explicabo fuga ipsa non placeat, quo rem suscipit, tenetur totam voluptas! Impedit, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur commodi cum eaque, eius esse est eveniet explicabo fuga ipsa non placeat, quo rem suscipit, tenetur totam voluptas! Impedit, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur commodi cum eaque, eius esse est eveniet explicabo fuga ipsa non placeat, quo rem suscipit, tenetur totam voluptas! Impedit, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur commodi cum eaque, eius esse est eveniet explicabo fuga ipsa non placeat, quo rem suscipit, tenetur totam voluptas! Impedit, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur commodi cum eaque, eius esse est eveniet explicabo fuga ipsa non placeat, quo rem suscipit, tenetur totam voluptas! Impedit, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur commodi cum eaque, eius esse est eveniet explicabo fuga ipsa non placeat, quo rem suscipit, tenetur totam voluptas! Impedit, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur commodi cum eaque, eius esse est eveniet explicabo fuga ipsa non placeat, quo rem suscipit, tenetur totam voluptas! Impedit, quos.</p>
<script>
var delay = 1000; // delay time in milliseconds
var counter = 0;
var colors = ['red','blue', 'green', 'yellow'];
var text = document.getElementById("text");
var textArray = ["You won a prize!", "Are you sure you don't want your prize?", "You know you want it!!!"];
var divPopup = function () {
document.documentElement.style.margin = "0";
var body = document.getElementsByTagName("body");
body[0].style.margin = "0";
var initialDiv = document.getElementById("initial");
initialDiv.style.height = "400px";
initialDiv.style.width = "100%";
initialDiv.style.backgroundColor = colors[counter % colors.length];
initialDiv.style.zIndex = "1";
initialDiv.style.position = "absolute";
var finalDiv = document.getElementById("final");
finalDiv.style.display = "flex";
finalDiv.style.flexDirection = "column-reverse";
finalDiv.style.alignItems = "center";
if (counter === 3) {
clearTimeout(popupId);
return;
}
var paragraph = document.getElementsByTagName("p");
paragraph[0].innerHTML = textArray[counter % textArray.length];
paragraph[0].style.margin = "10px";
counter++;
// make the div appear!
initialDiv.style.display = "display";
// enable flex-box
initialDiv.style.display = "flex";
initialDiv.style.justifyContent = "center";
initialDiv.style.alignItems = "center";
initialDiv.style.flexDirection = "column-reverse";
var button = document.getElementsByTagName("button");
// Format the button
for (var i = 0; i < button.length; i++) {
button[i].style.height = "50px";
button[i].style.width = "100px";
button[i].style.margin = "5px";
}
paragraph[0].style.fontSize = "70px";
paragraph[0].style.color = "white";
// Create an ID for your button so you can reference in function later
button[0].addEventListener("click", second, false);
};
var popupId = setTimeout(divPopup, delay);
var delaytwo = 1000;
var second = function () {
document.getElementById("initial").style.display = "none";
setTimeout(divPopup, delaytwo);
};
</script>
</body>
</html>