Muscardinus

Loading... const API_URL = 'https://api.thecatapi.com/v1/breeds/search'; const $searchInput = document.querySelector('.SearchInput'); const $loadingIndicator = document.querySelector('.LoadingIndicator'); const $textList = document.querySelector('.TextList'); const $infoParagraph = document.querySelector('.InfoParagraph'); // Write code here. $searchInput.addEventListener("keyup", async (e) => {..

Tabs // fetch fake data const fetchTabsData = () => { return new Promise(resolve => { setTimeout( () => resolve([ { title: 'HTML', content: `HTML(HyperText Markup Language) is the most basic building block of the Web. It describes and defines the content of a webpage along with the basic layout of the webpage. Other technologies besides HTML are generally used to describe a web page's appearance..

carousel overflow: hidden Carousel Slider const carousel = ($container, images) => { // Write JS Code Here! let currentSlide = 0; let isMoving = false; const DURATION = 500; const timerId = null; let $carouselSlides = null; const move = (currentSlide, duration = 0) => { if (duration) isMoving = true; $carouselSlides.style.setProperty("--duration", duration); $carouselSlides.style.setProperty("--..

// Import stylesheets import './style.css'; import { ToggleButton } from './question/toggle-button'; const bootstrap = () => { const buttonData = [ 'Bold', 'Italic', 'Underline' ] const toggleButton = new ToggleButton({ selector: '#toggle-button', data: buttonData, changeEvent: (selectedIndex) => { alert(selectedIndex); } }) } bootstrap(); /* * title: Toggle button class * description: toggle bu..

GET Tag List // Import stylesheets import './style.css'; import { Chips } from './question/chips'; const bootstrap = () => { const buttonData = [ '#vue', '#react', '#angular' ] const chips = new Chips({ selector: '#chips', data: buttonData }); document.querySelector('.result-button').addEventListener('click', () => { chips.getChips(); }); } bootstrap(); /* * title: Chips class * description: chi..

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..