노마드 구글3

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

  clockTitle = clockContainer.querySelector("h1");

 

function getTime() {

  const date = new Date();

  const minutes = date.getMinutes();

  const hours = date.getHours();

  const seconds = date.getSeconds();

  clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${

    minutes < 10 ? `0${minutes}` : minutes

  }:${seconds < 10 ? `0${seconds}` : seconds}`; // 미니 조건문을 세컨즈에 써줌 초가 10보다 작으면 0을 앞에 붙임 : 는 else역할을 함

}

function init() {

  getTime();

  setInterval(getTime, 1000);  //셋 인터벌 이젠 깨달 았겠지?~?

}

init();

 

쿼리셀렉터는 찾은 것 중에 맨앞에 것을 가져온다

---

로칼스토리지

자바스크립트는 local storage에 있는 모든 데이터를 string으로 저장하려면 object가 string이 되도록 만들어야한다

localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); 로컬스토리지 셋 아이템에 제이슨 스트링파이 + ()를 해줘야한다

 

JSON.stringify()는 자바스크립트 object를 string으로 바꿔준다!

 

JSON은 데이터를 전달할 때 자바스크립트가 다룰 수 있도록 object형태로 변환해주는 도구?라고 보면 된다

 

parsedToDos.forEach(function())// forEach는 기본적으로 함수를 실행하는데 array에 담겨져 있는 것들 각각에

한번씩 함수를 실행시켜준다 괄호안에 바로 function을 만들 수 있다

 

구성요소를 알고 싶다면 console.dir()을 누르고 콘솔창에서 화살표를 눌러서 요소를 확인한 후 코딩하자!\

 

filter와 forEach list에 있는 모든 item을 위한 함수를 실행시키기 위해 필요함

---

백그라운드 랜덤 만들기

 

Math.floor(Math.random()*5) >> 숫자 랜덤하게 만드는 명령어

 

매쓰 플로우는 소숫점 뒷자리를 버려주고 Math.random()*5는 5까지의 숫자들 중 무작위 랜덤 명령

 

const body = document.querySelector("body");

 

const IMG_NUMBER = 3;

 

function handleImgLoad() {

  console.log("finish loading");

}

 

function paintImage(imgNumber) {

  const image = new Image();

  image.src = `images/${imgNumber + 1}.jpg`;

  body.appendChild(image);

  image.addEventListener("loadend", handleImgLoad);

}  //API를 이용해서 이미지를 로드 하는 것이면 이 작업을 해야함

z-index: -1; >> -1이면 개체들 사이에서 1만큼 뒤로 보내는 것 

---

API 활용하기

API 사이트에서 코드 복사

const API_KEY = "4fc36c77eefe627c0493d9f631b8e16a"; 이런식으로 웨더 JS에 작성

 

자바스크립트는 웹사이트로 요청을 보내고 응답을 받아서 데이터를 얻을 수 있다

 

const toDoform = document.querySelector(".js-toDoForm"),

  toDoInput = toDoform.querySelector("input"),

  toDoList = document.querySelector(".js-toDoList");

 

const TODOS_LS = "toDoS";

 

function filterFn(toDo) {

  return toDo.id === 1;

} // true인 것들인 toDos만 리턴해준다

// 클릭한 id가 1인 경우가 아닌 toDos를 하고 싶을때를 의미한다

//li에 없는 id인 toDos를 체크하고 싶다 왜냐면 우리가 지우고싶은 것이기 때문

 

let toDos = [];

 

function deleteToDo(event) {

  const btn = event.target;

  const li = btn.parentNode;

  toDoList.removeChild(li);

  const cleanToDos = toDos.filter(function (toDo) {

    return toDo.id !== parseInt(li.id); // strung을 숫자로 바꾼다

    //모든 li엔 id가 있다 ex)1,2,3,4

  }); //li의 id는 string이다

  toDos = cleanToDos;

  saveToDos();

}

 

function saveToDos() {

  localStorage.setItem(TODOS_LS, JSON.stringify(toDos));

}

 

function paintTodo(text) {

  const delBtn = document.createElement("button");

  const li = document.createElement("li"); //자바스크립트에서 ul을 생성

 

  const newId = toDos.length + 1;

  delBtn.innerText = "X";

  delBtn.addEventListener("click", deleteToDo);

  const span = document.createElement("span");

  span.innerText = text;

  li.appendChild(span);

  li.appendChild(delBtn);

  li.id = newId;

  toDoList.appendChild(li);

  const toDoObj = {

    text: text,

    id: newId,

  };

  toDos.push(toDoObj);

  saveToDos();

}

 

function handleSubmit(event) {

  event.preventDefault();

  const currentValue = toDoInput.value;

  paintTodo(currentValue);

  toDoInput.value = "";

}

 

function loadToDos() {

  const loadedToDos = localStorage.getItem(TODOS_LS);

  if (loadedToDos !== null) {

    const parsedToDos = JSON.parse(loadedToDos);

    parsedToDos.forEach(function (toDo) {

      console.log(toDo.text);

      paintTodo(toDo.text);

    }); //toDos를 가져오고 가져온 것은 object로 변환

  }

}

 

function init() {

  loadToDos();

  toDoform.addEventListener("submit", handleSubmit);

}

 

init();