Nomad Coders 강의 - VanillaJS로 크롬 momentum 만들기 1

안녕하세요.!! Lotts 입니다. 😉

 

 요새 니콜라스 쌤이 하시는 Nomad Coders 인강을 듣고 있어요.

 

자막도 한글도 잘 되어있고 무료 인강도 많아서 가볍게 보고

따라 하기에 좋은 거 같아요. 👍👍

 

이번에 소개할 내용은 

 

👏 VanillaJS로 크롬 momentum 만들기입니다. 👏

 

무료 인강 이구요

자세한 내용은 아래 링크를 클릭하시면 됩니다.

 

https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners-kr

바닐라 JS로 크롬 앱 만들기

 

이번에 배운 내용으로 정리할 겸 포스팅을 해보도록 할게요 🙌

 

 

우선 momentum 은

 크롬 확장 프로그램 모멘텀(momentum)이며

현재 시간과 그날의 할 일을 작성할 수 있는 TODO

그리고 아름다운 풍경 사진을 랜덤 하게 보여주는 프로그램입니다 👐

 

아래 링크를 선택하면 보실 수 있어요

https://momentumdash.com/

Momentum Dashboard

 

 

중요하게 배울만한 기능은 크게

 

To Do List 를 저장하기 위한 LocalStorage

시계 표시

현재 지역 날씨

랜덤 하게 배경 이미지 보여주기

 

입니다.

 

우선, 제가 만든 momentum를 보여드리겠습니다. 😆

 

 

 

 

이번 포스팅에서는 시계와 to do List를 만드는 기능을 소개 하도록 할게요 👏👏

 

첫 번째, 시계 만들기 🕐

 

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

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}`
}

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

init();

어려운 점은 없어요 😄

다만, 시간을 표시할 때 1~9는 앞에 0을 붙여서 보기 좋게 만들었습니다.

시간이 계속 변경해야 하기 때문에 

setInterval를 이용하여 변경해 줍니다

 

 

두 번째, to do List 만들기 📋

 

const toDoForm = document.querySelector(".js-toDoForm"),
  toDoInput = toDoForm.querySelector("input"),
  toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = "toDos";
let toDos = [];

function init() {
  loadToDos();
  toDoForm.addEventListener("submit", handleSubmit);
}

init();

기존에 load 된 to do List가 있으면 불러옵니다

todo를 작성하여 ➥Enter를 하면 작동되도록

EventListener를 등록합니다

 

function handleSubmit(event) {
  event.preventDefault();
  const currentValue = toDoInput.value;
  paintToDo(currentValue);
  toDoInput.value = "";
}

➥Enter를 하면 해당 Value값을

paintToDo()를 이용하여 저장합니다

❖ ❛ event.pereventDefault 는 해당 태그의 고유 동작을 중단시키는 역할을 합니다 ❜ 

 

function loadToDos() {
  const loadToDos = localStorage.getItem(TODOS_LS);
  if (loadToDos !== null) {
    const parsedToDos = JSON.parse(loadToDos);
    parsedToDos.forEach(function (todo) {
      paintToDo(todo.text);
    });
  }
}

todo List를 불러옵니다

localStorage를 사용합니다

 

❖  ❛ localStorage는 chrome에서 F12를 이용하여

개발자 도구를 열어 - Application - Storage - Local Storage를 확인하시면 됩니다 ❜

 

처음 todo List를 불어올 때 저장된 정보가 있으면

paintToDo() 함수를 이용하여 todo List를 생성합니다

 

가장 중요한 ❗❗

to do List를 만드는 함수 paintToDo() 입니다 👏

function paintToDo(text) {
  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  const checkBox = document.createElement("input");
  
  delBtn.setAttribute('class','btn btn-link');
  delBtn.innerText = "❌";
  delBtn.addEventListener("click",deleteToDo);
  
  checkBox.setAttribute('class','form-check-input');
  checkBox.setAttribute('type','checkbox');
  checkBox.addEventListener("change",checkOnOff);
  
  const span = document.createElement("span");
  const newId = toDos.length + 1;
  span.innerText = text;
  li.appendChild(checkBox);
  li.appendChild(span);
  li.appendChild(delBtn);
  li.id = newId;
  li.setAttribute('class','list-group-item');
  toDoList.appendChild(li);

  const toDoObj = {
    text: text,
    id: newId
  };
  toDos.push(toDoObj);
  saveToDos();
}

to do List의 기본 구성은

❌삭제 버튼

✅체크 박스

📋 li - 목록

으로 구성되어 있습니다

 

코드는 어렵지 않고요 😄  

class는 bootstrap를 이용하였습니다

 

 

function saveToDos(){
  localStorage.setItem(TODOS_LS,JSON.stringify(toDos));
}

saveToDos() 함수는 localStorage에 저장하는 기능입니다

❖ ❛ JSON.stringify 는 object를 string로 변경해 줍니다 ❜

 

function deleteToDo(event) {
  const btn = event.target;
  const li = btn.parentNode;
  const removeId = parseInt(li.id);

  //html 삭제
  toDoList.removeChild(li);

  //localStorage 삭제
  //filter
  const cleanToDos = toDos.filter(function(toDo){
    return toDo.id !== removeId;
  });
  toDos = cleanToDos;
  saveToDos();
}

삭제 버튼 ❌을 클릭 시

해당 to do List를 삭제하고 localStorage에서도 삭제합니다

❖ ❛ filter 함수를 사용하여 조건에 해당하는 모든 요소를 새로 생성합니다 ❜

새로 생성한 to do List를 다시 localStorage에 저장합니다

 

 

function checkOnOff(event) {
  const checkBox = event.target;
  const li = checkBox.parentNode;
  if(checkBox.checked){
    li.style = "text-decoration:line-through"
  }
  else {
    li.style = ""
  }
}

체크박스 클릭 시

해당 style에 이런 식으로 취소선을 만드어주는

기능입니다.

❛ 해당 기능은 강의에는 없구요. 제가 그냥 만들어 봤습니다. 😁 ❜

 

to do list 전체 소스입니다.

const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");

const TODOS_LS = "toDos";
let toDos = [];

function saveToDos(){
  localStorage.setItem(TODOS_LS,JSON.stringify(toDos));
}

function paintToDo(text) {
  const li = document.createElement("li");
  const delBtn = document.createElement("button");
  const checkBox = document.createElement("input");
  delBtn.setAttribute('class','btn btn-link');
  delBtn.innerText = "❌";
  delBtn.addEventListener("click",deleteToDo);
  checkBox.setAttribute('class','form-check-input');
  checkBox.setAttribute('type','checkbox');
  checkBox.addEventListener("change",checkOnOff);
  const span = document.createElement("span");
  const newId = toDos.length + 1;
  span.innerText = text;
  li.appendChild(checkBox);
  li.appendChild(span);
  li.appendChild(delBtn);
  li.id = newId;
  li.setAttribute('class','list-group-item');
  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 = "";
}

// 새로고침 시 todo 정보가 없어지는것을 방지하기 위해 작성
function loadToDos() {
  const loadToDos = localStorage.getItem(TODOS_LS);
  if (loadToDos !== null) {
    const parsedToDos = JSON.parse(loadToDos);
    parsedToDos.forEach(function (todo) {
      paintToDo(todo.text);
    });
  }
}

function deleteToDo(event) {
  const btn = event.target;
  const li = btn.parentNode;
  const removeId = parseInt(li.id);

  //html 삭제
  toDoList.removeChild(li);

  //localStorage 삭제
  //filter
  const cleanToDos = toDos.filter(function(toDo){
    return toDo.id !== removeId;
  });
  toDos = cleanToDos;
  saveToDos();
}

function checkOnOff(event) {
  const checkBox = event.target;
  const li = checkBox.parentNode;
  if(checkBox.checked){
    li.style = "text-decoration:line-through"
  }
  else {
    li.style = ""
  }
}

function init() {
  loadToDos();
  toDoForm.addEventListener("submit", handleSubmit);
}

init();

 

자 ❗❗  이렇게 to do List까지 해봤구요

 

다음 마지막 ❗❗

 

세 번째, 날씨 정보 가져오기

네 번째, 랜덤 하게 배경 이미지 가져오기

는....

작성하다 보니 내용이 너무 길어지는 거 같아서..

 

다음 포스팅에서 올리도록 하겠습니다 😅

 

👏👏👏