Muscardinus

작가 이름 @작가 인스타그램 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorem eius error eum excepturi expedita facere inventore ipsa, laboriosam laudantium magnam magni numquam, odio placeat quam rem vitae voluptate voluptates! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolorem eius error eum excepturi expedita facere inventore ipsa, laboriosam laudantium magn..

0 // 필요한 Dom Selector const $stars = document.querySelector('.stars') const $score = document.querySelector('.score') const $reset = document.querySelector('.reset') // 별의 갯수 = Score const MAX_SCORE = 5 // 별의 현재 점수 상태 const state = { score: 0, } // 별의 갯수만큼 별 DOM 추가 (별은 empty, half, full 클래스를 가질수 있음) Array(MAX_SCORE) .fill() .forEach(() => { const star = document.createElement('div') star.classNa..

연락 수단을 선택해주세요! Email Phone Email 배송 방법을 선택해주세요! Ship Plane Car 확인 const $currentItem = document.querySelector('.CurrentItem'); const $formTag = document.querySelector('form'); // Write JS code here! const formMap = { contact: "연락 수단", delivery: "배송 수단", } $formTag.addEventListener("submit", (e) => { e.preventDefault(); const formRecords = Array.from(new FormData($formTag)); if (Object.keys(formM..

select의 dropdown을 구현하기 위해서는 backdrop에 selection 외부를 클릭했을때 selection container가 사라지게 하는 event listener를 넣는 것이 좋다 Google Yahoo /* * title: DropDownList class * description: dropdown ui component * configuration: idField: 해당 row의 id로 활용할 key labelField: 해당 row의 label로 활용할 key data: 표현될 리스트 changeEvent: 선택된 데이터를 받을 수 있는 callback selector: 선택된 데이터를 표시할 라벨 영역 backdrop: dropdown list를 출력할 영역 */ export ..

검색 Input에서 value값에 대한 자동완성 결과값을 받아오는 것을 구현 Debounce를 통한 api call 제한 Loading... const API_URL = 'https://api.thecatapi.com/v1/breeds/search'; const debounce = (targetFunction, debounceTime = 500) => { //가장 마지막 타이핑이 일어나고 0.5초 뒤에 API Request를 실행하도록 하는 debounce logic을 작성하시오. //Write Debounce logic here! let timeoutId = null; return (...args) => { clearTimeout(timeoutId); timeoutId = setTimeout(targe..

Search bar에서 입력 시, input 변화에 따른 연다른 api 호출이 아닌 debounce(이번에는 lodash 라이브러리 사용)를 사용한 api 호출의 최소화로 구현 // unsplash : https://unsplash.com/documentation#search-photos // debounce : https://lodash.com/docs/4.17.15#debounce const accessKey = "hPyF-tz9tHnxeaoTwb7q0GTw10Wxwr85cD63lk7d7UE"; const input = document.querySelector('input'); const dropdownMenu = document.querySelector('.dropdown-menu'); const ..

https://programmers.co.kr/learn/courses/30/lessons/72412 { const key = array.join(""); if (infoMap[key]) infoMap[key].push(score); else infoMap[key] = [score]; for (let i = start; i < array.length; i++) { const temp = [...array]; temp[i] = "-"; combination(temp, score, i + 1); } } for (const e of info) { const splited = e.split(" "); const score = +splited.pop(); combination(splited, score, 0); ..

Scroll의 위치에 따른 Nav의 배경 색 변화에 자주 사용한다. 첫 번째 방법 // 첫 번째 방법 // 스크롤 이벤트가 발생했을 때 // 현재 스크롤 위치를 가져온다. // 스크롤 위치를 바탕으로 active 클래스를 추가하거나 제거한다. // Write JS Code Here! window.addEventListener("scroll", (e) => { const top = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; (top >= 50) ? nav.classList.add("active") : nav.classList.remove("active") }); 두 ..