diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..53cc9ae411 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -1,10 +1,12 @@ + Codestin Search App +
01
@@ -34,8 +36,45 @@
25
- - - + + + + + \ No newline at end of file diff --git a/27 - Click and Drag/style.css b/27 - Click and Drag/style.css index debd09247a..c4d5900762 100644 --- a/27 - Click and Drag/style.css +++ b/27 - Click and Drag/style.css @@ -38,7 +38,6 @@ body { } .items.active { - background: rgba(255,255,255,0.3); cursor: grabbing; cursor: -webkit-grabbing; transform: scale(1); diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index 8bd536b18b..9db5c0c3f5 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -1,20 +1,40 @@ + Codestin Search App +
- +
1×
- + - + + \ No newline at end of file diff --git a/29 - Countdown Timer/index.html b/29 - Countdown Timer/index.html index d54f447dd9..817e7a88e6 100644 --- a/29 - Countdown Timer/index.html +++ b/29 - Countdown Timer/index.html @@ -1,11 +1,13 @@ + Codestin Search App +
@@ -26,4 +28,5 @@

- + + \ No newline at end of file diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..afdec5f9e2 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,58 @@ +let countdown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); // attr notation + +function timer(secs) { + // clear any existing so it can be restarted + clearInterval(countdown); + // set interval is unreliable due to performance-related auto stop + const now = Date.now(); + const then = now + secs * 1000; + displayTimeLeft(secs); + displayEndTime(then); + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + // before displaying check for a stop + if (secondsLeft === 0) { + clearInterval(countdown); + } + // display each second + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(secs) { + const minutes = Math.floor(secs / 60); + const remainderSeconds = secs % 60; + const display = `${minutes}:${ + remainderSeconds < 10 ? '0' : '' + }${remainderSeconds}`; + timerDisplay.textContent = display; + console.log({ minutes, remainderSeconds }); +} + +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hour = end.getHours(); + const adjHour = hour > 12 ? hour - 12 : hour; + + const minutes = end.getMinutes(); + endTime.textContent = `Be back at ${adjHour}:${ + minutes < 10 ? 0 : '' + }${minutes}`; +} + +function startTimer() { + const seconds = parseInt(this.dataset.time); + timer(seconds); +} + +buttons.forEach((button) => button.addEventListener('click', startTimer)); +document.customForm.addEventListener('submit', function (e) { + e.preventDefault(); + const mins = this.minutes.value; + console.log(mins); + timer(mins * 60); + this.reset(); +}); diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..6a692ad406 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -1,11 +1,13 @@ + Codestin Search App +

Whack-a-mole! 0

@@ -32,11 +34,61 @@

Whack-a-mole! 0

- + function peep() { + const time = randTime(200, 1000); + const hole = randHole(holes); + console.log(time, hole); + hole.classList.add('up'); + setTimeout(() => { + hole.classList.remove('up'); + if (!timeUp) { + peep(); + } + }, time); + } + + function startGame() { + scoreBoard.textContent = 0; + timeUp = false; + score = 0; + peep(); + setTimeout(() => (timeUp = true), 10000); + } + + function bonk(e) { + if (!e.isTrusted) return; // no untrusted clicks! + score += 1; + this.classList.remove('up'); + scoreBoard.textContent = score; + console.log(e); + } + + moles.forEach((mole) => mole.addEventListener('click', bonk)); + - + + \ No newline at end of file