[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 과제

 

 

---

 

 

Vanilla JS를 이용한 서비스 만들기

1. 배경이미지 랜덤 변경
2. 인사 만들기
3. 시계 만들기
4. 할 일 목록 만들기
5. 내 위치의 날씨 만들기

 

배경이미지 랜덤 변경

const imgs = ["01.jpg", "02.jpg", "03.jpg", "04.jpg"];

const randomImg = imgs[Math.floor(Math.random() * imgs.length)];
const bgImage = document.querySelector("body");
bgImage.style.backgroundImage = `url(img/${randomImg})`;

random() 함수의 숫자는 0과 1사이의 숫자다 (0.xxxxxxx)
어떤 수 사이의 어떠한 랜덤한 수를 가져오고 싶을 때 해야할 일은 그냥 그 수를 곱한다. 그게 어떠한 숫자든 상관 없이.
그리고 floor()로 반올림해준다.

 

인사 만들기

const greetingForm = document.getElementById("greeting-form");
const greetingInput = document.querySelector("#greeting-form input[type=text]");

const greetingBtn = document.querySelector("#greeting-form input[type=submit]");
const greeting = document.getElementById("greeting");

function handleGreeting(event) {
  event.preventDefault();
  greetingForm.style.display = "none";
  const userName = greetingInput.value;
  greeting.innerText = `안녕하세요 ${userName}님`;
  
}

greetingBtn.addEventListener("click", handleGreeting);

event.preventDefault()로 브라우저의 기본동작을 막음

 

 

시계만들기

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


function getClock() {
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const mins = String(date.getMinutes()).padStart(2, "0");
  const sec = String(date.getSeconds()).padStart(2, "0");

// padStart() 함수는 내가 가지고있는 string을 보다 길게 만들 때 사용.
// setInterval() 함수는 정한 시간마다 함수를 실행시키게 해준다. 시간은 밀리세컨드로 1초 = 1000

  clock.innerText = `${hours}:${mins}:${sec}`;
}

getClock();
// getClock을 호출하고

setInterval(getClock, 1000);
// website가 load 되자마자 getClock()을 실행하고 또 매초마다 다시 실행.

 

할일 목록 만들기

 

 

 

내 위치의 날씨 만들기

const API_KEY = "";
const weatherContainer = document.querySelector("#weather span:first-child");

function onGeoOK(position){
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  const url = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`;
  fetch(url)
  .then(response => response.json())
  .then(data => {
    
    const cityContainer = document.querySelector("#weather span:last-child");

    const name = data.name;
    const weather = data.weather[0].main;

    weatherContainer.innerText = weather + ` / ${data.main.temp}`;
    cityContainer.innerText = name;
    });

}

function onGeoError(){
  weatherContainer.innerText = "위치를 찾을 수가 없습니다.";
}

navigator.geolocation.getCurrentPosition(onGeoOK, onGeoError);

 

 

 

느낀점

하나하나 코드를 배우고 작성하는데 재미를 느끼고 또 더 많은 곳에 응용해보고 싶다는 생각이 들었다. 기초를 충분히 다지는 일이라고 생각하며 차근차근 코드를 쳐 봐야겠다고 생각했다.

 

 

 

 

---

* 유데미 큐레이션 바로가기 : https://bit.ly/3ZpMIP7
* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.