js5 자바스크립트 API 날씨 구현하기 (JS Make Weather API) home.openweathermap.org/ Members Enter your email address and we will send you a link to reset your password. home.openweathermap.org 날씨 API_KEY를 받기 위해서는 위의 사이트에서 회원가입을 해야한다. index.html 00:00 weather.js const weather = document.querySelector(".js-weather"); const API_KEY = "2b3a5aa1eda4f5eae36e185775d93e06"; const COORDS = 'coords'; function getWeather(lat, lon) { fetch(`https://api.openweatherm.. 2020. 11. 5. 자바스크립트 이미지 백그라운드 만들기 (JS Make Image Background) unsplash.com/ Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. unsplash.com 위 사이트에서 배경 3장을 다운로드 받습니다. js(실습하는 파일)/image 폴더를 생성합니다. 1.jpg, 2.jpg, 3.jpg 파일로 이름을 변경합니다. index.html 00:00 bg.js const body = document.querySelector("body"); const IMG_NUMBER = 3; function handleImgLo.. 2020. 11. 5. 자바스크립트 To Do List 만들기 (JS Make To Do List) index.html 00:00 todo.js const toDoForm = document.querySelector(".js-toDoForm"), // querySelector mean -> get HTML toDoInput = toDoForm.querySelector("input"), // (const) not good code -> clock.js (collapse) toDoList = document.querySelector(".js-toDoList") const TODOS_LS = "toDos"; /* // filterFn -> each item run -> only true(1) -> new array function filterFn(toDo) { return toDo.id === 1; */ l.. 2020. 11. 4. 자바스크립트 유저 이름 저장하기 index.html 00:00 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 saveName(text) { localStorage.setItem(USER_LS, text); } function handleSubmit(event) { event.preventDefault(); const currentValue = input.value; paintGreeting(currentVa.. 2020. 11. 3. 자바스크립트 Javascript 시계 만들기 index.html 00:00 clock.js 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.innerText = `${hours < 10 ? `0${hours}` : hours}:${ minutes < 10 ? `0${minutes}` : minutes }:${seconds < .. 2020. 11. 3. 이전 1 다음