Notion にまとめていたものを少しずつ移行中。後ほど解説も追加します。
https://www.jschallenger.com/javascript-dom-exercises/dom-fundamentals

Fundamentals 編

JSchallenger にチャレンジ - Fundamentals / Basics
JSchallenger にチャレンジ - Fundamentals / Arrays
JSchallenger にチャレンジ - Fundamentals / Objects
JSchallenger にチャレンジ - Fundamentals / Dates
JSchallenger にチャレンジ - Fundamentals / Sets

DOM 編

JSchallenger にチャレンジ - DOM / DOM selector methods
JSchallenger にチャレンジ - DOM / Events and user interactions
JSchallenger にチャレンジ - DOM / DOM manipulation
JSchallenger にチャレンジ - DOM / DOM fundamentals
JSchallenger にチャレンジ - DOM / Recursive functions

Check the checkbox

Your first JavaScript DOM exercise. Let's start simple.
Extend the JavaScript code below to interact with the displayed HTML elements. Once you click the button, the checkbox should be checked.
Confirm your code by clicking the button!

const button = document.getElementById('button');
button.addEventListener ('click', () => {
  // type in your code here
  const target = document.getElementById('checkbox');
  target.checked = true;
});

Get full-name from inputs

Extend the JavaScript code below to interact with the displayed HTML elements.
This time we are looking for the full name. When the button is clicked, combine the names of the first two input fields. Insert the full name in the third input field.
Hint: Check if your code still works if you change the first or last name.
Confirm your code by clicking the button!

const button = document.getElementById('button');
button.addEventListener('click', () => {
  // type in your code here
  const firstName = document.getElementById('firstName');
  const lastName = document.getElementById('lastName');
  const target = document.getElementById('fullName');
  target.value = firstName.value + lastName.value;
});

Increment the counter on button click

Extend the JavaScript code below to interact with the displayed HTML elements.
On each button click, increase the value of the button by 1.
Confirm your code by clicking the button!

const button = document.getElementById('button');
button.addEventListener('click', () => {
  // type in your code here
  button.innerHTML++
});

Input filter list

In this challenge, we create a dynamic input filter with JavaScript.Extend the code below to interact with the displayed HTML elements. Type a search term in the input field. The displayed items in the list should match your search term. The rest of the list elements should be hidden.

const input = document.getElementById('input');
input.addEventListener('input', () => {
  // type in your code here
  const list = document.getElementById('list');
  const listItem = Array.from(list.children);
  
  listItem.forEach((item) => {
    !(item.innerHTML.includes(input.value)) 
      ? item.style.display='none' 
      : item.style.display=''
  });
});

Pop the balloons

Make the balloons pop by hovering over them.
Extend the JavaScript code below to interact with the displayed HTML elements. Every time you hover over a balloon, it should become invisible.
Your goal is to pop all the balloons one after the other.

const list = document.getElementById('list');
const targets = Array.from(list.childNodes);

targets.forEach((target) => {
  target.addEventListener('mouseover', () => target.style.visibility='hidden');
})