JavaScript DOM - Code Exercises

const fruitList = ["apple", "banana", "tomato"];

const ulElement = document.querySelector("ul");

fruitList.forEach((fruit) => {
  const itemElement = document.createElement("li");
  itemElement.textContent = fruit;
  ulElement.appendChild(itemElement);
});

This code creates a constant array fruitList with three elements, apple, banana, and tomato. It then selects an unordered list element from the HTML document using document.querySelector('ul').

Using the forEach method on the fruitList array, the code creates a new list item element for each fruit in the list, sets its text content to the name of the fruit, and appends it as a child to the unordered list element. This will dynamically add the list of fruits as list items in the HTML document.

const imageSrc = "https://crocoder.dev/icon.png";

const divElement = document.querySelector("div");

const imgElement = document.createElement("img");

imgElement.src = imageSrc;

divElement.appendChild(imgElement);

This code creates a constant imageSrc with a string value of an image URL. It then selects a div element from the HTML document using document.querySelector('div').

The code then creates an img element using document.createElement('img') and sets its src attribute to the value of imageSrc. Finally, the code appends the img element as a child to the div element using divElement.appendChild(imgElement). This will dynamically add the image from the URL specified in imageSrc as an element inside the div in the HTML document.

const firstLis = [...document.querySelectorAll("ul > li:first-child")];
const lastLis = [...document.querySelectorAll("ul > li:last-child")];

firstLis.forEach((li) => (li.textContent = "first"));

lastLis.forEach((li) => (li.textContent = "last"));

This code is using JavaScript to select and manipulate HTML elements. The first line uses the querySelectorAll method to find all the first children li elements within ul elements and spread them into an array firstLis.

The second line does the same for all the last children li elements within ul elements and spread them into an array lastLis. Then, the forEach method is used to iterate over both arrays and modify the textContent property of each li element to be “first” for the elements in firstLis and “last” for the elements in lastLis.

const app = document.getElementById("list-app");

// Create the necessary elements
const list = document.createElement("ul");
const input = document.createElement("input");
input.setAttribute("type", "text");
const addButton = document.createElement("button");
addButton.innerHTML = "Create New";

// Add event listeners to the elements
addButton.addEventListener("click", function() {
    const newItem = document.createElement("li");
    newItem.innerHTML = 'New item';
    list.appendChild(newItem);
    input.value = "";
});

list.addEventListener("click", function(event) {
    if (event.target.tagName === "li") {
        const text = prompt("Enter new text:");
        event.target.innerHTML = text;
    }
});

app.appendChild(input);
app.appendChild(addButton);

In this code snippet, we created three elements: list which is an unordered list, input which is a text input, and addButton which is a button element.

We use the setAttribute method to set the type of the input to “text”. Then, we use the addEventListener method to add event listeners to the elements. When the user clicks the add button, the function inside the event listener will create a new li element, set its text to the value of the input, and append it to the list. When the user clicks on an item in the list, the function inside the event listener will prompt the user for new text and set the text of the item to the new text.

Finally, we use the appendChild method to add the elements to the body of the web page.

Please note that this is just a simplified example. You might want to add some error handling, validation, and more features when building your own application.