Skip to content

Commit 27eb70d

Browse files
cwkosmancwkosman
committed
Completed exercise 10
1 parent d9e29cb commit 27eb70d

File tree

1 file changed

+137
-0
lines changed

1 file changed

+137
-0
lines changed

‎10 - Hold Shift and Check Checkboxes/index.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
<style>
9+
10+
html {
11+
font-family: sans-serif;
12+
background:#ffc600;
13+
}
14+
15+
.inbox {
16+
max-width:400px;
17+
margin:50px auto;
18+
background:white;
19+
border-radius:5px;
20+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
21+
}
22+
23+
.item {
24+
display:flex;
25+
align-items:center;
26+
border-bottom: 1px solid #F1F1F1;
27+
}
28+
29+
.item:last-child {
30+
border-bottom:0;
31+
}
32+
33+
34+
input:checked + p {
35+
background:#F9F9F9;
36+
text-decoration: line-through;
37+
}
38+
39+
input[type="checkbox"] {
40+
margin:20px;
41+
}
42+
43+
p {
44+
margin:0;
45+
padding:20px;
46+
transition:background 0.2s;
47+
flex:1;
48+
font-family:'helvetica neue';
49+
font-size: 20px;
50+
font-weight: 200;
51+
border-left: 1px solid #D1E2FF;
52+
}
53+
54+
.details {
55+
text-align: center;
56+
font-size: 15px;
57+
}
58+
59+
60+
</style>
61+
<!--
62+
The following is a common layout you would see in an email client.
63+
64+
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
65+
66+
-->
67+
<div class="inbox">
68+
<div class="item">
69+
<input type="checkbox">
70+
<p>This is an inbox layout.</p>
71+
</div>
72+
<div class="item">
73+
<input type="checkbox">
74+
<p>Check one item</p>
75+
</div>
76+
<div class="item">
77+
<input type="checkbox">
78+
<p>Hold down your Shift key</p>
79+
</div>
80+
<div class="item">
81+
<input type="checkbox">
82+
<p>Check a lower item</p>
83+
</div>
84+
<div class="item">
85+
<input type="checkbox">
86+
<p>Everything inbetween should also be set to checked</p>
87+
</div>
88+
<div class="item">
89+
<input type="checkbox">
90+
<p>Try do it with out any libraries</p>
91+
</div>
92+
<div class="item">
93+
<input type="checkbox">
94+
<p>Just regular JavaScript</p>
95+
</div>
96+
<div class="item">
97+
<input type="checkbox">
98+
<p>Good Luck!</p>
99+
</div>
100+
<div class="item">
101+
<input type="checkbox">
102+
<p>Don't forget to tweet your result!</p>
103+
</div>
104+
</div>
105+
106+
<script>
107+
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
108+
109+
let lastChecked;
110+
111+
function handleCheck(e) {
112+
// check if user pressed shift AND and if user is checking something, not unchecking it
113+
let inBetween = false;
114+
if(e.shiftKey && this.checked) {
115+
//loop over each checkbox
116+
checkboxes.forEach(checkbox => {
117+
console.log(checkbox);
118+
if(checkbox === this || checkbox === lastChecked) { //if the user just clicked on it or it was the one they clicked on just prior
119+
inBetween = !inBetween; //flag variable gets switched switched
120+
console.log('Boundary');
121+
}
122+
123+
if (inBetween) {
124+
checkbox.check = true; // so long as inBetween is true, check the checkbox being looped over by the forEach method, inclusive since the flag got changed prior to this step
125+
}
126+
});
127+
}
128+
129+
lastChecked = this; // whatever the user clicked on last, since it runs after everything else
130+
}
131+
132+
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
133+
134+
135+
</script>
136+
</body>
137+
</html>

0 commit comments

Comments
 (0)