JavaScript Topics
Day 13 :
- DOM (Document Object Model) manipulation
DOM (Document Object Model) manipulation:
About.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./Home.css" />
</head>
<body>
<header>
<h1>Hema Coding School</h1>
</header>
<nav>
<a href="./Home.html">Home</a>
<a href="./Courses.html">Courses</a>
<a href="/About.html">About Us</a>
<a href="./Contact.html">Contact</a>
</nav>
<main>
<section>
<h2 id="about"></h2>
<p class="aboutParagraph"></p>
</section>
<section>
<h3></h3>
<p>Our Full Stack Web Development course is designed to equip you with
the skills needed to become a proficient web developer capable of
handling both front-end and back-end development.</p>
<p class="highlight"></p>
<ul id="courseHighlightsList">
<li>Comprehensive coverage of HTML, CSS, and JavaScript for building
interactive and responsive user interfaces.</li>
</ul>
</section>
</main>
<footer>
<p>© 2024 Hema Coding School. All rights reserved.</p>
</footer>
<script>
var subHeading = document.getElementById("about");
subHeading.textContent = "About : Hema Coding School";
var paragraphElement = document.getElementsByClassName("aboutParagraph");
paragraphElement[0].textContent =
"Hema Coding School is dedicated to providing high-quality coding education. Our experienced instructors are committed to helping you build a strong foundation in programming.";
var h3Element= document.getElementsByTagName('h3');
h3Element[0].textContent="Full Stack Web Development Course";
var highlightElement = document.querySelector('.highlight');
highlightElement.innerHTML = "<b>Course Highlights:</b>";
var paragraphStyle = document.querySelectorAll('p');
for(var i=0; i< paragraphStyle.length; i++){
paragraphStyle[i].style.color = "red";
}
var highlightsList = document.getElementById("courseHighlightsList");
var listItemsContent = [ "Introduction to Responsive Web Design",
"Advanced JavaScript Concepts",
"Server-Side Rendering with Node.js",
"Database Design and Management",
"Git and Version Control",
"Real-world Project Development"]
// var newListItem = document.createElement('li');
// newListItem.textContent="Introduction to Responsive Web Design";
// highlightsList.appendChild(newListItem)
for(var i =0; i< listItemsContent.length; i++){
var newListItem = document.createElement('li');
newListItem.textContent=listItemsContent[i];
highlightsList.appendChild(newListItem)
}
</script>
</body>
</html>
Task:
Create an HTML file with the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation Task</title>
<style>
/* Add any additional styling if needed */
</style>
</head>
<body>
<div id="mainContainer">
<h1>Welcome to DOM Manipulation Task</h1>
<p id="taskDescription">This is your DOM manipulation task. Follow the instructions below to complete it.</p>
<div id="taskContainer">
<!-- Your task content will go here -->
</div>
<button id="submitButton">Submit Task</button>
</div>
<script src="dom-manipulation-task.js"></script>
</body>
</html>
1. Create a JavaScript file named dom-manipulation-task.js.
2. Inside the JavaScript file, complete the following tasks:
a. Append three new paragraphs to the taskContainer with the following content:
"Task 1: Use createElement and appendChild to create and add this paragraph."
"Task 2: Change the text content of this paragraph using textContent property."
"Task 3: Add a class 'highlight' to this paragraph using classList."
b. Change the background color of the mainContainer to a light gray color.
c. Attach a click event listener to the submitButton button. When the button is clicked, display an alert message saying "Task completed!".
d. Bonus: Add additional styling to make your page visually appealing.
3. Open the HTML file in a web browser and verify that your DOM manipulation tasks are working as expected.
Interview Questions:
1. How does the DOM differ from HTML?
2. How do you select elements in the DOM?
3. What is the difference between innerHTML and textContent?
No comments:
Post a Comment