Finalizando o dia 29

Author: herminiotorres

29-CountdownTimer/finish.html

@@ -21,6 +21,7 @@
  <div class="display">
  <h1 class="display__time-left"></h1>
  <p class="display__end-time"></p>
+ <audio class="display__alarm-clock" src="sounds/alarm-clock.wav" hidden></audio>
  </div>
  </div>
 

29-CountdownTimer/finish.js

@@ -1 +1,77 @@
-// javascript code
+// javascript code
+let countdown;
+const timerDisplay = document.querySelector('.display__time-left');
+const endTime = document.querySelector('.display__end-time');
+const buttons = Array.from(document.querySelectorAll('[data-time]'));
+const alarmClock = document.querySelector('.display__alarm-clock');
+
+function startTimer() {
+ // stoped the sound
+ alarmClock.pause();
+ alarmClock.currentTime = 0;
+
+ const seconds = parseInt(this.dataset.time);
+ timer(seconds);
+}
+
+function timer(seconds) {
+ // clear any existing timers
+ clearInterval(countdown);
+
+ const now = Date.now();
+ const then = (now + (seconds * 1000));
+ displayTimeLeft(seconds);
+ displayEndTime(then);
+
+ countdown = setInterval(() => {
+ const secondsLeft = Math.round((then - Date.now()) / 1000);
+
+ // check if we should stop it!
+ if(secondsLeft < 0) {
+ // played the sound
+ alarmClock.currentTime = 0;
+ alarmClock.play();
+
+ clearInterval(countdown);
+ return;
+ }
+
+ // display it
+ displayTimeLeft(secondsLeft);
+ }, 1000);
+}
+
+function displayTimeLeft(seconds) {
+ const minutes = Math.floor(seconds / 60);
+ const remainderSeconds = (seconds % 60);
+
+ const display = `${formatTimer(minutes)}:${formatTimer(remainderSeconds)}`;
+
+ timerDisplay.textContent = display;
+ document.title = display;
+}
+
+function displayEndTime(timestamp) {
+ const end = new Date(timestamp);
+ const hour = end.getHours();
+ const minutes = end.getMinutes();
+ endTime.textContent = `Be Back At ${formatTimer(hour)}:${formatTimer(minutes)}`;
+}
+
+function formatTimer(timer) {
+ return `${timer < 10 ? '0' : ''}${timer}`;
+}
+
+function getCustomForm(event) {
+ // stoped the sound
+ alarmClock.pause();
+ alarmClock.currentTime = 0;
+
+ event.preventDefault();
+ const minutes = this.minutes.value;
+ this.reset();
+ timer(minutes * 60);
+}
+
+buttons.map(button => button.addEventListener('click', startTimer));
+document.customForm.addEventListener('submit', getCustomForm);

29-CountdownTimer/sounds/alarm-clock.wav

@@ -17,6 +17,9 @@ $ npm install
 $ npm start
 ```
 
+## List of Resources
+* layout.land
+ * [layout.land - youtube](https://www.layout.land/)
 
 ## List of Exercises