Toggle Active Class

Easy
3 views 24 Jan 2026
You have a button with id btn and a box with id box. When user clicks button, toggle class active on #box. Write the JavaScript code....

Build HTML Table Rows

Medium
4 views 24 Jan 2026
You are given an array of objects like {name,score}. Create table rows inside . For each item, add namescore....

Show/Hide Text on Button Click

Easy
3 views 24 Jan 2026
You have a button #btn and a text box #box. On click, toggle #box display between block and none....

Live Character Count

Easy
2 views 24 Jan 2026
You have and . While typing, show current character count inside #count....

Add Item to List

Easy
2 views 24 Jan 2026
You have , , and
    . On button click, add a new
  • with input text (trim). Ignore if empty....

Remove Element by Click

Easy
3 views 24 Jan 2026
You have many elements with class card. When any card is clicked, remove only that card from DOM....

Highlight Even Table Rows

Easy
2 views 24 Jan 2026
You have a table with rows inside . Add class even-row to every even row (2nd, 4th, ...)....

Toggle Password Visibility

Easy
3 views 24 Jan 2026
You have and . On click, change input type between password and text, and update button text to SHOW/HIDE....

Disable Submit for Empty Required

Easy
3 views 24 Jan 2026
You have a form #f with inputs having attribute data-req=1. Disable button #submit until all required inputs have some value (trimmed)....

Run Click Handler Only Once

Easy
2 views 24 Jan 2026
You have a button #once. When clicked first time, set its text to DONE and disable it. Further clicks should not run the handler logic....

Read Data Attribute and Show It

Easy
2 views 24 Jan 2026
You have
and . On page load, read data-id and show it inside #out....

Dynamic List Delete (Event Delegation)

Medium
2 views 24 Jan 2026
You have
    where each
  • contains text and a Delete. Items can be added later. On clicking Delete, remove that
  • . Use event delegation....

Debounce Search Filter

Medium
2 views 24 Jan 2026
You have and many items with class item inside #list. Filter items by text content (case-insensitive). Debounce the filtering by 300ms....

Tabs Component

Medium
2 views 24 Jan 2026
You have buttons with class tab-btn and data-tab=panelId. Panels have class tab-panel and id matching data-tab. On click, show only that panel and add class active on the clicked button....

Accordion Toggle

Medium
4 views 24 Jan 2026
You have sections .acc where each has a header .acc-head and body .acc-body. On clicking header, toggle its body. Close other bodies in the same container....

Modal Open/Close with ESC

Medium
4 views 24 Jan 2026
You have #open button and a modal #modal with a close button #close. On open show modal (add class show). On close/ESC click hide it (remove class show)....

Smooth Scroll to Section

Medium
3 views 24 Jan 2026
You have anchor links with class jump and href like #section1. On click, prevent default and smoothly scroll to the target element....

Copy Text to Clipboard

Medium
2 views 24 Jan 2026
You have . On click, copy data-copy text to clipboard and change button text to COPIED for 1 second....

Serialize Form to JSON

Medium
3 views 24 Jan 2026
You have a form #f and a
. On submit, prevent default and print JSON of all fields into #out. Multiple same-name fields should become an array....                        

Lazy Load Images

Medium
4 views 24 Jan 2026
Images have data-src and class lazy. When an image is near viewport, set its src from data-src and remove class lazy. Use IntersectionObserver....

Infinite Scroll Add Items

Medium
2 views 24 Jan 2026
You have
. When user scrolls near bottom (within 200px), append 10 new
Item N
. Keep count with variable start....

Resizable Box (Drag Handle)

Medium
2 views 24 Jan 2026
You have a box #box and a handle #handle in its bottom-right corner. On dragging handle, resize the box (width/height) with minimum 100px....

Auto Save Textarea to localStorage

Medium
7 views 24 Jan 2026
You have and a . Save textarea value to localStorage key note_text on input (debounced 200ms). On load, restore. Clear button removes storage and clears textarea....

Sort Table by Clicking Header

Medium
3 views 24 Jan 2026
You have a table #t with . Rows are in . On clicking a header, sort rows by that column text. Toggle asc/desc each time....

Max Length Counter with Warning

Medium
4 views 24 Jan 2026
You have and . Show how many characters left. If limit exceeded, add class bad on #text....

Simple Tooltip on Hover

Hard
4 views 24 Jan 2026
Elements with attribute data-tip should show a tooltip div near mouse on hover and hide on mouse leave....

Hash Router (Single Page)

Hard
3 views 24 Jan 2026
You have a container #view and multiple templates , etc. Use location.hash (like #home). On hash change, render matching template into #view. Default to home....

Sortable List (Drag and Drop)

Hard
2 views 24 Jan 2026
You have
    with
  • . Allow user to reorder list items by drag and drop....

Modal Focus Trap (Accessibility)

Hard
4 views 24 Jan 2026
You have #modal with focusable elements and class show means open. When open, trap Tab/Shift+Tab inside modal. ESC closes....

Virtual List Rendering

Hard
3 views 24 Jan 2026
You have a container #list with fixed height and overflow auto. Render 10000 rows but keep only visible rows in DOM using virtualization. Row height is 30px....

Undo/Redo for Textarea

Hard
3 views 24 Jan 2026
You have , , . Keep history of changes (max 50). Undo/redo should update textarea value....

Auto Number Headings with MutationObserver

Hard
3 views 24 Jan 2026
You have a container #article where headings are

. Prefix each heading text with its number like '1. Title'. If headings change later, auto re-number....

Keyboard Navigation Dropdown

Hard
3 views 24 Jan 2026
You have
with and
  • ..
. Implement open/close and keyboard: Enter/Space opens, ArrowDown/ArrowUp moves focus inside list, E...

Clipboard Copy with Fallback

Hard
3 views 24 Jan 2026
You have #btn and #src (text input). On click copy #src value. Use navigator.clipboard when available, else fallback using a hidden textarea and document.execCommand('copy'). Show result in #msg....

Image Gallery Lightbox

Hard
3 views 24 Jan 2026
You have thumbnails .thumb with data-full URL. On click, open overlay #light with . Clicking overlay closes. ESC closes too....