NOTE

console.log("파이썬 프린트네, 로그 남겨줌")

const a = 5; // 상수(constant) 선언
let a = 5;   // 변수(variable) 선언, 이후 변경 가능

/* 걍 쓰면 되는 파이썬 찬양하라 */

var a = 5; // 과거의 값을 안없애나? 여튼 쓸일 없음

ALWAYS const SOMETIMES let NEVER var

const week = ["mon", "tue", "wed", "thu", "fri", "sat"];

//Get item from Array
console.log(week);

//Add one more day to the array
week.push("sun");
console.log(week)

const player = {
    name: "amy",
    points: 373737,
    fat: true
};

console.log(player);
// {name: 'amy', points: 373737, fat: true}
// 추가, 변경
player.lastname = "lee"
player.points = player.points - 373736

console.log(player);
// {name: 'amy', points: '1', fat: true, lastname: 'lee'}

function sayHello(name, age){
    console.log("Hello!", name, "I'm", age ,"years old");
}

sayHello("amy", 20);
sayHello("jimmy", 11);
sayHello("hoit", 73);

const player = {
    name: "nico",
    sayHello: function(otherName){
        console.log("hello!" , otherName , "nice to meet you");
    },
}

console.log(player.name);
player.sayHello("lynn");

const calculator = {
    plus: function (a, b) {
        return(a + b);
    },
    minus: function(a, b) {
        return(a - b);
    },
    times: function(a, b) {
        return(a * b);
    },
    divide: function(a, b) {
        return(a / b);
    },
    power: function(a , b) {
        return(a ** b);
}
};

console.log(calculator.minus(3, 5));

console.log(typeof age); //age의 데이터 타입
console.log(parseInt(age)) // age 숫자로 바꿔줌

const age = parseInt(prompt("how old are you?"));
//팝업을 띄워 값을 입력받고 정수인지 확인

if(isNaN(age)){ //매개변수가 숫자인지 검사하는 함수 Not a Number
    console.log("Please write a number");
} else {
    console.log(age)
    console.log("Thank you writing your age.");
}

const age = parseInt(prompt("how old are you?"));

if(isNaN(age)){
    console.log("Please write a number");
} else if (age < 18) {
    console.log("You are too young.");
} else if ( age >= 18 && age <= 50) {
    console.log("you can drink.")
} else{
    console.log("you are too old.");
}

const title = document.getElementById("title");

console.dir(title);

title.innerText = "Got you!";

const title = document.querySelector(".hello h1");

console.log(title);
// 만약 같은 이름의 dic가 여러개일 경우 첫번째 element만 가져옴

const title = document.querySelectorAll(".hello:first-child h1"); 

// 다가져오기

const title = document.querySelector("div.hello:first-child h1");


function handleTitleClick() {
    console.log("title was clicked!");
}

title.addEventListener("click", handleTitleClick);//()넣을 필요 없음

const title = document.querySelector("div.hello:first-child h1");


function handleTitleClick() {
    title.style.color = "pink";
}

function handleMouseEnter() {
    title.innerText= "Mouse is here";
}

function handleMouseLeave() {
    title.innerText = "Mouse is gone!";
}

title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    if(h1.style.color === "pink"){
        h1.style.color = "violet";
    } else {
        h1.style.color = "pink";
    }
}

h1.addEventListener("click", handleTitleClick)

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    const currentColor = h1.style.color;
    let newColor;
    if(currentColor === "pink"){
        newColor = "violet";
    } else {
        newColor = "pink";
    }
    h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick)

const h1 = document.querySelector("div.hello:first-child h1")

function handleTitleClick() {
    const clickedClass = "active"
    if(h1.classList.contains(clickedClass)){
      // h1.class중에 clickedclass를 가지고 있는가
        h1.className = "";
    } else {
        h1.className = clickedClass;
    }
}

h1.addEventListener("click", handleTitleClick)

const h1 = document.querySelector("div.hello:first-child h1")

function handleTitleClick() {
    const clickedClass = "active"
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
}

h1.addEventListener("click", handleTitleClick)
//classList의 font는 유지한 채 active css만 추가했다가 지워주는 기능

function handleTitleClick() {
    h1.classList.toggle("active");
    }

<form id="login-form">
        <input 
        required
        maxlength="15"
        type="text" 
        placeholder = "What is you name?"
        />
        <button>Log In</button>
    </form>