JS challenge day 1

JS DRUM

 

Code

  <script>
    const 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.play();
    }
    const removeTransition = (e) => {
      if (e.propertyName !== 'transform') return;
      e.target.classList.remove('playing');
    }
    const keys = Array.from(document.querySelectorAll('.key'));
    keys.forEach((key) => key.addEventListener('transitionend', removeTransition));
    window.addEventListener('keydown', playSound);
  </script>

 

느낀 점 & 배운 점

 

순수 js 활용법을 더 공부하고 싶어서 챌린지를 시작하였습니다.

그런데 js 뿐만 아니라, css 부분에서도 공부가 되었던 것 같습니다.

 

1. css background-size: cover;

background-size 속성 중에 cover, contain이 있었습니다.

cover는 이미지를 화면에 꽉채우기(화면에 빈 공간 없게, 이미지 좀 잘릴 수 있음)

contain은  이미지를 다 넣기(화면에 빈공간 있음)

100%는 짤리는 부분 없이 화면 꽉 채우기

https://www.w3schools.com/cssref/playit.php?filename=playcss_background-size&preval=cover 

W3Schools CSS background-size demonstration

 

2. flex: 1 속성 복습

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

3. querySelector, addEventListener

JS 부분은 querySelector와 addEventListener를 이용하는 것이 전부였습니다.

querySelector로 id와 class만 잡는 것에 익숙했는데, 특정속성으로 선택하는 법을 배웠습니다.

document.querySelector(`div[data-key="${e.keycode}"]`);

또한, transitionend라는 이벤트를 사용해 볼 수 있는 계기가 되었습니다.