본문 바로가기

바닐라js40

[바닐라JS로 크롬 앱 만들기] Saving the User Name part Two [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/7gYwj8vh_OQ greeting.js const form = document.querySelector(".js-form"), input = form.querySelector("input"), greeting = document.querySelector(".js-greetings"); const USER_LS = "currentUser", SHOWING_CN = "showing"; function handleSubmit(event){ event.preventDefault(); const currentValue = input.value; paintGreeting(currentValue); } function askForN.. 2021. 2. 26.

[바닐라JS로 크롬 앱 만들기] Saving the User Name part One [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/lXxlGCRBOQU index.html 00:00 index.html 00:00 index.css body { background-color: #ecf0f1; } .btn { cursor: pointer; } h1 { color: #34495e; transition: color 0.5s ease-in-out; } .clicked { color: #7f8c8d; } .form, .greetings { display: none; } .showing { display: block; } greeting.js const form = document.querySelector(".js-form"), input = form.queryS.. 2021. 2. 26.

[바닐라JS로 크롬 앱 만들기] Making a JS Clock part Two [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/jstjlCZa7nA setInterval(fn, 1000) 첫 번째 인자는 함수, 두 번째 인자는 실행할 시간 간격(millisecond)이다 const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime(){ const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); clockTitle.inner.. 2021. 2. 26.

[바닐라JS로 크롬 앱 만들기] Making a JS Clock part One [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/f0nBj0YMBUI -이론 끝. 이제 momentum을 만들자 index.html 00:00 clock.js const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime(){ const date = new Date(); const minute = date.getMinutes(); const hours = date.getHours(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours}:${m.. 2021. 2. 26.

[바닐라JS로 크롬 앱 만들기] DOM - If else - Function practice Two [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/S4BN1tZmmWw index.js const title = document.querySelector("#title"); const CLICKED_CLASS = "clicked"; function handleClick(){ const currentClass = title.className; if(currentClass !== CLICKED_CLASS){ title.className = CLICKED_CLASS; } else { title.className = ""; } } function init(){ title.addEventListener("click", handleClick); } init(); index.css (.. 2021. 2. 26.

[바닐라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); } ini.. 2021. 2. 26.

이전 1 2 3 4 5 6 7 다음

티스토리툴바