-
Notifications
You must be signed in to change notification settings - Fork 0
/
progress.html
178 lines (152 loc) · 4.32 KB
/
progress.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
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*, *:after, *:before {
margin: 0;
padding: 0;
}
body {
padding: 15px;
font-family: Helvetica, sans-serif;
}
input[type="button"] {
margin-top: 20px;
}
.node {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
transition: all 1000ms ease;
}
.activated {
box-shadow: 0px 0px 3px 2px rgba(194, 255, 194, 0.8);
}
.divider {
height: 40px;
width: 5px;
margin-left: 4px;
transition: all 800ms ease;
}
li p {
display: inline-block;
margin-left: 25px;
}
li {
list-style: none;
line-height: 1px;
}
.blue {
background-color: rgba(82, 165, 255, 1);
}
.green {
background-color: rgba(92, 184, 92, 1)
}
.red {
background-color: rgba(255, 148, 148, 1);
}
.grey {
background-color: rgba(201, 201, 201, 1);
}
.col2 {
width: 50%;
float: left;
height: 100%;
}
.col2 h1 {
vertical-align: middle;
}
.container {
height: 100%;
}
.container:after {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="col2">
<ul id="progress">
<li>
<div class="node grey"></div>
<p>Welcome</p></li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>What is internet?</p></li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>Rising of the domains</p></li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>Growing of large sites</p>
</li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>Wireless vs wired</p>
</li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>The future</p>
</li>
</ul>
</div>
<div class="col2">
<h1>We gaan jullie nu iets vertellen over de groei van aantal websites</h1>
</div>
</div>
<input type="button" value="Next" id="next"/>
<input type="button" value="Clear" id="clear"/>
<script>
var list = document.getElementById('progress'),
next = document.getElementById('next'),
clear = document.getElementById('clear'),
children = list.children,
completed = 0;
// simulate activating a node
next.addEventListener('click', function () {
// count the number of completed nodes.
completed = (completed === 0) ? 1 : completed + 2;
if (completed > children.length) return;
// for each node that is completed, reflect the status
// and show a green color!
for (var i = 0; i < completed; i++) {
children[i].children[0].classList.remove('grey');
children[i].children[0].classList.add('blue');
// if this child is a node and not divider,
// make it shine a little more
if (i % 2 === 0) {
children[i].children[0].classList.add('activated');
}
}
}, false);
// clear the activated state of the markers
clear.addEventListener('click', function () {
for (var i = 0; i < children.length; i++) {
children[i].children[0].classList.remove('blue');
children[i].children[0].classList.remove('activated');
children[i].children[0].classList.add('grey');
}
completed = 0;
}, false);
</script>
</body>
</html>