Skip to content

Commit 4631551

Browse files
heronrsheronrs
committed
10 and doing 11
1 parent c2d6cdd commit 4631551

4 files changed

Lines changed: 163 additions & 136 deletions

File tree

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

Lines changed: 132 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,132 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Hold Shift to Check Multiple Checkboxes</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-
/*jshint esversion:6 */
108-
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
109-
const checkboxarr = Array.from(checkboxes)
110-
let shiftKeyInit = false;
111-
let shiftKeyEnd = false;
112-
let idxIni, idxEnd;
113-
let pInit, pEnd;
114-
115-
function handleCheck(e){
116-
if(e.shiftKey && shiftKeyInit === false) {
117-
shiftKeyInit = true;
118-
idxIni = checkboxarr.findIndex(checkbox => checkbox === this);
119-
console.log(idxIni);
120-
console.log('Shift key pressed');
121-
}else if(e.shiftKey && shiftKeyInit === true){
122-
idxEnd = checkboxarr.findIndex(checkbox => checkbox === this);
123-
shiftKeyInit = false;
124-
console.log(idxEnd);
125-
console.log('Shift key ended');
126-
pEnd = this;
127-
}
128-
}
129-
130-
checkboxes.forEach(checkbox => {
131-
checkbox.addEventListener('click', handleCheck);
132-
});
133-
</script>
134-
</body>
135-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Hold Shift to Check Multiple Checkboxes</title>
7+
</head>
8+
9+
<body>
10+
<style>
11+
html {
12+
font-family: sans-serif;
13+
background: #ffc600;
14+
}
15+
16+
.inbox {
17+
max-width: 400px;
18+
margin: 50px auto;
19+
background: white;
20+
border-radius: 5px;
21+
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
22+
}
23+
24+
.item {
25+
display: flex;
26+
align-items: center;
27+
border-bottom: 1px solid #F1F1F1;
28+
}
29+
30+
.item:last-child {
31+
border-bottom: 0;
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+
</style>
59+
<!--
60+
The following is a common layout you would see in an email client.
61+
62+
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.
63+
64+
-->
65+
<div class="inbox">
66+
<div class="item">
67+
<input type="checkbox">
68+
<p>This is an inbox layout.</p>
69+
</div>
70+
<div class="item">
71+
<input type="checkbox">
72+
<p>Check one item</p>
73+
</div>
74+
<div class="item">
75+
<input type="checkbox">
76+
<p>Hold down your Shift key</p>
77+
</div>
78+
<div class="item">
79+
<input type="checkbox">
80+
<p>Check a lower item</p>
81+
</div>
82+
<div class="item">
83+
<input type="checkbox">
84+
<p>Everything inbetween should also be set to checked</p>
85+
</div>
86+
<div class="item">
87+
<input type="checkbox">
88+
<p>Try do it with out any libraries</p>
89+
</div>
90+
<div class="item">
91+
<input type="checkbox">
92+
<p>Just regular JavaScript</p>
93+
</div>
94+
<div class="item">
95+
<input type="checkbox">
96+
<p>Good Luck!</p>
97+
</div>
98+
<div class="item">
99+
<input type="checkbox">
100+
<p>Don't forget to tweet your result!</p>
101+
</div>
102+
</div>
103+
104+
<script>
105+
/*jshint esversion:6 */
106+
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
107+
let lastChecked;
108+
109+
function handleCheck(e) {
110+
let inBetween = false;
111+
if (e.shiftKey && this.checked) {
112+
checkboxes.forEach(checkbox => {
113+
if (checkbox === this || checkbox === lastChecked) {
114+
inBetween = !inBetween;
115+
}
116+
if (inBetween) {
117+
checkbox.checked = true;
118+
}
119+
});
120+
121+
}
122+
123+
lastChecked = this;
124+
}
125+
126+
checkboxes.forEach(checkbox => {
127+
checkbox.addEventListener('click', handleCheck);
128+
});
129+
</script>
130+
</body>
131+
132+
</html>

‎11 - Custom Video Player/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@
2222
</div>
2323
</div>
2424

25-
<script src="scripts.js"></script>
25+
<script src="scripts_donebyme.js"></script>
2626
</body>
2727
</html>

‎11 - Custom Video Player/scripts.js‎

Whitespace-only changes.

‎11 - Custom Video Player/scripts_donebyme.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*jshint esversion: 6*/
2+
const player = document.querySelector('.player');
3+
const video = player.querySelector('.viewer');
4+
const progress = player.querySelector('.progress');
5+
const progressBar = player.querySelector('.progress__filled');
6+
const toggle = player.querySelector('.toggle');
7+
const skipButtons = player.querySelectorAll('[data-skip]');
8+
const ranges = player.querySelectorAll('.player__slider');
9+
10+
11+
// functions
12+
function togglePlay(){
13+
const method = video.paused ? 'play': 'pause';
14+
video[method]();
15+
}
16+
17+
function updateButton(){
18+
const icon = this.paused ? '►' : '❚ ❚';
19+
toggle.textContent = icon;
20+
}
21+
22+
function skip(){
23+
video.currentTime += parseFloat(this.dataset.skip);
24+
}
25+
// event hookups
26+
video.addEventListener('click', togglePlay);
27+
video.addEventListener('play', updateButton);
28+
video.addEventListener('pause', updateButton);
29+
toggle.addEventListener('click', togglePlay);
30+
skipButtons.forEach(button => button.addEventListener('click', skip));

0 commit comments

Comments
 (0)