[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - momentum 만들기

 

🎒 vanilla JS로 momentum 만들기! 이번주 과제였다. 

랜덤으로 이미지를 변경 시켜주고, 실시간 시계를 띄워준다.(초단위로 시간이 변경되도록 구현할 것) 

그리고 내 이름을 입력하면 'Hello, ㅇㅇㅇ!' 이렇게 입력된 이름 값을 가져와서 인사를 시키는 것(?) 

 

 

전체적인 디자인은 시중에 나와있는(?) momentum과 흡사하게 구사했다. 

추후 하단에 todo list를 추가해야 하고, 날씨 api도 불러와야 한다. 

 

 

 

🎒 배경화면 랜덤 변경/ 시간 띄우는 것은 어렵지 않게 했는데, 이름을 입력 받고, 그 값을 인사와 함께 화면에 띄워줄 때 오류가 생겼다. 

제대로 뜨긴 하는데 약 1~2초 후에 초기화가 되고 사라진다는 것.. 

 

왜때문일까? 

배경을 랜덤으로 변경할 때 setInterval 함수를 사용했는데 이게 함께 작동되어 초기화 되는 것일까..? 

이것저거 시도해 보았는데 문제점을 찾았다. 

 

아래가 input에 이름을 입력하면 greeting을 함께 하는 함수이다. 

처음에 event.preventDefault() 함수를 써주지 않았더니, 위 영상처럼 계속 새로고침이 되었던 것. 

 

greeting() 함수를 HTML form 태그에서 동작되도록 해주었고, 'onsubmit' 이벤트는 새로고침을 기본동작으로 하기 때문에 

event.preventDefault()를 써서 기본동작인 새로고침을 막아주어야 한다!

function greeting(event) {
  event.preventDefault();

  let name = document.querySelector(".input_name").value;
  let greeting = document.createElement("div");
  greeting.innerHTML = `Hello, ${name} !`;

  document.querySelector(".greeting").append(greeting);
}

 

 

 

 

 

 

 

 

 

 

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