본문 바로가기

노마드 코더43

[바닐라JS로 그림판 만들기] What are we building [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/jlOtDiYt9wg -바닐라JS Part2 (바닐라JS로 크롬 앱 만들기가 Part1) -Part1을 수강했는데도 바닐라JS에 대해 아직 모르겠으면 이 강의를 들을 것 (이해되면 유튜브 클론 코딩으로 넘어가세요) -여기선 좀더 interactive한 것을 만들거임. 페인팅 캔버스! -캔버스 API를 사용할 것임 2021. 4. 23.

[바닐라JS로 크롬 앱 만들기] Getting the Weather part Two API [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/l6hSze8vgVo index.html 00:00 weather.js const weather = document.querySelector(".js-weather"); const API_KEY = "f97c1ed1e4b50ed233ccabf8c1ea2011"; const COORDS = 'coords'; function getWeather(lat, lng){ fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric` ).then(function(response){ return respon.. 2021. 3. 3.

[바닐라JS로 크롬 앱 만들기] Getting the Weather part One Geolocation [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/5fAMu2ORvDA index.html 00:00 weather.js const API_KEY = "f97c1ed1e4b50ed233ccabf8c1ea2011"; const COORDS = 'coords'; function saveCoords(coordsObj){ localStorage.setItem(COORDS, JSON.stringify(coordsObj)); } function handleGeoSuccess(position){ const latitude = position.coords.latitude; const longitude = position.coords.longitude; const coordsObj = {.. 2021. 3. 3.

[바닐라JS로 크롬 앱 만들기] Image Background [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/aHlJqxLREcY 먼저 사용할 이미지를 다운받는다 https://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 -이미지 랜덤으로 불러오기 bg.js const body = document.querySelector("body"); const IMG_NUMBER = 3; function paintImage(imgNumbe.. 2021. 3. 3.

[바닐라JS로 크롬 앱 만들기] Making a To Do List part Three [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/dbPOjiG5WJ4 -HTML에서 지우기 function deleteToDo(event){ console.log(event.target); } delBtn.addEventListener("click", deleteToDo); function paintToDo(text){ const li = document.createElement("li"); const delBtn = document.createElement("button"); const span = document.createElement("span"); const newId = toDos.length + 1; delBtn.innerText = "X"; delBtn.a.. 2021. 3. 3.

[바닐라JS로 크롬 앱 만들기] Making a To Do List part Two [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/JEbOaI_0phc const toDoObj = { text: text, id: toDos.length + 1 }; toDos.push(toDoObj); ↑이것을 추가해준다 const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS = 'toDos'; const toDos = []; function paintToDo(text){ const li = document.createEleme.. 2021. 3. 3.

이전 1 2 3 4 5 6 ··· 8 다음

티스토리툴바