Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 2ff3ffc

Browse filesBrowse files
goodmanshipgoodmanship
committed
10 done - wes' code is nicer
1 parent 3aa6e21 commit 2ff3ffc
Copy full SHA for 2ff3ffc

File tree

Expand file treeCollapse file tree

2 files changed

+278
-0
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

2 files changed

+278
-0
lines changed
Open diff view settings
Collapse file

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

Copy file name to clipboard
+146Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
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+
let shifting = false;
108+
window.addEventListener('keydown', (e) =>{
109+
if(e.key == 'Shift') shifting = true;
110+
});
111+
window.addEventListener('keyup', (e) => {
112+
if(e.key == 'Shift') shifting = false;
113+
});
114+
115+
let lastBox = null;
116+
const checkboxes = document.querySelectorAll('input[type=checkbox]');
117+
checkboxes.forEach(checkbox => {
118+
checkbox.addEventListener('click', checkdog);
119+
});
120+
121+
function checkdog(e) {
122+
if(lastBox != null && shifting && this.checked){
123+
section(lastBox,this).forEach((item) => {
124+
item.querySelector('input').checked = true;
125+
});
126+
console.log(
127+
'check all boxes between -%s- and -%s-',
128+
lastBox.parentElement.querySelector('p').innerHTML,
129+
this.parentElement.querySelector('p').innerHTML
130+
);
131+
}
132+
if(this.checked) lastBox = this;
133+
}
134+
135+
function section(boxA, boxB) {
136+
let allItems = [...boxA.parentElement.parentElement.children];
137+
let a = allItems.indexOf(boxA.parentElement);
138+
let b = allItems.indexOf(boxB.parentElement);
139+
if(a<=b)
140+
return allItems.slice(a,b+1);
141+
else
142+
return allItems.slice(b,a+1);
143+
}
144+
</script>
145+
</body>
146+
</html>
Collapse file

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

Copy file name to clipboard
+132Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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+
let lastBox = null;
108+
const checkboxes = document.querySelectorAll('input[type=checkbox]');
109+
110+
function checkdog(e) {
111+
if(lastBox != null && e.shiftKey && this.checked){
112+
// loop thru the shit
113+
}
114+
if(this.checked) lastBox = this;
115+
}
116+
117+
checkboxes.forEach(checkbox => {
118+
checkbox.addEventListener('click', checkdog);
119+
});
120+
121+
function section(boxA, boxB) {
122+
let allItems = [...boxA.parentElement.parentElement.children];
123+
let a = allItems.indexOf(boxA.parentElement);
124+
let b = allItems.indexOf(boxB.parentElement);
125+
if(a<=b)
126+
return allItems.slice(a,b+1);
127+
else
128+
return allItems.slice(b,a+1);
129+
}
130+
</script>
131+
</body>
132+
</html>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.