DOM

What you'll learn

• How to select elements from the DOM using JavaScript
• Creating and adding new elements dynamically
• Removing elements from web pages
• Building interactive features with DOM manipulation
• Working with form inputs and displaying results

:warning: IMPORTANT: Before You Start

DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

• In each exercise below, click the Stackblitz link and familiarize yourself with the interface.

Steps to Create Your DOM Projects

:computer: Exercise One: Adding Elements to the DOM

⏱️ Estimated time: 15 minutes

1. Open StackBlitz and access the template: Exercise 1
2. Alternative option: Download the source code template from Stackblitz using the Download Project button if you prefer using your own IDE

What To Do In the index.html file, you'll see an unordered list with Coffee and Tea as list items. Your task is to add another list item called Milk to the current unordered list using DOM manipulation.

Steps:

1. Create a variable called ul and select the "ul" element using document.querySelector
2. Create a variable called newli and create a new "li" element using document.createElement
3. Set the text "Milk" to newli using the textContent property
4. Add newli to ul using the appendChild method

:bulb: Tip Use document.querySelector("ul") to select the unordered list element. This selector will find the first <ul> element in your document.

Expected Result: If you have done it correctly, your webpage should display a list with three items: Coffee, Tea, and Milk.

:computer: Exercise 2: Removing Elements from the DOM

⏱️ Estimated time: 10 minutes

1. Open StackBlitz and access the template: Exercise 2
2. Alternative option: Download the source code template from Stackblitz using the Download Project button if you prefer using your own IDE

What To Do Remove the paragraph element using the .remove() method.

Steps:

1. Create a variable called p and select the paragraph that you want to remove using document.querySelector
2. Remove the p element using the .remove() method

:bulb: Tip Use CSS selectors to target specific paragraphs:

• Class selector: document.querySelector(".classname")
• ID selector: document.querySelector("#idname")
• Element selector: document.querySelector("p")

Take a look at the HTML and see what kind of ways you could select the paragraph that you want to remove. The selector is based on CSS selector syntax.

Expected Result: If you have done it correctly, the targeted paragraph should be removed from the page.

:computer: Exercise 3: Interactive Multiplication Calculator

⏱️ Estimated time: 20 minutes

1. Open StackBlitz and access the template: Exercise 3
2. Alternative option: Download the source code template from Stackblitz using the Download Project button if you prefer using your own IDE

What To Do Create a multiplication calculator that calculates the product of two numbers when the calculate button is pressed and displays the result as a paragraph below the button.

Steps:

1. Declare a variable called div and select it with the id "calc"
2. Declare both variables for num1 and num2. Select them with their respective ids
3. Create a function called calculate() for the button onclick event:
   • Declare a variable called answer and calculate the value using: num1.value * num2.value
   • Create a variable called newAnswer and create a "p" element using document.createElement
   • Set newAnswer's text content to: num1.value + " x " + num2.value + " = " + answer
   • Add the following classes to newAnswer:
     • "text-success"
     • "m-0"
   • Add newAnswer to div using appendChild

:bulb: Tip Common Challenges:

• Use .classList.add() to add multiple classes to an element
• Use .value to get the current value from input fields
• The onclick="" attribute is an inline JavaScript event handler that runs a function when the button is clicked

Learn more about onclick: https://www.w3schools.com/jsref/event_onclick.asp

Expected Results:

When you click the calculate button with first number = 3 and second number = 4:

The answer should appear below the calculate button.

When you click the calculate button again with first number = 2 and second number = 2:

The next answer should appear below the previous answer, creating a history of calculations.

Required Elements

Make sure your DOM projects include:

Exercise 1 Requirements:

• :white_check_mark: DOM element selection using document.querySelector()
• :white_check_mark: Element creation with document.createElement()
• :white_check_mark: Text content assignment using textContent
• :white_check_mark: Adding elements with appendChild()

Exercise 2 Requirements:

• :white_check_mark: DOM element selection with CSS selectors
• :white_check_mark: Element removal using .remove() method

Exercise 3 Requirements:

• :white_check_mark: Interactive calculator functionality
• :white_check_mark: Input value retrieval using .value
• :white_check_mark: Dynamic element creation
• :white_check_mark: Multiple class addition with .classList.add()
• :white_check_mark: Result display with proper formatting
• :white_check_mark: Integration with HTML forms and button interactions

Troubleshooting

:bulb: Tip Common Issues and Solutions:

1. Element not found: Make sure your script runs after the DOM is loaded. Place your script at the bottom of the body or use DOMContentLoaded event.

2. Values showing as NaN: Remember to convert input values to numbers using parseInt() or parseFloat() if needed.

3. Classes not applying: Use .classList.add() for each class separately or pass multiple arguments: .classList.add("class1", "class2")

4. Nothing happens on button click: Check that your function name in the onclick attribute matches your JavaScript function exactly.

Project Submission

:warning: Warning Before submitting, make sure to:

• Test all three exercises thoroughly
• Verify that all DOM manipulations work correctly
• Check that your calculator displays results properly
• Ensure no console errors appear

When you have completed all DOM exercises, submit your projects using the link below:

:information_source: Submit Your Projects Here Total estimated time: 45 minutes (15 + 10 + 20 minutes)