VanillaJS 로 크롬 앱 제작하기

 

 

 넣은 기능

 1) 시계 기능

 2) 사용자 저장 기능

 3) 투두 리스트 기능

 4) 배경화면 랜덤으로 출력

 5) 날씨 API 추가함.

 

=> js 파일만 코드를 첨부하도록 하겠다.

 

1. Clock.js

const clockContainer=document.querySelector(".js-clock")
const 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}`;}
    clockTitle.style.fontSize="3rem";
    //setInterval=> 어떤 함수를 몇ms마다 실행할지를 결정한다.
    //`${}`는 각 변수를 문자열로 바꿔주는 역할을 함.}
function init(){
           setInterval(getTime,1000);
  }

init();

//getDate,getHours,getMinutes등으로 시간,날짜,분단위까지 표시 가능하다.
//시간이 흐를때마다 계속 htm1을 조작할 수 있는 게 상당히 흥미로웠다.

 

 

2. 환영 문구

: local storage에 저장이 되어있지 않으면, 이름을 입력받는 input 창을, 저장되어있으면 환영문구를 내보낸다.

 

const form=document.querySelector(".js-form");
const input=form.querySelector("input");
const greeting=document.querySelector(".js-greetings");
//local storage(브라우저)에 원하는 내용을 저장해놓을 수 있다.

const USER_LS="currentUser",
     SHOWING_ON="showing";
     //showing css를 실행시킨다.



function saveName(text){
    localStorage.setItem(USER_LS,text);
}

function handleSubmit(event){
    event.preventDefault();
    const currentValue=input.value;
    paintGreeting(currentValue);
     saveName(currentValue);
}


function askForName(){
   form.classList.add(SHOWING_ON);
   form.addEventListener("submit",handleSubmit);
}

function paintGreeting(text){
    form.classList.remove(SHOWING_ON);
    greeting.classList.add(SHOWING_ON);
    greeting.innerText=`Hello ${text}`;

}


function loadName(){
     const currentUser=localStorage.getItem(USER_LS);

    if(currentUser==null){
        askForName();
    }else{
      paintGreeting(currentUser);
    }
}


function init(){
    loadName();
}

init();

 

 

3. ToDoList

 : ul에 javascript를 통해 자식 노드를 추가한다. 또, 이를 local storage에 저장하고 삭제가 가능하도록 만든다.

 

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


const TODOS_LS='toDos';
//localstorage index name


let toDos=[];


function deleteToDo(event){
    const btn=event.target;
    const li= btn.parentNode;
    toDoList.removeChild(li);
    //filter가 foreach처럼 하나씩에 다 함수를 작동시킬것이다.
    // filter는 새로운 array를 만든다.
    //true를 return하는 아이템들 만 포함하는 array를 만든다.
    const cleanToDos=toDos.filter(function(toDo){
        return toDo.id!==parseInt(li.id);
    });
    toDos=cleanToDos;
    saveToDos();
}

function saveToDos(){
    localStorage.setItem(TODOS_LS,JSON.stringify(toDos));
    //localstorage는 모든 객체를 string으로 저장하려고 한다.
    //따라서 string으로 처리를 해줘야 한다.
}

function paintToDo(text){
    //element를 생성할 수도 있다.
     const li=document.createElement("li");
     const delBtn=document.createElement("button");
     delBtn.innerHTML="❌";
     delBtn.addEventListener("click",deleteToDo);
     const span=document.createElement("span");
     const newId=toDos.length+1;
     span.innerText=`${text}  `;
     li.appendChild(span);
     li.appendChild(delBtn);
     //나중에 어떤 항목을 지울지 알아야 하므로 li에도 아이디부여해준다.
     li.id=newId;
     toDoList.appendChild(li);
     const toDoObj={
         text:text,
         id:newId
     }
     //객체를 array에 추가해준다.
     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);
        //parse는 string 형태로 저장된 javascript 객체를 다시 객체로 바꿔준다.
        console.log(parsedToDos);
        parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        });
    }
}


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

init();

 

4. Weather.js

: 현재 위치(위도, 경도)를 보내면 현재 위치의 날씨를 알려주는 API를 사용한다.

 

const weather= document.querySelector(".js-weather");
const API_KEY="secreeettttt";
const COORDS="coords";

function getWeather(lat, lng){
    fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
        ).then(function(response){
            return response.json();
        }).then(function(json){
            const temperature=json.main.temp;
            const place=json.name;
            weather.innerText=`${temperature}'c at ${place}`;
        })
        
}

function saveCoords(coordsObj){

    localStorage.setItem(COORDS,JSON.stringify(coordsObj));
}

function handleGeoSucess(position){
   const latitude=position.coords.latitude;
   const longitude=position.coords.longitude;
   const coordsObj = {
       latitude,
       longitude
   };

   saveCoords(coordsObj);
   getWeather(latitude,longitude);
}

function handleGeoError(position){
    console.log("can't load geo location");
}

function askForCoords(){
    navigator.geolocation.getCurrentPosition(handleGeoSucess,handleGeoError);
}


function loadCoords(){
   const loadedCoords=localStorage.getItem(COORDS);
   if(loadedCoords===null){
       askForCoords();
   }
   else{
       const parseCoords=JSON.parse(loadedCoords);
       getWeather(parseCoords.latitude,parseCoords.longitude);
   }
}

function init(){
   loadCoords();
}

init();

k

 

5. background.js

 : 배경화면을 로컬에 저장해두고 랜덤으로 번호를 지정해 해당 번호의 배경화면을 출력한다.

 

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

const IMG_NUMBER=4;



function paintImage(imgNumber){
     const image=new Image();
     image.src=`${imgNumber+1}.jpg`; 
     image.classList.add("bgImage");
     body.appendChild(image); 
}


function genRandom(){
  const number=Math.floor(Math.random()*4);
  return number;
}

function init(){ 
    const randomNumber=genRandom();
    paintImage(randomNumber);
}

init();