Skip to content

Commit c845e2a

Browse files
author
Tom Gillard
committed
Merge branch 'master' of github.com:tgdev/JavaScript30
2 parents c4a395c + beeafb3 commit c845e2a

File tree

7 files changed

+450
-12
lines changed

7 files changed

+450
-12
lines changed

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
margin:20px;
3939
}
4040

41-
p {
41+
label {
4242
margin:0;
4343
padding:20px;
4444
transition:background 0.2s;
@@ -61,39 +61,39 @@
6161
<div class="inbox">
6262
<div class="item">
6363
<input type="checkbox">
64-
<p>This is an inbox layout.</p>
64+
<label>This is an inbox layout.</label>
6565
</div>
6666
<div class="item">
6767
<input type="checkbox">
68-
<p>Check one item</p>
68+
<label>Check one item</label>
6969
</div>
7070
<div class="item">
7171
<input type="checkbox">
72-
<p>Hold down your Shift key</p>
72+
<label>Hold down your Shift key</label>
7373
</div>
7474
<div class="item">
7575
<input type="checkbox">
76-
<p>Check a lower item</p>
76+
<label>Check a lower item</label>
7777
</div>
7878
<div class="item">
7979
<input type="checkbox">
80-
<p>Everything inbetween should also be set to checked</p>
80+
<label>Everything inbetween should also be set to checked</label>
8181
</div>
8282
<div class="item">
8383
<input type="checkbox">
84-
<p>Try do it with out any libraries</p>
84+
<label>Try do it with out any libraries</label>
8585
</div>
8686
<div class="item">
8787
<input type="checkbox">
88-
<p>Just regular JavaScript</p>
88+
<label>Just regular JavaScript</label>
8989
</div>
9090
<div class="item">
9191
<input type="checkbox">
92-
<p>Good Luck!</p>
92+
<label>Good Luck!</label>
9393
</div>
9494
<div class="item">
9595
<input type="checkbox">
96-
<p>Don't forget to tweet your result!</p>
96+
<label>Don't forget to tweet your result!</label>
9797
</div>
9898
</div>
9999

‎11 - Custom Video Player/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
</div>
1717
<button class="player__button toggle" title="Toggle Play">►</button>
1818
<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
19-
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
19+
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.5" value="1">
2020
<button data-skip="-10" class="player__button">« 10s</button>
2121
<button data-skip="25" class="player__button">25s »</button>
22+
<button class="player__button full">[&nbsp;&nbsp;&nbsp;]</button>
2223
</div>
2324
</div>
2425

‎11 - Custom Video Player/scripts.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
'use strict';
2+
3+
// get elements
4+
const player = document.querySelector('.player');
5+
const video = player.querySelector('.viewer');
6+
const progress = player.querySelector('.progress');
7+
const progressBar = player.querySelector('.progress__filled');
8+
const toggle = player.querySelector('.toggle');
9+
const fullscreenButton = player.querySelector('.full');
10+
const skipButtons = player.querySelectorAll('[data-skip]');
11+
const ranges = player.querySelectorAll('.player__slider');
12+
13+
// const height = video.videoHeight;
14+
// const width = video.videoWidth;
15+
16+
// build functions
17+
const togglePlay = function togglePlay() {
18+
const method = video.paused ? 'play' : 'pause';
19+
video[method]();
20+
};
21+
22+
const updateButton = function updateButton() {
23+
const icon = this.paused ? '►' : '❚❚';
24+
toggle.textContent = icon;
25+
};
26+
27+
const skip = function skip() {
28+
video.currentTime += parseFloat(this.dataset.skip);
29+
};
30+
31+
const handleRangeUpdate = function handleRangeUpdate() {
32+
video[this.name] = this.value;
33+
};
34+
35+
const handleProgress = function handleProgress() {
36+
const percent = (video.currentTime / video.duration) * 100;
37+
progressBar.style.flexBasis = `${percent}%`;
38+
};
39+
40+
const scrub = function scrub(e) {
41+
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
42+
video.currentTime = scrubTime;
43+
};
44+
45+
const triggerFullscreen = function toggleFullscreen() {
46+
47+
if (document.fullscreenElement) {
48+
49+
// console.log('in full screen');
50+
document.exitFullscreen()
51+
52+
} else {
53+
54+
// console.log('not in fullscreen');
55+
if (video.requestFullscreen) {
56+
57+
video.requestFullscreen();
58+
59+
} else if (video.mozRequestFullScreen) {
60+
61+
video.mozRequestFullScreen();
62+
63+
} else if (video.webkitRequestFullscreen) {
64+
65+
video.webkitRequestFullscreen();
66+
67+
}
68+
69+
}
70+
71+
};
72+
73+
/*
74+
* Wireup event listeners
75+
*/
76+
77+
// Play / Pause
78+
document.addEventListener('keydown', e => {
79+
// spacebar pressed
80+
if (e.keyCode === 32) {
81+
// Remove focus from any focused element
82+
if (document.activeElement) {
83+
document.activeElement.blur();
84+
}
85+
togglePlay();
86+
}
87+
});
88+
video.addEventListener('click', togglePlay);
89+
video.addEventListener('play', updateButton);
90+
video.addEventListener('pause', updateButton);
91+
toggle.addEventListener('click', togglePlay);
92+
93+
// Progress bar
94+
let mouseDown = false;
95+
video.addEventListener('timeupdate', handleProgress);
96+
progress.addEventListener('click', scrub);
97+
progress.addEventListener('mousemove', (e) => mouseDown && scrub(e));
98+
progress.addEventListener('mousedown', () => mouseDown = true);
99+
progress.addEventListener('mouseup', () => mouseDown = false);
100+
101+
// Skip back & forward
102+
skipButtons.forEach(button => button.addEventListener('click', skip));
103+
104+
// Adjust volume & playback speed
105+
ranges.forEach(range => {
106+
range.addEventListener('change', handleRangeUpdate);
107+
range.addEventListener('mousemove', handleRangeUpdate);
108+
});
109+
110+
// Fullscreen
111+
fullscreenButton.addEventListener('click', triggerFullscreen);

‎11 - Custom Video Player/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ body {
101101
width:50%;
102102
background:#ffc600;
103103
flex:0;
104-
flex-basis:50%;
104+
flex-basis:0%;
105105
}
106106

107107
/* unholy css to style input type="range" */

‎12 - Key Sequence Detection/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Key Detection</title>
6+
<script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
7+
</head>
8+
<body>
9+
<script>
10+
const pressed = [];
11+
const konamiCode = [
12+
'ArrowUp',
13+
'ArrowUp',
14+
'ArrowDown',
15+
'ArrowDown',
16+
'ArrowLeft',
17+
'ArrowRight',
18+
'ArrowLeft',
19+
'ArrowRight',
20+
'b',
21+
'a',
22+
'Enter'
23+
];
24+
25+
window.addEventListener('keyup', (e) => {
26+
27+
pressed.push(e.key);
28+
pressed.splice(-konamiCode.length - 1, pressed.length - konamiCode.length);
29+
30+
if (pressed.join('').includes(konamiCode.join(''))) {
31+
cornify_add();
32+
}
33+
34+
});
35+
36+
</script>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)