[바닐라JS로 크롬 앱 만들기] DOM - If else - Function practice

[출처-유튜브 노마드 코더 Nomad Coders]

https://youtu.be/UwnBvuFyiBU

-이벤트의 근원을 알고 싶으면 항상 MDN을 찾아보라

 

const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";

function handleClick(){
    const currentColor = title.style.color;
    console.log(currentColor);
}

function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("click", handleClick);
}

init();

 

 

const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";

function handleClick(){
    const currentColor = title.style.color;
    if (currentColor === BASE_COLOR){
        title.style.color = OTHER_COLOR;
    } else {
        title.style.color = BASE_COLOR;
    }
}

function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("click", handleClick);
}

init();

 

 

function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("mouseenter", handleClick);
}

-mouseenter로 바꾸면 마우스를 올릴때마다 색깔이 바뀐다

 

 

function handleOffline(){
    console.log("lalala");
}

window.addEventListener("offline", handleOffline)

-오프라인일 때(인터넷 연결이 안되었을때) 'lalala'가 출력된다

 

 

function handleOffline(){
    console.log("bye bye");
}

function handleOnline(){
    console.log("welcome back");
}

window.addEventListener("offline", handleOffline)
window.addEventListener("online", handleOnline)

-온라인일 때 'welcome back'을 출력하고 오프라인일 때 'bye bye'를 출력