Scribd
Upload
34 views3 pages

Lab 8

Uploaded by

Oz Vessalius
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views3 pages

Lab 8

Uploaded by

Oz Vessalius
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

SENG303 Full-Stack Web Development

Lab#08: DOM

Environment Instructions
Use Visual Studio Code (VSCode) or Notepad++ to edit and develop your HTML
scripts during both labs and lectures. Ensure you have the necessary extensions
installed for HTML/CSS/JS and PHP syntax highlighting and validation.

Task 1: Basic Structure for HTML Website


 Create a simple HTML document with the following structure:
<!DOCTYPE html>
<html>
<head>
<title>DOM Nodes and Trees</title>
</head>
<body>
<div id="container">
<h1>Hello, DOM!</h1>
<p>This is a paragraph inside the container.</p>
</div>
</body>
</html>
 Write a JavaScript function named getNodeDetails that:
 Selects the <div> element by its id.
 Logs the name of the first child node.

Task 2: Modify the List

 Given the following HTML structure:


<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
 Write a JavaScript function named modifyList that:
 Adds a new <li> element with the text "Item 4" to the end of the
list.
 Changes the text of the second <li> element to "Updated Item 2".
 Removes the first <li> element from the list.

Task 3: Change the Style


 Create a button in HTML:
<button id="styleButton">Change Style</button>
<p id="text">This is a paragraph.</p>
 Write a JavaScript function named changeStyle that:
 Changes the text color of the paragraph to blue.
 Sets the font size of the paragraph to 20px.
 Adds a yellow background color to the paragraph.
 The function should be executed when the button is clicked.

Task 4: Animate the Box


 Create a simple HTML document:
<div id="box" style="width: 100px; height: 100px; background-color: red;
position: relative;"></div>
<button id="moveButton">Move Box</button>
 Write a JavaScript function named animateBox that moves the <div> box
300px to the right when the button is clicked.
 Use the setInterval method to create the animation.

Task 5: Using Timers and Dynamic Styles


 Create a button in HTML:
<button id="fadeButton">Fade Out Text</button>
<p id="fadeText">This text will fade out.</p>
 Write a JavaScript function named fadeOutText that gradually decreases
the opacity of the paragraph until it disappears when the button is clicked.
Task 6: Form Submission Greeting
 Create a simple HTML form with the following elements:
<form id="nameForm">
<input type="text" id="nameInput" placeholder="Enter your name" />
<button type="submit">Submit</button></form>
<p id="greeting"></p>
 Write a JavaScript function named handleFormSubmit that:
 Prevents the default form submission.
 Retrieves the name entered in the input field.
 Displays a greeting message such as "Hello, [name]!" in the <p>
element with the ID greeting.
 Attach an event listener to the form to trigger the handleFormSubmit
function on submission.

Task 7: Add a List Item


 Create a simple HTML document with the following elements:
<ul id="dynamicList"></ul>
<button id="addItemButton">Add Item</button>
 Write a JavaScript function named addListItem that adds a new <li>
element with the text "New Item" to the unordered list <ul> when the
button is clicked.

Task 8: Remove the Last List Item


 Create a simple HTML document with the following elements:
<ul id="removableList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li></ul>
<button id="removeButton">Remove Last Item</button>
 Write a JavaScript function named removeLastItem that:
 Removes the last <li> element from the unordered list <ul>.
 If the list is empty, displays an alert box with the message "No more
items to remove!".

You might also like