Skip to content

Commit 3af2b90

Browse files
author
tomgillard
committed
Completing javascript 30 day 10 in own index file. Kept first attempt for reference
1 parent e4f77ac commit 3af2b90

File tree

1 file changed

+179
-0
lines changed

1 file changed

+179
-0
lines changed

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

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Hold Shift to Check Multiple Checkboxes</title>
6+
<style>
7+
8+
html {
9+
font-family: sans-serif;
10+
background:#ffc600;
11+
}
12+
13+
.inbox {
14+
max-width:400px;
15+
margin:50px auto;
16+
background:white;
17+
border-radius:5px;
18+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
19+
}
20+
21+
.item {
22+
display:flex;
23+
align-items:center;
24+
border-bottom: 1px solid #F1F1F1;
25+
}
26+
27+
.item:last-child {
28+
border-bottom:0;
29+
}
30+
31+
32+
input:checked + p {
33+
background:#F9F9F9;
34+
text-decoration: line-through;
35+
}
36+
37+
input[type="checkbox"] {
38+
margin:20px;
39+
}
40+
41+
p {
42+
margin:0;
43+
padding:20px;
44+
transition:background 0.2s;
45+
flex:1;
46+
font-family:'helvetica neue';
47+
font-size: 20px;
48+
font-weight: 200;
49+
border-left: 1px solid #D1E2FF;
50+
}
51+
52+
</style>
53+
</head>
54+
<body>
55+
<!--
56+
The following is a common layout you would see in an email client.
57+
58+
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.
59+
60+
-->
61+
<div class="inbox">
62+
<div class="item">
63+
<input type="checkbox">
64+
<p>This is an inbox layout.</p>
65+
</div>
66+
<div class="item">
67+
<input type="checkbox">
68+
<p>Check one item</p>
69+
</div>
70+
<div class="item">
71+
<input type="checkbox">
72+
<p>Hold down your Shift key</p>
73+
</div>
74+
<div class="item">
75+
<input type="checkbox">
76+
<p>Check a lower item</p>
77+
</div>
78+
<div class="item">
79+
<input type="checkbox">
80+
<p>Everything inbetween should also be set to checked</p>
81+
</div>
82+
<div class="item">
83+
<input type="checkbox">
84+
<p>Try do it with out any libraries</p>
85+
</div>
86+
<div class="item">
87+
<input type="checkbox">
88+
<p>Just regular JavaScript</p>
89+
</div>
90+
<div class="item">
91+
<input type="checkbox">
92+
<p>Good Luck!</p>
93+
</div>
94+
<div class="item">
95+
<input type="checkbox">
96+
<p>Don't forget to tweet your result!</p>
97+
</div>
98+
</div>
99+
100+
<script>
101+
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
102+
103+
let lastChecked;
104+
105+
const handleCheck = function handleCheck(e) {
106+
let inBetween = false;
107+
108+
// check if the shiftKey is down
109+
// AND that the input is being checked
110+
if (e.shiftKey && this.checked) {
111+
checkboxes.forEach(checkbox => {
112+
if (checkbox === this || checkbox === lastChecked) {
113+
// set to opposite of iteself to allow selecting in both directions
114+
inBetween = !inBetween;
115+
}
116+
117+
// if we're in range set the checked attribute to checked
118+
if (inBetween) {
119+
checkbox.checked = true;
120+
}
121+
});
122+
}
123+
124+
lastChecked = this;
125+
};
126+
127+
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
128+
</script>
129+
130+
<!-- <script>
131+
// First attempt... yikes!
132+
const checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));
133+
console.log({checkboxes});
134+
135+
let firstCheckbox = null;
136+
let selectingMultiple = false;;
137+
138+
const selectCheckbox = function selectCheckbox() {
139+
let direction = 1; // 1 is top down, -1 will be bottom up
140+
// check if clicked before
141+
if (firstCheckbox === null) {
142+
// if first click set firstActive as item clicked
143+
firstCheckbox = this;
144+
145+
} else if (firstCheckbox !== null && selectingMultiple) {
146+
const startIndex = checkboxes.indexOf(firstCheckbox);
147+
const endIndex = checkboxes.indexOf(this);
148+
console.log({startIndex});
149+
console.log({endIndex});
150+
151+
// else get all DOM items between firstActive and item clicked
152+
// loop through them updating input attribute to checked
153+
const selectedCheckboxes = checkboxes.filter((checkbox, index) => {
154+
return index >= startIndex && index <= endIndex;
155+
}).map(selected => {
156+
selected.setAttribute('checked', 'checked');
157+
});
158+
// console.log({selectedCheckboxes});
159+
firstCheckbox = null;
160+
selectingMultiple = false;
161+
}
162+
}
163+
164+
// set selectingMultiple to true
165+
const activateMultiSelect = function activateMultiSelect(e) {
166+
if (e.keyCode === 16) {
167+
selectingMultiple = true;
168+
}
169+
};
170+
171+
// listen for click
172+
checkboxes.forEach(checkbox => checkbox.addEventListener('click', selectCheckbox));
173+
174+
// listen for shift keypress
175+
document.addEventListener('keydown', activateMultiSelect);
176+
177+
</script> -->
178+
</body>
179+
</html>

0 commit comments

Comments
 (0)