Skip to content

Commit 458c1e6

Browse files
winar-jinwinar-jin
committed
complete challenge 28
1 parent f944f95 commit 458c1e6

File tree

11 files changed

+538
-0
lines changed

11 files changed

+538
-0
lines changed

‎28 - Video Speed Controller/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Video Speed Scrubber</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<div class="wrapper">
11+
<video class="flex" width="765" height="430"
12+
src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop
13+
controls></video>
14+
<div class="speed">
15+
<div class="speed-bar">1×</div>
16+
</div>
17+
</div>
18+
19+
<script>
20+
const video = document.querySelector('.flex');
21+
const speed = document.querySelector('.speed');
22+
const speedBar = speed.querySelector('.speed-bar');
23+
24+
function handelMove(e) {
25+
const y = e.pageY - this.offsetTop;
26+
const percent = y / this.offsetHeight;
27+
const height = Math.ceil(percent * 100) + '%';
28+
const min = 0.4;
29+
const max = 4;
30+
const playBackRate = (max - min) * percent + min;
31+
speedBar.style.height = height;
32+
speedBar.textContent = playBackRate.toFixed(2) + '×';
33+
video.playbackRate = playBackRate;
34+
}
35+
36+
speed.addEventListener('mousemove', handelMove, false);
37+
</script>
38+
</body>
39+
</html>

‎28 - Video Speed Controller/style.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
body {
2+
margin: 0;
3+
display:flex;
4+
justify-content: center;
5+
align-items: center;
6+
min-height: 100vh;
7+
background:#4C4C4C url('https://unsplash.it/1500/900?image=1021');
8+
background-size:cover;
9+
font-family: sans-serif;
10+
}
11+
.wrapper {
12+
width:850px;
13+
display:flex;
14+
}
15+
video {
16+
box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
17+
}
18+
19+
.speed {
20+
background:#efefef;
21+
flex:1;
22+
display:flex;
23+
align-items:flex-start;
24+
margin:10px;
25+
border-radius:50px;
26+
box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
27+
overflow: hidden;
28+
}
29+
.speed-bar {
30+
width:100%;
31+
background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
32+
text-shadow:1px 1px 0 rgba(0,0,0,0.2);
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
padding:2px;
37+
color:white;
38+
height:16.3%;
39+
}

‎29 - Countdown Timer/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Countdown Timer</title>
6+
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="timer">
11+
<div class="timer__controls">
12+
<button data-time="20" class="timer__button">20 Secs</button>
13+
<button data-time="300" class="timer__button">Work 5</button>
14+
<button data-time="900" class="timer__button">Quick 15</button>
15+
<button data-time="1200" class="timer__button">Snack 20</button>
16+
<button data-time="3600" class="timer__button">Lunch Break</button>
17+
<form name="customForm" id="custom">
18+
<input type="text" name="minutes" placeholder="Enter Minutes">
19+
</form>
20+
</div>
21+
<div class="display">
22+
<h1 class="display__time-left"></h1>
23+
<p class="display__end-time"></p>
24+
</div>
25+
</div>
26+
27+
<script src="scripts-START.js"></script>
28+
</body>
29+
</html>

‎29 - Countdown Timer/scripts-FINISHED.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
let countdown;
2+
const timerDisplay = document.querySelector('.display__time-left');
3+
const endTime = document.querySelector('.display__end-time');
4+
const buttons = document.querySelectorAll('[data-time]');
5+
6+
function timer(seconds) {
7+
// clear any existing timers
8+
clearInterval(countdown);
9+
10+
const now = Date.now();
11+
const then = now + seconds * 1000;
12+
displayTimeLeft(seconds);
13+
displayEndTime(then);
14+
15+
countdown = setInterval(() => {
16+
const secondsLeft = Math.round((then - Date.now()) / 1000);
17+
// check if we should stop it!
18+
if(secondsLeft < 0) {
19+
clearInterval(countdown);
20+
return;
21+
}
22+
// display it
23+
displayTimeLeft(secondsLeft);
24+
}, 1000);
25+
}
26+
27+
function displayTimeLeft(seconds) {
28+
const minutes = Math.floor(seconds / 60);
29+
const remainderSeconds = seconds % 60;
30+
const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
31+
document.title = display;
32+
timerDisplay.textContent = display;
33+
}
34+
35+
function displayEndTime(timestamp) {
36+
const end = new Date(timestamp);
37+
const hour = end.getHours();
38+
const adjustedHour = hour > 12 ? hour - 12 : hour;
39+
const minutes = end.getMinutes();
40+
endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
41+
}
42+
43+
function startTimer() {
44+
const seconds = parseInt(this.dataset.time);
45+
timer(seconds);
46+
}
47+
48+
buttons.forEach(button => button.addEventListener('click', startTimer));
49+
document.customForm.addEventListener('submit', function(e) {
50+
e.preventDefault();
51+
const mins = this.minutes.value;
52+
console.log(mins);
53+
timer(mins * 60);
54+
this.reset();
55+
});

‎29 - Countdown Timer/scripts-START.js‎

Whitespace-only changes.

‎29 - Countdown Timer/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
html {
2+
box-sizing: border-box;
3+
font-size: 10px;
4+
background: #8E24AA;
5+
background: linear-gradient(45deg, #42a5f5 0%,#478ed1 50%,#0d47a1 100%);
6+
}
7+
8+
*, *:before, *:after {
9+
box-sizing: inherit;
10+
}
11+
12+
body {
13+
margin:0;
14+
text-align: center;
15+
font-family: 'Inconsolata', monospace;
16+
}
17+
18+
.display__time-left {
19+
font-weight: 100;
20+
font-size: 20rem;
21+
margin: 0;
22+
color:white;
23+
text-shadow:4px 4px 0 rgba(0,0,0,0.05);
24+
}
25+
26+
.timer {
27+
display:flex;
28+
min-height: 100vh;
29+
flex-direction:column;
30+
}
31+
32+
.timer__controls {
33+
display: flex;
34+
}
35+
36+
.timer__controls > * {
37+
flex:1;
38+
}
39+
40+
.timer__controls form {
41+
flex:1;
42+
display:flex;
43+
}
44+
45+
.timer__controls input {
46+
flex:1;
47+
border:0;
48+
padding:2rem;
49+
}
50+
51+
.timer__button {
52+
background:none;
53+
border:0;
54+
cursor: pointer;
55+
color:white;
56+
font-size: 2rem;
57+
text-transform: uppercase;
58+
background:rgba(0,0,0,0.1);
59+
border-bottom:3px solid rgba(0,0,0,0.2);
60+
border-right:1px solid rgba(0,0,0,0.2);
61+
padding:1rem;
62+
font-family: 'Inconsolata', monospace;
63+
}
64+
65+
.timer__button:hover,
66+
.timer__button:focus {
67+
background:rgba(0,0,0,0.2);
68+
outline:0;
69+
}
70+
71+
.display {
72+
flex:1;
73+
display:flex;
74+
flex-direction: column;
75+
align-items: center;
76+
justify-content: center;
77+
}
78+
79+
.display__end-time {
80+
font-size: 4rem;
81+
color:white;
82+
}

0 commit comments

Comments
 (0)