Add Day - 10,11,12 · Susmita-Dey/JavaScript30@4adca4b · GitHub
Skip to content

Commit 4adca4b

Browse files
Susmita-DeySusmita-Dey
committed
Add Day - 10,11,12
1 parent 4544871 commit 4adca4b

14 files changed

Lines changed: 638 additions & 0 deletions

File tree

‎Day 10 - Hold Shift Checkboxes/index.html‎

Lines changed: 58 additions & 0 deletions

‎Day 10 - Hold Shift Checkboxes/index.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
2+
// console.log(checkboxes);
3+
4+
let lastChecked;
5+
6+
function handleCheck(e) {
7+
// console.log(e);
8+
// Check if they had the shift key down and check that they are checking it
9+
let inBetween = false;
10+
if (e.shiftKey && this.checked) {
11+
// go ahaed and do what we please
12+
// loop over every single checkbox
13+
checkboxes.forEach((checkbox) => {
14+
console.log(checkbox);
15+
if (checkbox === this || checkbox === lastChecked) {
16+
inBetween = !inBetween;
17+
console.log("Starting to check them inbetween!");
18+
}
19+
20+
if (inBetween) {
21+
checkbox.checked = true;
22+
}
23+
});
24+
}
25+
lastChecked = this;
26+
}
27+
28+
checkboxes.forEach((box) => box.addEventListener("click", handleCheck));

‎Day 10 - Hold Shift Checkboxes/style.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
html {
2+
font-family: sans-serif;
3+
background: #ffc600;
4+
}
5+
6+
.inbox {
7+
max-width: 400px;
8+
margin: 50px auto;
9+
background: white;
10+
border-radius: 5px;
11+
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
12+
}
13+
14+
.item {
15+
display: flex;
16+
align-items: center;
17+
border-bottom: 1px solid #f1f1f1;
18+
}
19+
20+
.item:last-child {
21+
border-bottom: 0;
22+
}
23+
24+
input:checked + p {
25+
background: #f9f9f9;
26+
text-decoration: line-through;
27+
}
28+
29+
input[type="checkbox"] {
30+
margin: 20px;
31+
}
32+
33+
p {
34+
margin: 0;
35+
padding: 20px;
36+
transition: background 0.2s;
37+
flex: 1;
38+
font-family: "helvetica neue";
39+
font-size: 20px;
40+
font-weight: 200;
41+
border-left: 1px solid #d1e2ff;
42+
}

‎Day 11 - Custom Video Player/652333414.mp4‎

43.5 MB
Binary file not shown.

‎Day 11 - Custom Video Player/Pexels Videos 1526909.mp4‎

6.48 MB
Binary file not shown.

‎Day 11 - Custom Video Player/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Custom Video Player</title>
8+
<link rel="stylesheet" href="style.css" type="text/css" />
9+
</head>
10+
<body>
11+
<div class="player">
12+
<video class="player_video viewer">
13+
<source src="652333414.mp4" />
14+
</video>
15+
16+
<div class="player_controls">
17+
<div class="progress">
18+
<div class="progress_filled"></div>
19+
</div>
20+
<button class="player_button toggle" title="Toggle Play">►</button>
21+
<input
22+
type="range"
23+
name="volume"
24+
class="player_slider"
25+
min="0"
26+
max="1"
27+
step="0.05"
28+
value="1"
29+
/>
30+
<input
31+
type="range"
32+
name="playbackRate"
33+
class="player_slider"
34+
min="0.5"
35+
max="2"
36+
step="0.1"
37+
value="1"
38+
/>
39+
<button data-skip="-10" class="player_button">« 10s</button>
40+
<button data-skip="25" class="player_button">25s »</button>
41+
</div>
42+
</div>
43+
<script src="index.js"></script>
44+
</body>
45+
</html>

‎Day 11 - Custom Video Player/index.js‎

Lines changed: 59 additions & 0 deletions

0 commit comments

Comments
 (0)