Skip to content

Commit 9ee43ee

Browse files
author
QbanCowboy
committed
2 parents 1776af1 + a0ba757 commit 9ee43ee

File tree

5 files changed

+391
-2
lines changed

5 files changed

+391
-2
lines changed

‎11 - Custom Video Player/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>HTML Video Player</title>
6-
<link rel="stylesheet" href="style.css">
6+
<link rel="stylesheet" href="style-cf.css">
77
</head>
88
<body>
99

@@ -19,9 +19,10 @@
1919
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" 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="fullscreen" title="Fullscreen Mode">FS</button>
2223
</div>
2324
</div>
2425

25-
<script src="scripts.js"></script>
26+
<script src="scripts-cf.js"></script>
2627
</body>
2728
</html>

‎11 - Custom Video Player/scripts-cf.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* Get our Elements */
2+
const player = document.querySelector('.player');
3+
const video = player.querySelector('.viewer');
4+
5+
const progress = player.querySelector('.progress');
6+
const progressBar = progress.querySelector('.progress__filled');
7+
8+
const toggle = player.querySelector('.toggle');
9+
const skipButtons = player.querySelectorAll('[data-skip]')
10+
const ranges = player.querySelectorAll('.player__slider');
11+
const fullScreen = player.querySelector('.fullscreen');
12+
13+
/* Build out functions */
14+
15+
function togglePlay() {
16+
const method = video.paused ? 'play' : 'pause';
17+
video[method]();
18+
/* if (video.paused) {
19+
video.play();
20+
} else {
21+
video.pause();
22+
} */
23+
}
24+
25+
function updateButton() {
26+
const icon = this.paused ? '►' : '❚ ❚';
27+
toggle.textContent = icon;
28+
}
29+
30+
function skip () {
31+
//NOTE: The value in the dataset is a String, so it needs to be converted. In this case, to a float.
32+
video.currentTime += parseFloat(this.dataset.skip);
33+
}
34+
35+
function handleRangeUpdate () {
36+
video[this.name]=this.value;
37+
}
38+
39+
function handleProgress () {
40+
const percent = (video.currentTime/video.duration) * 100;
41+
progressBar.style.flexBasis = `${percent}%`;
42+
}
43+
44+
function scrub (e) {
45+
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
46+
video.currentTime = scrubTime;
47+
}
48+
49+
function setFullScreen() {
50+
console.log("click!");
51+
video.webkitDisplayingFullscreen = true;
52+
}
53+
54+
/* Hook up the event listeners */
55+
56+
video.addEventListener('click', togglePlay);
57+
video.addEventListener('play', updateButton);
58+
video.addEventListener('pause', updateButton);
59+
video.addEventListener('timeupdate', handleProgress);
60+
61+
toggle.addEventListener('click', togglePlay);
62+
63+
skipButtons.forEach(button => button.addEventListener("click", skip));
64+
65+
ranges.forEach(range => range.addEventListener("change", handleRangeUpdate));
66+
67+
let mouseDown = false;
68+
progress.addEventListener('click', scrub);
69+
progress.addEventListener('mousemove', (e)=> mouseDown && scrub(e));
70+
progress.addEventListener('mousedown', ()=> mouseDown = true);
71+
progress.addEventListener('mouseup', ()=> mouseDown = false);
72+
fullScreen.addEventListener('click', setFullScreen);

‎11 - Custom Video Player/style-cf.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
*, *:before, *:after {
6+
box-sizing: inherit;
7+
}
8+
9+
body {
10+
padding: 0;
11+
display:flex;
12+
background:#7A419B;
13+
min-height:100vh;
14+
background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%);
15+
background-size:cover;
16+
align-items: center;
17+
justify-content: center;
18+
}
19+
20+
.player {
21+
max-width:750px;
22+
border:5px solid rgba(0,0,0,0.2);
23+
box-shadow:0 0 20px rgba(0,0,0,0.2);
24+
position: relative;
25+
font-size: 0;
26+
overflow: hidden;
27+
}
28+
29+
.player__video {
30+
width: 100%;
31+
}
32+
33+
.player__button {
34+
background:none;
35+
border:0;
36+
line-height:1;
37+
color:white;
38+
text-align: center;
39+
outline:0;
40+
padding: 0;
41+
cursor:pointer;
42+
max-width:50px;
43+
}
44+
45+
.player__button:focus {
46+
border-color: #ffc600;
47+
}
48+
49+
.player__slider {
50+
width:10px;
51+
height:30px;
52+
}
53+
54+
.player__controls {
55+
display:flex;
56+
position: absolute;
57+
bottom:0;
58+
width: 100%;
59+
transform: translateY(100%) translateY(-5px);
60+
transition:all .3s;
61+
flex-wrap:wrap;
62+
background:rgba(0,0,0,0.1);
63+
}
64+
65+
.player:hover .player__controls {
66+
transform: translateY(0);
67+
}
68+
69+
.player:hover .progress {
70+
height:15px;
71+
}
72+
73+
.player__controls > * {
74+
flex:1;
75+
}
76+
77+
.progress {
78+
flex:10;
79+
position: relative;
80+
display:flex;
81+
flex-basis:100%;
82+
height:5px;
83+
transition:height 0.3s;
84+
background:rgba(0,0,0,0.5);
85+
cursor:ew-resize;
86+
}
87+
88+
.fullscreen {
89+
background-color: black;
90+
color: white;
91+
}
92+
93+
.progress__filled {
94+
width:50%;
95+
background:#ffc600;
96+
flex:0;
97+
flex-basis:50%;
98+
}
99+
100+
/* unholy css to style input type="range" */
101+
102+
input[type=range] {
103+
-webkit-appearance: none;
104+
background:transparent;
105+
width: 100%;
106+
margin: 0 5px;
107+
}
108+
input[type=range]:focus {
109+
outline: none;
110+
}
111+
input[type=range]::-webkit-slider-runnable-track {
112+
width: 100%;
113+
height: 8.4px;
114+
cursor: pointer;
115+
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
116+
background: rgba(255,255,255,0.8);
117+
border-radius: 1.3px;
118+
border: 0.2px solid rgba(1, 1, 1, 0);
119+
}
120+
input[type=range]::-webkit-slider-thumb {
121+
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
122+
height: 15px;
123+
width: 15px;
124+
border-radius: 50px;
125+
background: #ffc600;
126+
cursor: pointer;
127+
-webkit-appearance: none;
128+
margin-top: -3.5px;
129+
box-shadow:0 0 2px rgba(0,0,0,0.2);
130+
}
131+
input[type=range]:focus::-wefbkit-slider-runnable-track {
132+
background: #bada55;
133+
}
134+
input[type=range]::-moz-range-track {
135+
width: 100%;
136+
height: 8.4px;
137+
cursor: pointer;
138+
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
139+
background: #ffffff;
140+
border-radius: 1.3px;
141+
border: 0.2px solid rgba(1, 1, 1, 0);
142+
}
143+
input[type=range]::-moz-range-thumb {
144+
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
145+
height: 15px;
146+
width: 15px;
147+
border-radius: 50px;
148+
background: #ffc600;
149+
cursor: pointer;
150+
}

‎12 - Key Sequence Detection/index-CF.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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 secretCode = "ovaltine";
12+
window.addEventListener('keyup', (e) => {
13+
pressed.push(e.key);
14+
pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
15+
console.log(pressed);
16+
if (pressed.join('').includes(secretCode)){
17+
console.log ("DING! Be sure to drink your Ovaltine!");
18+
cornify_add();
19+
}
20+
});
21+
</script>
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)