Skip to content

Commit 29a6066

Browse files
benfodenbenfoden
committed
final projects for js30
1 parent 8966f8d commit 29a6066

File tree

6 files changed

+187
-16
lines changed

6 files changed

+187
-16
lines changed

‎27 - Click and Drag/index-START.html

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Click and Drag</title>
67
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
911
<div class="items">
1012
<div class="item item1">01</div>
@@ -34,8 +36,45 @@
3436
<div class="item item25">25</div>
3537
</div>
3638

37-
<script>
38-
</script>
3939

40-
</body>
41-
</html>
40+
<script>
41+
const slider = document.querySelector('.items');
42+
let isDown = false;
43+
let startX;
44+
let scrollLeft;
45+
46+
slider.addEventListener('mousedown', (e) => {
47+
isDown = true;
48+
slider.classList.add('active');
49+
startX = e.pageX - slider.offsetLeft;
50+
scrollLeft = slider.scrollLeft;
51+
// console.log(startX);
52+
});
53+
54+
slider.addEventListener('mouseleave', () => {
55+
isDown = false;
56+
slider.classList.remove('active');
57+
});
58+
59+
slider.addEventListener('mouseup', () => {
60+
isDown = false;
61+
slider.classList.remove('active');
62+
});
63+
64+
slider.addEventListener('mousemove', (e) => {
65+
if (!isDown) return;
66+
e.preventDefault(); // stop any text selecting, etc.
67+
const x = e.pageX - slider.offsetLeft;
68+
const walk = x - startX; // get the difference of start and current
69+
slider.scrollLeft = (scrollLeft - walk) * 2; // scroll based on walk difference
70+
71+
console.log(walk);
72+
// console.log(x, startX);
73+
// console.count(isDown);
74+
// console.log('Do work son!');
75+
});
76+
</script>
77+
78+
</body>
79+
80+
</html>

‎27 - Click and Drag/style.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ body {
3838
}
3939

4040
.items.active {
41-
background: rgba(255,255,255,0.3);
4241
cursor: grabbing;
4342
cursor: -webkit-grabbing;
4443
transform: scale(1);

‎28 - Video Speed Controller/index-START.html

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,40 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Video Speed Scrubber</title>
67
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
911

1012
<div class="wrapper">
11-
<video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
13+
<video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop
14+
controls></video>
1215
<div class="speed">
1316
<div class="speed-bar">1×</div>
1417
</div>
1518
</div>
1619

17-
<script>
18-
</script>
20+
<script>
21+
const speed = document.querySelector('.speed');
22+
const bar = speed.querySelector('.speed-bar');
23+
const video = document.querySelector('.flex');
24+
function handleMove(e) {
25+
const y = e.pageY - this.offsetTop;
26+
const percent = y / this.offsetHeight; // get height of actual
27+
const min = 0.5;
28+
const max = 3;
29+
const height = `${Math.round(percent * 100)}%`;
30+
bar.style.height = height;
31+
const playbackRate = percent * (max - min) + min; // offset height with non-zero min max
32+
bar.textContent = `${playbackRate.toFixed(2)}x`; // set rate to display with two decimal places
33+
video.playbackRate = playbackRate;
34+
}
35+
36+
speed.addEventListener('mousemove', handleMove);
37+
</script>
1938
</body>
20-
</html>
39+
40+
</html>

‎29 - Countdown Timer/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Countdown Timer</title>
67
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
78
<link rel="stylesheet" href="style.css">
89
</head>
10+
911
<body>
1012
<div class="timer">
1113
<div class="timer__controls">
@@ -26,4 +28,5 @@ <h1 class="display__time-left"></h1>
2628

2729
<script src="scripts-START.js"></script>
2830
</body>
29-
</html>
31+
32+
</html>

‎29 - Countdown Timer/scripts-START.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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]'); // attr notation
5+
6+
function timer(secs) {
7+
// clear any existing so it can be restarted
8+
clearInterval(countdown);
9+
// set interval is unreliable due to performance-related auto stop
10+
const now = Date.now();
11+
const then = now + secs * 1000;
12+
displayTimeLeft(secs);
13+
displayEndTime(then);
14+
countdown = setInterval(() => {
15+
const secondsLeft = Math.round((then - Date.now()) / 1000);
16+
// before displaying check for a stop
17+
if (secondsLeft === 0) {
18+
clearInterval(countdown);
19+
}
20+
// display each second
21+
displayTimeLeft(secondsLeft);
22+
}, 1000);
23+
}
24+
25+
function displayTimeLeft(secs) {
26+
const minutes = Math.floor(secs / 60);
27+
const remainderSeconds = secs % 60;
28+
const display = `${minutes}:${
29+
remainderSeconds < 10 ? '0' : ''
30+
}${remainderSeconds}`;
31+
timerDisplay.textContent = display;
32+
console.log({ minutes, remainderSeconds });
33+
}
34+
35+
function displayEndTime(timestamp) {
36+
const end = new Date(timestamp);
37+
const hour = end.getHours();
38+
const adjHour = hour > 12 ? hour - 12 : hour;
39+
40+
const minutes = end.getMinutes();
41+
endTime.textContent = `Be back at ${adjHour}:${
42+
minutes < 10 ? 0 : ''
43+
}${minutes}`;
44+
}
45+
46+
function startTimer() {
47+
const seconds = parseInt(this.dataset.time);
48+
timer(seconds);
49+
}
50+
51+
buttons.forEach((button) => button.addEventListener('click', startTimer));
52+
document.customForm.addEventListener('submit', function (e) {
53+
e.preventDefault();
54+
const mins = this.minutes.value;
55+
console.log(mins);
56+
timer(mins * 60);
57+
this.reset();
58+
});

‎30 - Whack A Mole/index-START.html

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Whack A Mole!</title>
67
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
78
<link rel="stylesheet" href="style.css">
89
</head>
10+
911
<body>
1012

1113
<h1>Whack-a-mole! <span class="score">0</span></h1>
@@ -32,11 +34,61 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
3234
</div>
3335
</div>
3436

35-
<script>
36-
const holes = document.querySelectorAll('.hole');
37-
const scoreBoard = document.querySelector('.score');
38-
const moles = document.querySelectorAll('.mole');
37+
<script>
38+
const holes = document.querySelectorAll('.hole');
39+
const scoreBoard = document.querySelector('.score');
40+
const moles = document.querySelectorAll('.mole');
41+
let lastHole;
42+
let timeUp = false;
43+
let score = 0;
44+
45+
// give us a random amount of time inside a range
46+
function randTime(min, max) {
47+
return Math.round(Math.random() * (max - min) + min);
48+
}
49+
50+
function randHole(holes) {
51+
const idx = Math.floor(Math.random() * holes.length);
52+
const hole = holes[idx];
53+
if (hole === lastHole) {
54+
return randHole(holes);
55+
}
56+
57+
lastHole = hole;
58+
return hole;
59+
}
3960

40-
</script>
61+
function peep() {
62+
const time = randTime(200, 1000);
63+
const hole = randHole(holes);
64+
console.log(time, hole);
65+
hole.classList.add('up');
66+
setTimeout(() => {
67+
hole.classList.remove('up');
68+
if (!timeUp) {
69+
peep();
70+
}
71+
}, time);
72+
}
73+
74+
function startGame() {
75+
scoreBoard.textContent = 0;
76+
timeUp = false;
77+
score = 0;
78+
peep();
79+
setTimeout(() => (timeUp = true), 10000);
80+
}
81+
82+
function bonk(e) {
83+
if (!e.isTrusted) return; // no untrusted clicks!
84+
score += 1;
85+
this.classList.remove('up');
86+
scoreBoard.textContent = score;
87+
console.log(e);
88+
}
89+
90+
moles.forEach((mole) => mole.addEventListener('click', bonk));
91+
</script>
4192
</body>
42-
</html>
93+
94+
</html>

0 commit comments

Comments
 (0)