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
Sign up
Appearance settings

Commit e50c44f

Browse files
day 31 😄
1 parent 84157f4 commit e50c44f

File tree

6 files changed

+108
-1
lines changed

6 files changed

+108
-1
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,7 @@ Motivate yourself to code daily till 30 days, and see the magic!
4444
| [Day 25](./each%20day%20build%20day!/Day%2025/) | [Event bubbling, capture and once](./each%20day%20build%20day!/Day%2025/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2025/README.md/) |
4545
| [Day 26](./each%20day%20build%20day!/Day%2026/) | [Text to Speech](./each%20day%20build%20day!/Day%2026/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2026/README.md/) |
4646
| [Day 27](./each%20day%20build%20day!/Day%2027/) | [Fancy Dropdown like stripe](./each%20day%20build%20day!/Day%2027/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2027/README.md/) |
47-
| [Day 28](./each%20day%20build%20day!/Day%2028/) | [Calculator](./each%20day%20build%20day!/Day%2028/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2028/README.md/) |
47+
| [Day 28](./each%20day%20build%20day!/Day%2028/) | [Calculator](./each%20day%20build%20day!/Day%2028/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2028/README.md/) |
48+
| [Day 29](./each%20day%20build%20day!/Day%2029/) | [Wiki search challenge](./each%20day%20build%20day!/Day%2029/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2029/README.md/) |
49+
| [Day 30](./each%20day%20build%20day!/Day%2030/) | [Click and Scroll effect](./each%20day%20build%20day!/Day%2030/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2030/README.md/) |
50+
| [Day 31](./each%20day%20build%20day!/Day%2031/) | [Playback controller](./each%20day%20build%20day!/Day%2031/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2031/README.md/) |
Binary file not shown.

‎each day build day!/Day 31/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Custom PlaybackRate controller
2+
3+
Simple slider for quickly changing playback speed using vanillaJS
4+
5+
# Challenges
6+
- DOM objects
7+
- Video element

‎each day build day!/Day 31/app.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const video = document.querySelector('.player')
2+
const speedBar = document.querySelector('.speed-bar')
3+
const speed = document.querySelector('.speed')
4+
5+
6+
function handleTheBar(e){
7+
e.preventDefault();
8+
9+
//find the offset height
10+
const verticalOffsetHeight = e.pageY - this.offsetTop //(this === speed)
11+
12+
const ratio = verticalOffsetHeight/this.clientHeight
13+
14+
const height = Math.round(ratio * 100) +'%';
15+
const min = 0.5
16+
const max = 4.5
17+
18+
const playBackSpeedRange = ratio * (max - min) + min;
19+
console.log(playBackSpeedRange);
20+
//apply this to the speedbar
21+
speedBar.style.height = height;
22+
speedBar.textContent = playBackSpeedRange.toFixed(2) + 'x';
23+
//then finally apply the playback to the video
24+
video.playbackRate = playBackSpeedRange
25+
}
26+
27+
28+
29+
speed.addEventListener('mousemove', handleTheBar)
30+
speed.addEventListener('touchmove', handleTheBar)

‎each day build day!/Day 31/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Playback controller</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div class="wrapper">
12+
13+
<video class="player" width="765" height="430" src="Funny Birds Animated Short Film.mp4" loop controls></video>
14+
<div class="speed">
15+
<div class="speed-bar">×ばつ</div>
16+
</div>
17+
</div>
18+
19+
<script src="app.js"></script>
20+
</body>
21+
</html>

‎each day build day!/Day 31/style.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
12+
.wrapper {
13+
width: 850px;
14+
display: flex;
15+
16+
}
17+
18+
h1{
19+
text-align: center;
20+
}
21+
video {
22+
box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
23+
}
24+
25+
.speed {
26+
background: #efefef;
27+
flex: 1;
28+
display: flex;
29+
align-items: flex-start;
30+
margin: 10px;
31+
border-radius: 50px;
32+
box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
33+
overflow: hidden;
34+
}
35+
36+
.speed-bar {
37+
width: 100%;
38+
background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
39+
text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
padding: 2px;
44+
color: white;
45+
height: 16.3%;
46+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /