소스 코드 JavaScript30/05 - Flex Panel Gallery/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I Learnedtransition 활용패널을 클릭 시 위 아래에서 글자가 나타나게 하는 트랜지션이다. 패널 요소 클릭 시 open-active 클래스가 토글되도록 했고, 디폴트 상태에서는 transform 속성의 값으로 translateY(+/-100%)를 주어 해당하는 요소를 숨겨두었다가 open-activ..

소스 코드 JavaScript30/04 - Array Cardio Day 1/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedArray.prototype.reduce()reduce 메서드는 사용할 때마다 사용법이 헷갈리는데 이번 기회에 확실히 알아두게 되었다. reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 콜백 함수의 첫 번째 인수로 accumu..

소스 코드 JavaScript30/03 - CSS Variables/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedDocument.documentElementDocument.documentElement 읽기 전용 속성은 문서의 루트 요소를 나타내는 Element를 반환한다. HTML 문서를 예로 들면  요소를 반환한다.function handleUpdate() { const suffix = this.dataset...

소스 코드 JavaScript30/02 - JS and CSS Clock/index-START.html at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I LearnedDate객체와 setInterval 함께 사용하기Date 객체와 setInterval 메서드 각각에 대해서는 이해하고 있었지만, setInterval의 첫 번째 인수로 전달하는 콜백 함수 내에서 Date객체를 적절히 활용하면 이렇게 시계 인터페이스도 구현해볼 수 있다니 흥미롭다. const seco..

소스 코드 JavaScript30/01 - JavaScript Drum Kit at master · jisunipark/JavaScript3030 Day Vanilla JS Challenge. Contribute to jisunipark/JavaScript30 development by creating an account on GitHub.github.com Today I Learnedaudio.currentTime = 0function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode..