Assignments Of Day 10
DOM Manipulation
Assignments on DOM Manipulation with Solutions
Assignment 1: Change Text Content on Button Click
Task: Create a button that, when clicked, changes the text of a paragraph element from "Hello World" to "Hello JavaScript".
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text Content</title>
</head>
<body>
<p id="text">Hello World</p>
<button id="changeTextBtn">Change Text</button>
<script>
// Get references to the elements
const textParagraph = document.getElementById('text');
const changeTextBtn = document.getElementById('changeTextBtn');
// Add event listener to the button
changeTextBtn.addEventListener('click', function() {
textParagraph.textContent = 'Hello JavaScript'; // Change the text content
});
</script>
</body>
</html>
Assignment 2: Change Background Color on Hover
Task: Write a program that changes the background color of a <div> to blue when the mouse hovers over it, and resets the color back to white when the mouse leaves the element.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background on Hover</title>
</head>
<body>
<div id="hoverDiv" style="width: 200px; height: 200px; background-color: white; border: 1px solid black;">
Hover over me!
</div>
<script>
// Get reference to the div element
const hoverDiv = document.getElementById('hoverDiv');
// Add mouseenter event listener
hoverDiv.addEventListener('mouseenter', function() {
hoverDiv.style.backgroundColor = 'blue'; // Change background to blue
});
// Add mouseleave event listener
hoverDiv.addEventListener('mouseleave', function() {
hoverDiv.style.backgroundColor = 'white'; // Reset background to white
});
</script>
</body>
</html>
Assignment 3: Change Button Text and Style on Click
Task: Create a button that changes both its text and its style when clicked. The button should change its text to "Clicked!" and change its background color to green when clicked.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Text and Style</title>
</head>
<body>
<button id="clickButton">Click Me</button>
<script>
// Get reference to the button
const clickButton = document.getElementById('clickButton');
// Add click event listener
clickButton.addEventListener('click', function() {
clickButton.textContent = 'Clicked!'; // Change button text
clickButton.style.backgroundColor = 'green'; // Change background color
clickButton.style.color = 'white'; // Change text color to white
});
</script>
</body>
</html>
Assignment 4: Toggle Visibility of a Paragraph
Task: Create a button that toggles the visibility of a paragraph each time it is clicked (i.e., hide the paragraph if it's visible and show it if it's hidden).
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Visibility</title>
</head>
<body>
<p id="toggleParagraph">This is a toggleable paragraph.</p>
<button id="toggleButton">Toggle Visibility</button>
<script>
// Get references to the elements
const toggleParagraph = document.getElementById('toggleParagraph');
const toggleButton = document.getElementById('toggleButton');
// Add click event listener to the button
toggleButton.addEventListener('click', function() {
if (toggleParagraph.style.display === 'none') {
toggleParagraph.style.display = 'block'; // Show the paragraph
} else {
toggleParagraph.style.display = 'none'; // Hide the paragraph
}
});
</script>
</body>
</html>
Assignment 5: Change Font Size on Button Click
Task: Create a button that changes the font size of a paragraph from 16px to 30px when clicked.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Font Size</title>
</head>
<body>
<p id="textParagraph">This is a text with dynamic font size.</p>
<button id="fontSizeButton">Increase Font Size</button>
<script>
// Get references to the elements
const textParagraph = document.getElementById('textParagraph');
const fontSizeButton = document.getElementById('fontSizeButton');
// Set the initial font size
textParagraph.style.fontSize = '16px';
// Add click event listener to the button
fontSizeButton.addEventListener('click', function() {
textParagraph.style.fontSize = '30px'; // Change the font size to 30px
});
</script>
</body>
</html>
Assignment 6: Add List Items Dynamically
Task: Create an input field and a button. When the button is clicked, the text in the input field should be added as a new list item (<li>) to an unordered list.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic List</title>
</head>
<body>
<input type="text" id="listInput" placeholder="Enter list item">
<button id="addItemButton">Add Item</button>
<ul id="itemList"></ul>
<script>
// Get references to the elements
const listInput = document.getElementById('listInput');
const addItemButton = document.getElementById('addItemButton');
const itemList = document.getElementById('itemList');
// Add click event listener to the button
addItemButton.addEventListener('click', function() {
// Get the value of the input field
const newItemText = listInput.value;
// Create a new list item
const newListItem = document.createElement('li');
newListItem.textContent = newItemText;
// Append the new item to the list
itemList.appendChild(newListItem);
// Clear the input field
listInput.value = '';
});
</script>
</body>
</html>
Assignment 7: Change Multiple Paragraphs Style on Button Click
Task: Create multiple <p> elements on the page. When a button is clicked, change the background color of all paragraphs to light gray.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Paragraph Styles</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<button id="changeStyleButton">Change Styles</button>
<script>
// Get references to the button and all paragraphs
const paragraphs = document.querySelectorAll('p');
const changeStyleButton = document.getElementById('changeStyleButton');
// Add click event listener to the button
changeStyleButton.addEventListener('click', function() {
paragraphs.forEach(function(paragraph) {
paragraph.style.backgroundColor = 'lightgray'; // Change background color
});
});
</script>
</body>
</html>
Summary of Assignments:
These assignments will help you practice various aspects of DOM manipulation, including:
- Selecting elements (getElementById(), querySelector()).
- Modifying content (textContent, innerHTML).
- Changing styles (style property).
- Handling events (like click, mouseenter, and mouseleave).
- Creating and modifying DOM elements dynamically.
Assignment 8: Toggle a Class on Button Click
Task: Create a button that toggles the class highlight on a paragraph each time it is clicked. Initially, the paragraph should have a normal style, and once the button is clicked, it should get highlighted.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Class</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="para">This is a paragraph. Click the button to highlight it!</p>
<button id="toggleButton">Toggle Highlight</button>
<script>
// Get references to the elements
const paragraph = document.getElementById('para');
const toggleButton = document.getElementById('toggleButton');
// Add click event listener to toggle the class
toggleButton.addEventListener('click', function() {
paragraph.classList.toggle('highlight');
});
</script>
</body>
</html>
Assignment 9: Remove List Item on Click
Task: Create an unordered list with a few items. When any list item is clicked, it should be removed from the list.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove List Item</title>
</head>
<body>
<ul id="itemList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script>
// Get reference to the list
const itemList = document.getElementById('itemList');
// Add click event listener to the list
itemList.addEventListener('click', function(event) {
// Check if the clicked element is a list item
if (event.target.tagName === 'LI') {
event.target.remove(); // Remove the clicked item
}
});
</script>
</body>
</html>
Assignment 10: Change Image Source on Button Click
Task: Create an image and a button. When the button is clicked, change the image's source to another image.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Image Source</title>
</head>
<body>
<img id="image" src="image1.jpg" alt="Image" width="300">
<button id="changeImageButton">Change Image</button>
<script>
// Get reference to the image and button
const image = document.getElementById('image');
const changeImageButton = document.getElementById('changeImageButton');
// Add click event listener to the button
changeImageButton.addEventListener('click', function() {
image.src = 'image2.jpg'; // Change the image source
});
</script>
</body>
</html>
Assignment 11: Display Alert on Form Submission
Task: Create a form with a text input and a submit button. When the form is submitted, display an alert showing the value entered in the text input.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Alert</title>
</head>
<body>
<form id="myForm">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
<script>
// Get references to the form and input
const form = document.getElementById('myForm');
const nameInput = document.getElementById('name');
// Add submit event listener to the form
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting
alert('Hello, ' + nameInput.value + '!'); // Display alert with input value
});
</script>
</body>
</html>
Assignment 12: Add/Remove a Border on Hover
Task: Create a <div> element with some content. When the mouse hovers over the div, it should show a border. When the mouse leaves, the border should be removed.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Border</title>
<style>
#hoverDiv {
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="hoverDiv">Hover over me!</div>
<script>
// Get reference to the div
const hoverDiv = document.getElementById('hoverDiv');
// Add mouseenter event listener
hoverDiv.addEventListener('mouseenter', function() {
hoverDiv.style.border = '5px solid red'; // Add border on hover
});
// Add mouseleave event listener
hoverDiv.addEventListener('mouseleave', function() {
hoverDiv.style.border = ''; // Remove the border when mouse leaves
});
</script>
</body>
</html>
Assignment 13: Create a Countdown Timer
Task: Create a countdown timer that decreases from 10 to 0 and displays the remaining time in a paragraph. When it reaches 0, the timer should stop.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
</head>
<body>
<p id="countdown">10</p>
<script>
let timeLeft = 10; // Set the initial time
const countdownElement = document.getElementById('countdown');
// Set interval to decrease the time every second
const timer = setInterval(function() {
timeLeft--;
countdownElement.textContent = timeLeft;
if (timeLeft === 0) {
clearInterval(timer); // Stop the timer when it reaches 0
}
}, 1000); // 1000ms = 1 second
</script>
</body>
</html>
Assignment 14: Change Font Color of All List Items
Task: Change the font color of all <li> elements on the page to blue when a button is clicked.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Font Color</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button id="changeColorButton">Change Font Color</button>
<script>
// Get references to the button and all list items
const changeColorButton = document.getElementById('changeColorButton');
const listItems = document.querySelectorAll('li');
// Add click event listener to the button
changeColorButton.addEventListener('click', function() {
listItems.forEach(function(item) {
item.style.color = 'blue'; // Change font color to blue
});
});
</script>
</body>
</html>
Assignment 15: Show/Hide Paragraph on Button Click
Task: Create a paragraph with some content. Create a button that toggles the visibility of the paragraph when clicked.
Solution: HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show/Hide Paragraph</title>
</head>
<body>
<p id="myParagraph">This is a toggleable paragraph.</p>
<button id="toggleButton">Show/Hide Paragraph</button>
<script>
// Get references to the elements
const paragraph = document.getElementById('myParagraph');
const toggleButton = document.getElementById('toggleButton');
// Add event listener to the button
toggleButton.addEventListener('click', function() {
if (paragraph.style.display === 'none') {
paragraph.style.display = 'block'; // Show the paragraph
} else {
paragraph.style.display = 'none'; // Hide the paragraph
}
});
</script>
</body>
</html>
