Muscardinus

import { useState, useRef } from 'react'; import ProgressBar from './ProgressBar'; import Button from './Button'; function App() { const [ current , setCurrent ] = useState(0); const limit = 4; const range = 100 / limit; const animationSpeed = 500; const isLoading = useRef(false); const delay = (delay) => { isLoading.current = true; return new Promise(() => { setTimeout(() => { isLoading.current..

Title Body User Id Submit Loading… // API 기본 설정 const todoApi = axios.create({ baseURL: 'https://jsonplaceholder.typicode.com', headers: { 'Content-type': 'application/json; charset=UTF-8', }, }) const form = document.querySelector('form'); const title = document.querySelector('#title'); const body = document.querySelector('#body'); const user = document.querySelector('#user'); const loading = d..

목표 scrollTop / scrollHeight / clientHeight 에 관해서 잘 알자 Hello World ...... 첫 번째 방법 width를 활용 const scrollBar = document.getElementById('scroll-bar'); // 첫 번째 방법 (1) : width 크기를 변경 window.addEventListener('scroll', function () { // Write JS Code Here! const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 문서 전체 높이 const scrollHeight = document.documentElement.scrollHeig..

작가 이름 @작가 인스타그램 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..