JavaScrip_Chrome앱 만들기

📝 노마드 코딩의 크롬 앱 만들기 📝

자바스크립트에 대한 이해와 지식이 아직 부족해 따라쓰면서 최대한 이해해보려는 것에 목표를 두고 코드를 짰다. 헷갈리는 부분은 주석을 달면서 한번씩 더 보았다

bg.js

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

const Ing_Number = 3;



function paintImages(imgNumber) {
    const image = new Image();
    image.src = `images/${imgNumber +1 }.jpg`;  //+1:  Math.random()가 0을 줄 수 있어서 필요
    image.classList.add("bgImage");
    body.appendChild(image);
}

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

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

init();

clock.js

const clockContainer = document.querySelector(".js-clock");
const colckTitle = clockContainer.querySelector("h1");
colckTitle.style.fontSize = "150px";
colckTitle.style.margin = "0";
colckTitle.style.padding = "0";


function getTime() {
    const date = new Date();
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    colckTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
        minutes < 10 ? `0${minutes}`: minutes}:${
        seconds < 10 ? `0${seconds}` : seconds}`;
}    // 시간설정시 17:3:4 를 17:03:04로 맞추기 위해 설정한 것


//init 초기화세팅
    function init() {
        getTime();
        setInterval(getTime, 1000)
    }
    init();

greeting.js

const form = document.querySelector(".js-form"),
    input = form.querySelector("input"),
    greeting = document.querySelector(".js-greeting");
//querySelector: 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 '첫 번째' Element를 반환합니다

const userLS = "currentUser",
    showingCN = "showing";

function saveName (text) {
    localStorage.setItem(userLS,text);
} //현재 도메인의 로컬 Storage 객체에 접근한 후, Storage.setItem()을 사용해 항목 하나를 추가합니다.

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

function askForName () {
    form.classList.add(showingCN);
    form.addEventListener("submit", handleSubmit);
} //addEventListener가 특정 이벤트 발생 시 특정 함수를 실행 ,addEventListener("이벤트 종류", '함수이름')

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

function loadName() {
    const currentUser = localStorage.getItem(userLS);
    if(currentUser === null){
        askForName();
    } else {
       paintGreeting(currentUser);
    }
}

function init() {
    loadName ();
}

init();

index.js

const title = document.getElementById("title");
title.innerHTML = "🖐🏻안녕하세요!"; //html에 작성한 타이틀을 이겨먹음
title.style.color = "wheat";     // css에 지정된 정보 이겨먹음
title.style.fontSize ="30px";
document.title = "지금 시간은?"

toDoList.js

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

const TODOS_LS = "toDos";


let toDos = [];  //여러개 이기 때문에 array사용

function deliteToDo (event) {
    /** console.log(event.target.parentNode); 
     -> console.dir : JSON과 같은 구조로 전달 , parentNode**/
    
     const btn = event.target;
     const li = btn.parentNode;
     toDoList.removeChild(li);
     const cleanToDos = toDos.filter(function(toDo) {
        return toDo.id !== parseInt(li.id);
     });
     todos = cleanToDos //todos는 예전 것 cleanToDos는 새로운 것
     saveToDos();
}

function saveToDos () {
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); 
    /** setItem(keyName, keyValue)
        JSON.stringfy : 자바스크립트 obj를 string으로 바꿔줌**/
}

function paintToDo (text) {
    const li = document.createElement("li"); //createElement 문서에 html 요소 추가
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length +1; // <li id="i"></li> 에서 i+1 계속 생성
    delBtn.innerText = "❌" // emoji: command+control+space
    delBtn.addEventListener("click", deliteToDo);
    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(); //반드시 .push()선언 이후에 작성해야함, 먼저 작성하면 toDos 값이 비어있어서 소용없음
}

function handleSubmit(event) {
    event.preventDefault ();
    const currentvalue = toDoInput.value;
    paintToDo(currentvalue);
    toDoInput.value = ""; // "": input 으로부터의 텍스트를 지움, 엔터누르면 섭밋처럼 보임
}

function loadToDos() {
    const loadToDos= localStorage.getItem(TODOS_LS);
    if (loadToDos !== null) {
        // console.log(loadToDos); -> localStorage에 있는 정보
        const parsedToDos = JSON.parse(loadToDos);
        //console.log(parsedToDos); -> object로 전환
        parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        }); //foreach: 배열의 요소들을 반복하여 작업 수행 가능
    } //이경우 else 조건은 의미 없음
}/** toDos를 가져온 뒤, 정보를 자바스크립트 obj로 변환(parse), 
    각각에 대해 paintToDo 라는 이름의 function 실행(todo.text에 대해) **/

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

init();

weather.js

const weather = document.querySelector(".js-weather");


const COORDS = "coords";
const API_KEY = "your API Code here.";

function getWeather (latitude, longitude) {
    fetch(
        `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
    )
        .then(function (response) {
            return response.json();
        })
        .then(function (json) {
            const temperate = json.main.temp;
            const place = json.name;
            weather.innerText = `🌡${temperature.toFixed(1)}℃  🇰🇷${place}`;
        });
}


function saveCoords (coordsObj) {
    localStorage.setItem(COORDS, JSON.stringify(coords));
}

function handleGeoSuccess (position) {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const coordsObj = {
        /**latitude: latitude,
        longitude: longitude   ->같기 때문에 한번씩 써줌 **/
        latitude,
        longitude
    }; //{} obj선언 [] array선언, 세미콜론 안에다 붙이는거 아님!!!!
    saveCoords(coordsObj);
    getWeather(latitude, longitude);
}


function handleGeoError () {
    console.log("Cant access geo location");
}

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

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


function init () {
    loadCoords();
}

init();

크롬앱 깃허브
깃허브