Skip to content

Commit f210e44

Browse files
AngelaReadAngelaRead
committed
Complete Day 10 - Hold Shift and Check Checkboxes
1 parent b627a47 commit f210e44

2 files changed

Lines changed: 38 additions & 123 deletions

File tree

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

Lines changed: 0 additions & 102 deletions
This file was deleted.

10 - Hold Shift and Check Checkboxes/index-FINISHED.html renamed to 10 - Hold Shift and Check Checkboxes/index.html

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Hold Shift to Check Multiple Checkboxes</title>
6-
<link rel="icon" href="https://fav.farm/✅" />
6+
<link rel="icon" href="https://fav.farm/🔥" />
77
</head>
88
<body>
99
<style>
1010

1111
html {
12-
font-family: sans-serif;
13-
background: #ffc600;
12+
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
13+
background: #53c5c5;
1414
}
1515

1616
.inbox {
@@ -27,13 +27,22 @@
2727
border-bottom: 1px solid #F1F1F1;
2828
}
2929

30+
button {
31+
display: block;
32+
margin: 10px auto;
33+
}
34+
35+
button:hover {
36+
color:#53c5c5;
37+
background-color: black;
38+
}
39+
3040
.item:last-child {
3141
border-bottom: 0;
3242
}
3343

34-
3544
input:checked + p {
36-
background: #F9F9F9;
45+
background: #c9c7c7;
3746
text-decoration: line-through;
3847
}
3948

@@ -46,7 +55,7 @@
4655
padding: 20px;
4756
transition: background 0.2s;
4857
flex: 1;
49-
font-family: 'helvetica neue';
58+
font-family:'helvetica neue';
5059
font-size: 20px;
5160
font-weight: 200;
5261
border-left: 1px solid #D1E2FF;
@@ -55,50 +64,54 @@
5564
<!--
5665
The following is a common layout you would see in an email client.
5766
58-
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes in-between those two checkboxes should be checked.
67+
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.
5968
6069
-->
6170
<div class="inbox">
6271
<div class="item">
6372
<input type="checkbox">
64-
<p>This is an inbox layout.</p>
73+
<p>🗂️ This is an inbox layout.</p>
6574
</div>
6675
<div class="item">
6776
<input type="checkbox">
68-
<p>Check one item</p>
77+
<p>🗂️ Check one item</p>
6978
</div>
7079
<div class="item">
7180
<input type="checkbox">
72-
<p>Hold down your Shift key</p>
81+
<p>🗂️ Hold down your Shift key</p>
7382
</div>
7483
<div class="item">
7584
<input type="checkbox">
76-
<p>Check a lower item</p>
85+
<p>🗂️ Check a lower item</p>
7786
</div>
7887
<div class="item">
7988
<input type="checkbox">
80-
<p>Everything in between should also be set to checked</p>
89+
<p>🗂️ Everything in between should also be set to checked</p>
8190
</div>
8291
<div class="item">
8392
<input type="checkbox">
84-
<p>Try do it without any libraries</p>
93+
<p>🗂️ Try to do it without any libraries</p>
8594
</div>
8695
<div class="item">
8796
<input type="checkbox">
88-
<p>Just regular JavaScript</p>
97+
<p>🗂️ Just regular JavaScript</p>
8998
</div>
9099
<div class="item">
91100
<input type="checkbox">
92-
<p>Good Luck!</p>
101+
<p>🗂️ Good Luck!</p>
93102
</div>
94103
<div class="item">
95104
<input type="checkbox">
96-
<p>Don't forget to tweet your result!</p>
105+
<p>🗂️ Don't forget to tweet your result!</p>
106+
</div>
107+
<div class="item">
108+
<button id="deselect">Deselect All</button>
97109
</div>
98110
</div>
111+
99112

100113
<script>
101-
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
114+
const checkboxes = document.querySelectorAll('.inbox [type="checkbox"]');
102115

103116
let lastChecked;
104117

@@ -107,16 +120,16 @@
107120
// AND check that they are checking it
108121
let inBetween = false;
109122
if (e.shiftKey && this.checked) {
110-
// go ahead and do what we please
111-
// loop over every single checkbox
123+
// go ahead and do what we please
124+
// loop over every single checkbox
112125
checkboxes.forEach(checkbox => {
113126
console.log(checkbox);
114-
if (checkbox === this || checkbox === lastChecked) {
127+
if(checkbox === this || checkbox === lastChecked) {
115128
inBetween = !inBetween;
116129
console.log('Starting to check them in between!');
117130
}
118131

119-
if (inBetween) {
132+
if(inBetween) {
120133
checkbox.checked = true;
121134
}
122135
});
@@ -125,6 +138,10 @@
125138
lastChecked = this;
126139
}
127140

141+
document.querySelector('#deselect').addEventListener('click', () => {
142+
checkboxes.forEach(checkbox => checkbox.checked = false);
143+
});
144+
128145
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
129146
</script>
130147
</body>

0 commit comments

Comments
 (0)