index1.html,css,javaScript 마우스이벤트 색변하기 - soonbeankim/web1 GitHub Wiki

html

<!DOCTYPE html>
<html>
<head>
<title>something</title>
<link rel="stylesheet" href="index1.css"/>
</head>
<body>
  <h1 id="title">This works!</h1>
  <script src="index1.js"></script>
</body>
</html>

css

body{
  background-color: peru;
}
h1{
  color: purple;
}

JS

const title = document.querySelector("#title");
//const title = document.getElementById("title");
console.log("title");
title.innerHTML="Hi! From JS";
//title.style.color="white";
document.title="i own you now";



// title.addEventListener("click",handleClick);
//html의 title을 클릭하면 색깔 변하도록 이벤트! 

const age = prompt("how old are you?");
console.log(age);
if(age>=18&&age<=21){
    console.log('you can drink but you should not');
}else if(age>21){
    console.log('you can drink beer. Go ahead');
}else{
    console.log('you can not drink beer');
}


//const BASE_COLOR ="rbg(52,73,94)";
//const OTHER_COLOR="#7f8c8d";
//const title = document.querySelector("#title");
const BASE_COLOR ="red";
const OTHER_COLOR="blue";

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

    if(currentColor===BASE_COLOR){
        title.style.color=OTHER_COLOR;
    }else{
        title.style.color=BASE_COLOR;
    }
    console.log(title.style.color);
    //title.style.color="red";
    console.log(event);
}

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


//navigator.addEventListener("offline",handleOffline);
function handleOffline(){
    console.log("lalalala");
}
function handleOnline(){
    console.log("wifi on")
}
window.addEventListener("offline",handleOffline);
window.addEventListener("online",handleOnline);
⚠️ **GitHub.com Fallback** ⚠️