Muscardinus

SortableList.jsx import React, { useState, useCallback } from "react"; import "./SortableList.css"; import SortableListItem from "./SortableListItem"; function SortableList({ data, onDropItem, onClickItem, renderItem }) { const [startIndex, setStartIndex] = useState(0); const [listData, setListData] = useState(data); const onDragStart = (index) => setStartIndex(index); const onDrop = useCallback..

class Router { routes = []; notFoundCallback = () => {}; addRoute(url, callback) { this.routes.push({ url, callback }); return this; } checkRoute() { const currentRoute = this.routes.find( (route) => route.url === window.location.hash ); if (!currentRoute) { this.notFoundCallback(); return; } currentRoute.callback(); } init() { window.addEventListener("hashchange", this.checkRoute.bind(this)); i..

좋아하는 음식 Pizza Steak Noodle 관심사 Cooking Bike Swimming Piano Book 확인 const $currentItem = document.querySelector('.CurrentItem'); const $formTag = document.querySelector('form'); // Write code here. $formTag.addEventListener("submit", (event) => { event.preventDefault(); const formRecords = Array.from(new FormData($formTag)); const foodRecords = formRecords.filter((record) => record[0] === "food")..

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