Solution ex.29

Author: yhabib

29 - Countdown Timer/index.html

@@ -24,6 +24,6 @@ <h1 class="display__time-left"></h1>
  </div>
  </div>
 
- <script src="scripts-START.js"></script>
+ <script src="script.js"></script>
 </body>
 </html>

29 - Countdown Timer/readme.md

@@ -0,0 +1,93 @@
+# Countdown Clock
+
+We build in this example a [Pomodoro Clock][1]
+
+## Notes
+
+The main function takes care of most of the logic of this exercise. Some comments about it:
+
+* We don't implement it through decrementing a variable inside a `setInterval`, because 
+we cannot be sure if it's going to work as expected, because sometimes the browser
+will shut it down due performance.
+
+```javascript
+let leftSeconds = 15;
+setInterval(() => leftSeconds--, 1000);
+```
+
+* At the beginning we clean the last `setInterval` defined in order to have always 
+one referece.
+* `setInterval` returns always a value that identifies the timer and allows to clear it
+at some point in the future. 
+* The `Date.now()` returns a value in miliseconds
+
+```javascript
+function timer(seconds) {
+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);
+if(secondsLeft < 0) {
+clearInterval(countDown);
+return;
+}
+displayTimeLeft(secondsLeft);
+}, 1000);
+}
+```
+
+The other two functions implemente have the mission to generate the HTML code 
+to be inserted into the corresponging HTML elements:
+
+```javascript
+function displayTimeLeft(seconds) {
+const minutes = Math.floor(seconds / 60);
+const remainerSeconds = seconds % 60;
+const display = `${minutes}:${remainerSeconds < 10 ? '0' : ''}${remainerSeconds}`;
+
+document.title = display;
+timerDisplay.textContent = display;
+}
+
+function displayEndTime(timestampt) {
+const end = new Date(timestampt);
+const hours = end.getHours();
+const minutes = end.getMinutes();
+
+endTimeDisplay.textContent = `Be back at ${hours}:${minutes < 10 ? '0' : ''}${minutes}`;
+}
+```
+
+**Note:** When getting values from HTML elements either through `data` attributes or 
+`input` values, the return value will be always a string so in this case if we are working with numbers
+we have to cast it to Number:
+
+```javascript
+const dataAttribute = parseInte(this.dataset.time);
+// or
+const dataAttribute = +this.dataset.time;
+```
+
+**Note:** All HTML elements that have a name attribute can be accessed directly from
+the `document` object, without using the `querySelector` method:
+
+```html
+<form name="customForm" id="custom">
+<input type="text" name="minutes" placeholder="Enter Minutes">
+</form>
+```
+
+```javascript
+const minuteValue = document.customForm.minutes.value;
+```
+
+## Events
+* **click**
+* **submit**
+
+[1]:https://en.wikipedia.org/wiki/Pomodoro_Technique

29 - Countdown Timer/script.js

@@ -0,0 +1,60 @@
+let countDown ;
+
+const timerDisplay = document.querySelector('.display__time-left');
+const endTimeDisplay = document.querySelector('.display__end-time');
+const buttons = document.querySelectorAll('[data-time]');
+
+
+
+buttons.forEach(button => button.addEventListener('click', setTimer));
+// works with the 'name' attribute
+document.customForm.addEventListener('submit', setTimerFromForm);
+
+
+function setTimer() {
+timer(+this.dataset.time);
+}
+
+function setTimerFromForm(e) {
+e.preventDefault();
+timer(+this.minutes.value * 60);
+this.reset();
+}
+
+function timer(seconds) {
+// clears any existing times
+clearInterval(countDown);
+
+// setInterval(fn, 1000); Where fn makes seconds-- Could not work as expected, the browser can shut it down for performance
+const now = Date.now();// new to the browser => ms
+const then = now + seconds * 1000;// convert seconds to ms
+displayTimeLeft(seconds);
+displayEndTime(then);
+
+countDown = setInterval(() => {
+const secondsLeft = Math.round((then - Date.now()) / 1000);
+if(secondsLeft < 0) {
+clearInterval(countDown);
+return;
+}
+displayTimeLeft(secondsLeft);
+}, 1000);
+}
+
+
+function displayTimeLeft(seconds) {
+const minutes = Math.floor(seconds / 60);
+const remainerSeconds = seconds % 60;
+const display = `${minutes}:${remainerSeconds < 10 ? '0' : ''}${remainerSeconds}`;
+
+document.title = display;
+timerDisplay.textContent = display;
+}
+
+function displayEndTime(timestampt) {
+const end = new Date(timestampt);
+const hours = end.getHours();
+const minutes = end.getMinutes();
+
+endTimeDisplay.textContent = `Be back at ${hours}:${minutes < 10 ? '0' : ''}${minutes}`;
+}

29 - Countdown Timer/scripts-START.js

@@ -1,82 +1,81 @@
 html {
- box-sizing: border-box;
- font-size: 10px;
- background: #8E24AA;
- background: linear-gradient(45deg,  #42a5f5 0%,#478ed1 50%,#0d47a1 100%);
+box-sizing: border-box;
+font-size: 10px;
+background: #8E24AA;
+background: linear-gradient(45deg, #42a5f5 0%, #478ed1 50%, #0d47a1 100%);
 }
 
 *, *:before, *:after {
- box-sizing: inherit;
+box-sizing: inherit;
 }
 
 body {
- margin:0;
- text-align: center;
- font-family: 'Inconsolata', monospace;
+margin: 0;
+text-align: center;
+font-family: 'Inconsolata', monospace;
 }
 
 .display__time-left {
- font-weight: 100;
- font-size: 20rem;
- margin: 0;
- color:white;
- text-shadow:4px 4px 0 rgba(0,0,0,0.05);
+font-weight: 100;
+font-size: 20rem;
+margin: 0;
+color: white;
+text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
 }
 
 .timer {
- display:flex;
- min-height: 100vh;
- flex-direction:column;
+display: flex;
+min-height: 100vh;
+flex-direction: column;
 }
 
 .timer__controls {
- display: flex;
+display: flex;
 }
 
 .timer__controls > * {
- flex:1;
+flex: 1;
 }
 
 .timer__controls form {
- flex:1;
- display:flex;
+flex: 1;
+display: flex;
 }
 
 .timer__controls input {
- flex:1;
- border:0;
- padding:2rem;
+flex: 1;
+border: 0;
+padding: 2rem;
 }
 
 .timer__button {
- background:none;
- border:0;
- cursor: pointer;
- color:white;
- font-size: 2rem;
- text-transform: uppercase;
- background:rgba(0,0,0,0.1);
- border-bottom:3px solid rgba(0,0,0,0.2);
- border-right:1px solid rgba(0,0,0,0.2);
- padding:1rem;
- font-family: 'Inconsolata', monospace;
+background: none;
+border: 0;
+cursor: pointer;
+color: white;
+font-size: 2rem;
+text-transform: uppercase;
+background: rgba(0, 0, 0, 0.1);
+border-bottom: 3px solid rgba(0, 0, 0, 0.2);
+border-right: 1px solid rgba(0, 0, 0, 0.2);
+padding: 1rem;
+font-family: 'Inconsolata', monospace;
 }
 
-.timer__button:hover,
-.timer__button:focus {
- background:rgba(0,0,0,0.2);
- outline:0;
+.timer__button:hover, .timer__button:focus {
+background: rgba(0, 0, 0, 0.2);
+outline: 0;
 }
 
 .display {
- flex:1;
- display:flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
+flex: 1;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
 }
 
 .display__end-time {
- font-size: 4rem;
- color:white;
-}
+font-size: 4rem;
+color: white;
+}