choi95의 TIL📝

$inputTag.addEventListener('keyup', (event) => { (...) if(event.keyCode === 13) { items.push(value); $notification.classList.add('Notification--show'); $notification.classList.remove('Notification--hide'); $itemList.innerHTML = items.map(item => `${item}`).join(''); } setTimeout(() => { $notification.classList.add('Notification--hide'); $notification.classList.remove('Notification--show'); }, 20..

문제 window.addEventListener('scroll', function (event) { let {scrollTop, scrollHeight, clientHeight} = event.target.scrollingElement; let ratio = (scrollTop / contentHeight) * 100; //전체 문서에 대한 현재 스크롤된 비율를 퍼센트화 scrollBar.style.transform = `translateX(-${100 - ratio}%)`; scrollBar.style.transition = 'transform 0.5s ease-out'; }) 다음과 같이 스크롤된 비율에 따라 Scroll Indicator가 동적으로 움직이도록 코드를 구현하였다. 하지만 스크롤이 끝까..

문제 li.addEventListener('click', () => { const obj = { image: this.dataset.image, ...JSON.parse(this.dataset.user) } modal.classList.add('active'); thumbnail.src = obj.image; profileImg.src = obj.medium; userName.textContent = obj.name; insta.textContent = obj.instagram_username; }) https://choi95.tistory.com/106 JS 상에서 어트리뷰트에 객체 동적 할당 https://unsplash.com/documentation#get-a-random-photo Unsplas..

https://unsplash.com/documentation#get-a-random-photo Unsplash API Documentation | Free HD Photo API | Unsplash Getting started This document describes the resources that make up the official Unsplash JSON API. If you have any problems or requests, please contact our API team. Creating a developer account To access the Unsplash API, first join. Registering your appl unsplash.com 다음과 같이 API를 통해 이..

다음과 같은 방식들을 통해 스크롤 위치에 따라 각기 다른 Header 디자인이 랜더링되도록 코드를 구현하였다. scrollTop window.addEventListener('scroll', (event) => { let {scrollTop} = event.target.scrollingElement; //document.documentElement.scrollTop || document.body.scrollTop nav.classList.add('active'); //active 클래스 여부에 따라 헤더 디자인이 상이하게 작동 if(scrollTop = 50 ) ? nav.classList.add('active') : nav.classList.remove('active'); }) Window 인터페이스의 ..

document.addEventListener('click', function (event) { if(event.target === document.querySelector('button')) return; (...) }, false); 다음과 같이 클래스나 아이디명이 지정되어 있지 않은 버튼 요소를 이벤트 처리 내에서 식별하기 위해서 조건문을 작성하였다. 하지만 여러 버튼 중 가장 처음에 있는 버튼 요소만 이벤트를 감지하는 문제가 발생하였다. 문제해결 Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. querySelector로 참조한 노드 객체는 문서 내 첫 번째 Elem..

다음과 같이 Progress-Bar를 구현할 때, 버튼을 클릭한 뒤에 진행 바 요소의 width 값이 25%가 되었을 경우 해당 애니메이션을 종료시키기 위해서 다음과 같이 코드를 작성하였다. if(elem.style.getPropertyValue('width') === range * current) { //현재 진행 바 가로 너비가 지정 25%에 도달했을 경우 clearInterval(intervalId); //애니메이션 종료 current++; } 하지만 원하는 결과를 얻지 못하고 진행 바는 동작이 종료되지 않은 채 무한 루프로 빠지는 문제가 발생하였다. getPropertyValue의 반환값 문제 getPropertyValue가 반환하는 데이터 타입에 문제가 있었다. The CSSStyleDeclar..

startTimer : function(){ if(!this.isPending) { this.timerId = setInterval(() => { this.currentSec+=1; if(this.currentSec >= 60) { this.currentMin+=1; this.currentSec = 0; } document.querySelector('#min').textContent = `${this.currentMin < 10 ? `0${this.currentMin}` : `${this.currentMin}`}`; document.querySelector('#sec').textContent = `${this.currentSec < 10 ? `0${this.currentSec}` : `${this.cur..