wecode 사전스터디(8/2) 로그

개발한 것/배운 것

---

vanilla Javascript 30days 프로젝트 시작 - 01.drum kit

개요 : 유저의 키보드 입력에 맞춰 특정 사운드를 재생(+해당 키 아이콘의 디자인을 transition)하는 웹사이트 

개발 필요 기능

1) html + css (key의 기본 css 및 key 입력시의 변경되는 css 개발 필요)

2) 자바스크립트

 - key 입력시 음악 파일 재생 기능

 - 음악 재생 후 기본값으로 복귀하는 기능

 

function removeTransition(e) {
  e.target.classList.remove("playing");
}

function playSound(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
  if (!audio) return;

  key.classList.add("playing");
  audio.currentTime = 0;
  audio.play();
}

const keys = document.querySelectorAll(".key");
const keysArray = [...keys];
keysArray.forEach((key) =>
  key.addEventListener("transitionend", removeTransition)
);
//what teacher used : const keys = Array.from(document.querySelectorAll('.key'));
window.addEventListener("keydown", playSound);

---

새로 배운 것

1. HTML audio DOM 컨트롤 메소드

 - audio.play() : 해당 음악 파일을 재생

 - audio.currentTime (참조) : 음악 파일의 재생 횟수를 설정 (위 코드에서는 currentTime을 항상 0으로 설정)

2. 어제 배웠던 [...keys] 배열 복제 사용해봄

3. addEventListener('transitionend') : CSS transition이 끝났을 시에 수행하는 이벤트 지정 (위 코드에서는 transtion이 모두 끝난 후, 다시 playing 클래스를 삭제하여 원래 아이콘으로 되돌아옴=

---

내일 할 것

1. freecodecamp 10문제 풀기

2. 30days 자바스크립트 2.clock + css 완료

3. udemy JS 강의 - movie 완료