Write JS code to select the following elements:

1. An element with the id `header` (use `getElementById`).
2. All elements with the class `btn` (use `querySelectorAll`).
3. The first `p` element on the page (use `querySelector`).

const header = document.getElementById("header");
const buttons = document.querySelectorAll(".btn");
const firstPara = document.querySelector("p");

You have an `h1` element with id `title`:

1. Change its inner text to "Hello, World" (innerText).
2. Change its HTML to `<span>Hello</span>` (innerHTML).

const title = document.getElementById("title");

title.innerText = "Hello, World";
title.innerHTML = "<span>Hello</span>";

Update the styles of the `box` element:

1. Set the background color to red (backgroundColor).
2. Set the font size to 20px (fontSize).
3. Hide the element entirely (display = 'none').

const box = document.getElementById("box");

box.style.backgroundColor = "red";
box.style.fontSize = "20px";
box.style.display = "none";

Use `classList` to modify the `item` classes:

1. Add the `active` class.
2. Remove the `hidden` class.
3. Toggle the `selected` class.

const item = document.getElementById("item");

item.classList.add("active");
item.classList.remove("hidden");
item.classList.toggle("selected");

Add a new element to the page:

1. Create a new `li` element.
2. Set its text to "New item".
3. Append it to an existing list with id `list` (appendChild).

const newItem = document.createElement("li");
newItem.innerText = "New item";

const list = document.getElementById("list");
list.appendChild(newItem);

Make the `btn` button interactive:

1. Add a click event listener.
2. On click, log "Clicked!" to the console.

const btn = document.getElementById("btn");

btn.addEventListener("click", function() {
    console.log("Clicked!");
});

Read a value from an input field:

1. You have an `input` field and a button.
2. On button click, read the field value (`value`).
3. Display it in an alert.

const input = document.getElementById("myInput");
const btn = document.getElementById("myBtn");

btn.addEventListener("click", function() {
    alert(input.value);
});

Listen for key presses:

1. Add a `keydown` listener on the document.
2. Log the pressed key name (`event.key`) to the console.

document.addEventListener("keydown", function(event) {
    console.log(event.key);
});

Prevent a form from submitting:

1. You have a `form` element.
2. On submit, prevent page reload using `event.preventDefault()`.
3. Log "Submission blocked".

const form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
    event.preventDefault();
    console.log("Submission blocked");
});

Remove an element from the page:

1. When the `item` element is clicked, remove it from the DOM.
2. Use `item.remove()` or `item.parentElement.removeChild(item)`.

const item = document.getElementById("item");

item.addEventListener("click", function() {
    item.remove();
});