Click CounterProblem StatementWrite a function `setupCounter(button, display)` that increments the `display` text content whenever the `button` is clicked.Approach 1. Add an event listener to the button. 2. Maintain a count variable. 3. On click, increment count and update `display.textContent`. Solution`function setupCounter(button, display) { let count = 0; button.addEventListener('click', () => { count++; display.textContent = count;
Toggle ClassProblem StatementWrite a function `toggleVisibility(element, className)` that toggles the specified class on the element when it is clicked.Approach 1. Add a click event listener to the element. 2. Use `element.classList.toggle(className)` inside the handler. Solution`function toggleVisibility(element, className) { element.addEventListener('click', () => { element.classList.toggle(className);
Input MirrorProblem StatementWrite a function `mirrorInput(input, display)` that updates the `display.textContent` to match the `input.value` in real-time as the user types.Approach 1. Use the 'input' event on the text input. 2. Set `display.textContent` to `e.target.value`. Solution`function mirrorInput(input, display) { input.addEventListener('input', (e) => { display.textContent = e.target.value;
Add Item to ListProblem StatementWrite a function `addItemToList(list, text)` that creates a new `<li>` element with the given text and appends it to the `list`.Approach 1. Use `document.createElement('li')`. 2. Set its `textContent`. 3. Use `list.appendChild()` to add it. Solution`function addItemToList(list, text) { const li = document.createElement('li'); li.textContent = text; list.appendChild(li);
Random Background ColorProblem StatementWrite a function `changeColor(button)` that changes the `document.body.style.backgroundColor` to a random hex color when the button is clicked.Approach 1. Create a function to generate a random hex code. 2. Add a click listener to the button. 3. Update the body style. Solution`function changeColor(button) { button.addEventListener('click', () => { const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); document.body.style.backgroundColor = randomColor;
Prevent Form SubmissionProblem StatementWrite a function `handleForm(form)` that prevents the default form submission and logs "Form Clicked" instead.Approach 1. Listen for the 'submit' event. 2. Call `e.preventDefault()`. 3. Console log the message. Solution`function handleForm(form) { form.addEventListener('submit', (e) => { e.preventDefault(); console.log("Form Clicked");
Hide on ClickProblem StatementWrite a function `hideSelf(element)` that sets `element.style.display = 'none'` when it is clicked.Approach 1. Add a click listener. 2. Target the element from the event or direct reference. Solution`function hideSelf(element) { element.addEventListener('click', () => { element.style.display = 'none';
Character CounterProblem StatementWrite a function `limitChars(textarea, counter, max)` that updates `counter.textContent` with "X / max" and prevents typing beyond the max length.Approach 1. Listen for 'input' event. 2. If value length > max, truncate it. 3. Update the counter display. Solution`function limitChars(textarea, counter, max) { textarea.addEventListener('input', () => { if (textarea.value.length > max) { textarea.value = textarea.value.slice(0, max);
Click to Remove ItemProblem StatementWrite a function `makeRemovable(list)` that removes any `<li>` child within the `list` when it is clicked (using event delegation).Approach 1. Add one listener to the parent `list`. 2. Check if `e.target.tagName === 'LI'`. 3. Call `e.target.remove()`. Solution`function makeRemovable(list) { list.addEventListener('click', (e) => { if (e.target.tagName === 'LI') { e.target.remove();
Simple Image SwitcherProblem StatementWrite a function `initGallery(mainImg, thumbnails)` where clicking any thumbnail (an array of images) updates the `mainImg.src` to match the clicked thumbnail's src.Approach 1. Loop through thumbnails. 2. Add click listener to each. 3. Update `mainImg.src`. Solution`function initGallery(mainImg, thumbnails) { thumbnails.forEach(thumb => { thumb.addEventListener('click', () => { mainImg.src = thumb.src;
Hover Zoom EffectProblem StatementWrite a function `setupZoom(element)` that scales the element to 1.2x on `mouseenter` and resets it on `mouseleave`.Approach 1. Use `mouseenter` and `mouseleave` events. 2. Update `element.style.transform`. Solution`function setupZoom(element) { element.addEventListener('mouseenter', () => { element.style.transform = 'scale(1.2)'; element.style.transition = 'transform 0.3s';
Add Table RowProblem StatementWrite a function `addRow(table, data)` that takes an array `data` (e.g. ['John', '25']) and adds a new row to the table body.Approach 1. Find/create `tbody`. 2. Insert a new row using `insertRow()`. 3. Loop through data and use `insertCell()` for each item. Solution`function addRow(table, data) { const row = table.insertRow(); data.forEach((text) => { const cell = row.insertCell(); cell.textContent = text;
Modal LogicProblem StatementWrite a function `setupModal(openBtn, closeBtn, modal)` that shows the modal (display: block) on open and hides it on close.Approach 1. Open button listener sets display to 'block'. 2. Close button listener sets display to 'none'. Solution`function setupModal(openBtn, closeBtn, modal) { openBtn.addEventListener('click', () => modal.style.display = 'block'); closeBtn.addEventListener('click', () => modal.style.display = 'none');
Live Search FilterProblem StatementWrite a function `searchFilter(input, items)` that hides any element in `items` (array of nodes) if its text doesn't match the search query.Approach 1. Listen for 'input' on the search box. 2. For each item, check if `textContent.toLowerCase()` includes input value. 3. Toggle `display: none` accordingly. Solution`function searchFilter(input, items) { input.addEventListener('input', () => { const query = input.value.toLowerCase(); items.forEach(item => { const match = item.textContent.toLowerCase().includes(query); item.style.display = match ? '' : 'none';
Attribute SwapProblem StatementWrite a function `swapType(input)` that toggles an input's type between 'password' and 'text'.Approach 1. Check current `input.type`. 2. Update it to the opposite value. Solution`function swapType(input) { input.type = input.type === 'password' ? 'text' : 'password';
Scroll to TopProblem StatementWrite a function `backToTop(button)` that scrolls the window to the top smoothly when clicked.Approach 1. Use `window.scrollTo()` with `behavior: 'smooth'`. Solution`function backToTop(button) { button.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth'
Simple ValidationProblem StatementWrite a function `validate(input, errorMsg)` that shows `errorMsg` if the input doesn't contain an '@' symbol on `blur`.Approach 1. Listen for the 'blur' event. 2. Check if `input.value` contains '@'. 3. Set `errorMsg.style.display` based on the check. Solution`function validate(input, errorMsg) { input.addEventListener('blur', () => { const isValid = input.value.includes('@'); errorMsg.style.display = isValid ? 'none' : 'block';
Active Navigation LinkProblem StatementWrite a function `setActive(links)` that adds an '.active' class to the clicked link and removes it from all others.Approach 1. Loop through links and add click listeners. 2. In the handler, remove '.active' from all links. 3. Add '.active' to the clicked link. Solution`function setActive(links) { links.forEach(link => { link.addEventListener('click', () => { links.forEach(l => l.classList.remove('active')); link.classList.add('active');
Read Data AttributeProblem StatementWrite a function `logPrice(element)` that reads the `data-price` attribute from an element and logs it.Approach 1. Use `element.dataset.price` or `getAttribute('data-price')`. Solution`function logPrice(element) { console.log(element.dataset.price);
Efficient List CreationProblem StatementWrite a function `createList(container, itemsArray)` that uses a `DocumentFragment` to append multiple items efficiently.Approach 1. Create a `document.createDocumentFragment()`. 2. Create `li` elements for each item and append them to the fragment. 3. Finally, append the fragment to the container (minimizes reflows). Solution`function createList(container, itemsArray) { const fragment = document.createDocumentFragment(); itemsArray.forEach(text => { const li = document.createElement('li'); li.textContent = text; fragment.appendChild(li);