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 2062043

Browse files
Merge pull request #1 from Susmita-Dey/master
Add Day - 10,11,12
2 parents 4544871 + 4adca4b commit 2062043

File tree

14 files changed

+638
-0
lines changed

14 files changed

+638
-0
lines changed
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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>Hold Shift to Check Multiple Checkboxes</title>
8+
<link rel="stylesheet" href="style.css" type="text/css" />
9+
</head>
10+
<body>
11+
<!--
12+
The following is a common layout you would see in an email client.
13+
14+
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
15+
16+
-->
17+
<div class="inbox">
18+
<div class="item">
19+
<input type="checkbox" />
20+
<p>This is an inbox layout.</p>
21+
</div>
22+
<div class="item">
23+
<input type="checkbox" />
24+
<p>Check one item</p>
25+
</div>
26+
<div class="item">
27+
<input type="checkbox" />
28+
<p>Hold down your Shift key</p>
29+
</div>
30+
<div class="item">
31+
<input type="checkbox" />
32+
<p>Check a lower item</p>
33+
</div>
34+
<div class="item">
35+
<input type="checkbox" />
36+
<p>Everything in between should also be set to checked</p>
37+
</div>
38+
<div class="item">
39+
<input type="checkbox" />
40+
<p>Try to do it without any libraries</p>
41+
</div>
42+
<div class="item">
43+
<input type="checkbox" />
44+
<p>Just regular JavaScript</p>
45+
</div>
46+
<div class="item">
47+
<input type="checkbox" />
48+
<p>Good Luck!</p>
49+
</div>
50+
<div class="item">
51+
<input type="checkbox" />
52+
<p>Don't forget to tweet your result!</p>
53+
</div>
54+
</div>
55+
56+
<script src="index.js"></script>
57+
</body>
58+
</html>

‎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));
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+
}
43.5 MB
Binary file not shown.
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
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
// Get Our Elements
2+
const player = document.querySelector(".player_controls");
3+
// console.log(player);
4+
const video = document.querySelector(".viewer");
5+
console.log(video);
6+
const progress = document.querySelector(".progress");
7+
const progressBar = document.querySelector(".progress_filled");
8+
const toggle = document.querySelector(".toggle");
9+
const skipButtons = document.querySelectorAll("[data-skip]");
10+
const ranges = document.querySelectorAll(".player_slider");
11+
12+
// Build out functions
13+
function togglePlay() {
14+
const method = video.paused ? "play" : "pause";
15+
video[method]();
16+
}
17+
18+
function updateButton() {
19+
const icon = this.paused ? "►" : "❚ ❚";
20+
console.log(icon);
21+
toggle.textContent = icon;
22+
}
23+
24+
function skip() {
25+
video.currentTime += parseFloat(this.dataset.skip);
26+
}
27+
28+
function handleRangeUpdate() {
29+
video[this.name] = this.value;
30+
}
31+
32+
function handleProgress() {
33+
const percent = (video.currentTime / video.duration) * 100;
34+
progressBar.style.flexBasis = `${percent}%`;
35+
}
36+
37+
function scrub(e) {
38+
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
39+
video.currentTime = scrubTime;
40+
}
41+
42+
// Hook up the event listeners
43+
video.addEventListener("click", togglePlay);
44+
video.addEventListener("play", updateButton);
45+
video.addEventListener("pause", updateButton);
46+
video.addEventListener("timeupdate", handleProgress);
47+
48+
toggle.addEventListener("click", togglePlay);
49+
skipButtons.forEach((button) => button.addEventListener("click", skip));
50+
ranges.forEach((range) => range.addEventListener("change", handleRangeUpdate));
51+
ranges.forEach((range) =>
52+
range.addEventListener("mousemove", handleRangeUpdate)
53+
);
54+
55+
let mousedown = false;
56+
progress.addEventListener("click", scrub);
57+
progress.addEventListener("mousemove", (e) => mousedown && scrub(e));
58+
progress.addEventListener("mousedown", () => (mousedown = true));
59+
progress.addEventListener("mouseup", () => (mousedown = false));

0 commit comments

Comments
(0)

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