노마드 코더의 초보자를 위한 바닐라 자바스크립트

https://www.youtube.com/watch?v=lXxlGCRBOQU&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK&index=24

Key agenda!

• Creating our own momentum app like this website (https://momentumdash.com/)

so.. What function do we need on this website

• Clock
• To-do list
• Image Background
• Weather
• Location

1. Clock

• When creating classname which will be used for JS, he prefers adding js- in order to distinguish with that of other class names.

  <div class="js-clock"></div>

- Set variables as **const** ALWAYS(he never use *var*) 

### 1.1 Set classname for applying function 
```html 
<div class="js-clock">
  <h1 class="js-title">00:00</h1>

1.2 Set const name with querySelector

const clockContainer = document.querySelector(".js-clock"),
     clockTitle =  clockContainer.querySelector(".js-title");

1.3 Add getTime function so that it shows time on screen

function getTime () {
  const date= new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds= date.getSeconds();
  clockTitle.innerText = `${hours}:${minutes}:${seconds}`
}

function init(){
  gettime();}

init(); 

1.4 Make a live updating clock

• setInterval(name,second)

function init(){
  gettime();
setInterval(getTime,1000); 
}

1.5 Add zero when it's single digit time

function getTime () {
  const date= new Date();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const seconds= date.getSeconds();
  clockTitle.innerText=`${hour<10 ? `0${hour}`: hour}:${minute<10 ? `0${minute}` : minute}:${seconds<10 ? `0${seconds}` : seconds}`
  
}

notes from April 25th 2020, will check more of the basics and come back to complete the following.(I PROMISE...)

2. Making a to-do list

3. Image Background

4. Weather

5. Location