Scribd
Upload
10 views26 pages

Exam JS

Uploaded by

co2022.diksha.poptani
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
10 views26 pages

Exam JS

Uploaded by

co2022.diksha.poptani
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/ 26

Q.

Write a HTML script which displays 2 radio buttons to the users for fruits
and vegetables and 1 option list. When user select fruits radio button
option list should present only fruits names to the user & when user select
vegetable radio button option list should present only vegetable names to
the user. (DYNAMICALLY)

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Option List</title>
<script>
function updateOptions(category) {
// Reference to the select element
var optionList = document.getElementById("options");

// Clear existing options


optionList.innerHTML = "";

// Add new options based on the selected category


if (category === "fruits") {
var fruits = ["Apple", "Banana", "Mango", "Orange"];
fruits.forEach(function(fruit) {
var option = document.createElement("option");
option.value = fruit.toLowerCase();
option.textContent = fruit;
optionList.appendChild(option);
});
} else if (category === "vegetables") {
var vegetables = ["Carrot", "Broccoli", "Spinach", "Potato"];
vegetables.forEach(function(vegetable) {
var option = document.createElement("option");
option.value = vegetable.toLowerCase();
option.textContent = vegetable;
optionList.appendChild(option);
});
}
}
</script>
</head>
<body>
<h1>Select Category</h1>
<!-- Radio buttons for Fruits and Vegetables -->
<input type="radio" name="category" id="fruits" value="fruits"
onclick="updateOptions('fruits')">
<label for="fruits">Fruits</label>
<br>
<input type="radio" name="category" id="vegetables" value="vegetables"
onclick="updateOptions('vegetables')">
<label for="vegetables">Vegetables</label>
<br><br>

<!-- Option list -->


<select id="options">
<option>Select an option</option>
</select>
</body>
</html>

Q. Describe, how to read cookie value and write a cookie value. Explain
with example.

Web Browsers and Servers use HTTP protocol to communicate and HTTP is a
stateless protocol. But for a commercial website, it is required to maintain
session information among different pages. For example, one user registration
ends after completing many pages.

Storing Cookies
The simplest way to create a cookie is to assign a string value to the
document.cookie object, which looks like this. document.cookie = "key1 =
value1;key2 = value2;expires = date"; Here the expires attribute is optional. If you
provide this attribute with a valid date or time, then the cookie will expire on a
given date or time and thereafter, the cookies' value will not be accessible.

<html>
<head>
<script type="text/javascript">
function WriteCookie() {
var customerName = document.myform.customer.value;

if (customerName === "") {


alert("Enter some value!");
return;
}

// Set the cookie without encoding


var cookieValue = customerName;
document.cookie = "name=" + cookieValue + "; path=/";

// Notify the user


alert("Cookie set: name=" + customerName);
}
</script>
</head>
<body>
<form name="myform" action="">
Enter name: <input type="text" name="customer" />
<input type="button" value="Set Cookie" onclick="WriteCookie();" />
</form>
</body>
</html>

Reading Cookies

Reading a cookie is just as simple as writing one, because the value of the
document.cookie object is the cookie. So you can use this string whenever you
want to access the cookie. The document.cookie string will keep a list of
name=value pairs separated by semicolons, where name is the name of a cookie
and value is its string value.
<html>
<head>
<script type="text/javascript">
function ReadCookie() {
var name = "name="; // Cookie key we're looking for
var decodedCookie = document.cookie; // Get all cookies
var ca = decodedCookie.split(';'); // Split cookies by semicolon

for (var i = 0; i < ca.length; i++) {


var c = ca[i].trim(); // Remove any extra spaces
if (c.indexOf(name) == 0) {
alert("Cookie found: " + c.substring(name.length, c.length)); // Show
the cookie value
return;
}
}
alert("Cookie 'name' not found!"); // If no cookie found
}
</script>
</head>
<body>
<h1>Read Cookie Example</h1>
<button onclick="ReadCookie()">Read Cookie</button>
</body>
</html>

Q.Write a java script that displays textboxes for accepting name & email ID
& a submit button. Write java script code such that when the user clicks on
submit button (1) Name Validation (2) Email ID Validation

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validateForm() {
// Name validation
var name = document.getElementById("name").value;
if (name == "") {
alert("Name must be filled out");
return false;
}

// Email ID validation
var email = document.getElementById("email").value;
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (email == "") {
alert("Email must be filled out");
return false;
} else if (!emailPattern.test(email)) {
alert("Please enter a valid email ID");
return false;
}

// If both validations pass


alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h1>Form Validation</h1>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>

<label for="email">Email ID:</label>


<input type="text" id="email" name="email">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Q. Describe how to evaluate checkbox selection. Explain with suitable
example.

In JavaScript, you can evaluate the selection of a checkbox by checking its


checked property. This property returns true if the checkbox is selected
(checked), and false if it is not selected (unchecked).

<!DOCTYPE html>
<html>
<head>
<title>Checkbox Selection</title>
<script type="text/javascript">
function evaluateCheckbox() {
var checkbox = document.getElementById("subscribe");
if (checkbox.checked) {
alert("You are subscribed to the newsletter.");
} else {
alert("You are not subscribed.");
}
}
</script>
</head>
<body>
<h1>Subscribe to Newsletter</h1>
<form>
<label for="subscribe">Subscribe to Newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">
<br><br>
<input type="button" value="Submit" onclick="evaluateCheckbox()">
</form>
</body>
</html>
Q. Write a javascript to create a pull-down menu with three options
[Google, MSBTE, Yahoo] once the user will select one of the options then
user will be redirected to that site.

<!DOCTYPE html>
<html>
<head>
<title>Redirect Based on Selection</title>
<script type="text/javascript">
function redirectToSite() {
var selectedSite = document.getElementById("siteSelect").value;
if (selectedSite != "") {
window.location.href = selectedSite; // Redirect to selected site
}
}
</script>
</head>
<body>
<h1>Select a Website</h1>
<form>
<label for="siteSelect">Choose a website:</label>
<select id="siteSelect" onchange="redirectToSite()">
<option value="">--Select--</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.msbte.org.in">MSBTE</option>
<option value="https://www.yahoo.com">Yahoo</option>
</select>
</form>
</body>
</html>
Q. Explain text rollover with suitable example?

<!DOCTYPE html>
<html>
<head>
<title>Text Rollover Using onmouseover</title>
<script type="text/javascript">
// Function to change the text style on mouseover
function rolloverOn() {
var element = document.getElementById("text");
element.style.color = "#FF6347"; // Change text color
element.style.fontSize = "28px"; // Increase font size
}

// Function to reset the text style on mouseout


function rolloverOff() {
var element = document.getElementById("text");
element.style.color = "#000000"; // Reset text color to black
element.style.fontSize = "24px"; // Reset font size
}
</script>
</head>
<body>

<h1>Text Rollover Using onmouseover</h1>


<p id="text" onmouseover="rolloverOn()" onmouseout="rolloverOff()">Hover
over this text!</p>

</body>
</html>
Create a slideshow with the group of three images, also simulate next and
previous transition between slides in your Java Script.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Slideshow</title>
<script>
// Array of image filenames
var pics = new Array('1.jpg', '2.jpg', '3.jpg');
var count = 0;

// Function to change the slide


function slideshow(status) {
if (document.images) {
count = count + status;

// Check if count exceeds the array bounds


if (count > (pics.length - 1)) {
count = 0; // Loop back to the first image
}
if (count < 0) {
count = pics.length - 1; // Loop back to the last image
}
// Change the image source
document.images.img1.src = pics[count];
}
}
</script>
</head>
<body>

<!-- Display the current image -->


<img src="1.jpg" width="200" name="img1">
<br>

<!-- Navigation buttons to go next and back -->


<input type="button" value="Next" onclick="slideshow(1)">
<input type="button" value="Back" onclick="slideshow(-1)">

</body>
</html>

Write a Java script program which computes, the average marks of the
following students then, this average is used to determine the
corresponding grade.
Student Name Marks Sumit 80 Kalpesh 77 Amit 88 Tejas 93 Abhishek 65.
The grades are computed as follows : Range Grade <60 E <70 D <80 C <90
B <100 A

<html>
<head>
<title>Compute the Average Marks and Grade</title>
</head>
<body>
<script>
// Student names and marks
var students = [
['Summit', 80],
['Kalpesh', 77],
['Amit', 88],
['Tejas', 93],
['Abhishek', 65]
];

var totalMarks = 0;

// Calculate total marks


for (var i = 0; i < students.length; i++) {
totalMarks += students[i][1];
}
// Calculate average marks
var averageMarks = totalMarks / students.length;

// Display average marks


document.write("<h2>Average Marks: " + averageMarks.toFixed(2) +
"</h2>");

// Determine and display the grade based on average marks


document.write("<h3>Grade: ");

if (averageMarks < 60) {


document.write("E</h3>");
} else if (averageMarks < 70) {
document.write("D</h3>");
} else if (averageMarks < 80) {
document.write("C</h3>");
} else if (averageMarks < 90) {
document.write("B</h3>");
} else {
document.write("A</h3>");
}
</script>
</body>
</html>

Q. How to finding non matching characters in regular expression? Explain


with suitable example.

[abcde..] - Any character between the brackets


[A-Z] - Any character from uppercase A to uppercase Z
[a-z] - Any character from lowercase a to lowercase z

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Non-Matching Characters Example</title>
<script>
function findNonMatchingChars() {
var str = "Hello World";
var regex = /[^aeiou]/g; // Match characters that are not vowels
var result = str.match(regex); // Get non-vowel characters

// Display the result


alert("Non-vowel characters: " + result.join(", "));
}
</script>
</head>
<body>
<button onclick="findNonMatchingChars()">Find Non-Vowels</button>
</body>
</html>

Q. What is context menu? How to create it? Explain with example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Context Menu Example</title>
<script>
// Function to handle the right-click context menu
function showContextMenu(event) {
event.preventDefault(); // Prevent the default context menu from showing

// Get the context menu and position it based on the mouse position
var contextMenu = document.getElementById('contextMenu');
contextMenu.style.left = event.pageX + 'px';
contextMenu.style.top = event.pageY + 'px';
contextMenu.style.display = 'block'; // Display the custom context menu
}

// Function to hide the context menu when clicking elsewhere


function hideContextMenu() {
var contextMenu = document.getElementById('contextMenu');
contextMenu.style.display = 'none'; // Hide the context menu
}

// Function to handle click on each menu item


function menuItemClick(option) {
alert(option + " clicked");
hideContextMenu();
}

// Add event listener for the document to hide the context menu on click
document.addEventListener('click', hideContextMenu);
</script>
</head>
<body>

<h2>Right-Click Anywhere to Open the Context Menu</h2>

<!-- The context menu container (hidden by default) -->


<div id="contextMenu" style="display: none; position: absolute;">
<ul style="list-style-type: none; margin: 0; padding: 0; background-color:
#f1f1f1; border: 1px solid #ddd;">
<li onclick="menuItemClick('Option 1')">Option 1</li>
<li onclick="menuItemClick('Option 2')">Option 2</li>
<li onclick="menuItemClick('Option 3')">Option 3</li>
</ul>
</div>

<script>
// Add event listener to show the custom context menu when right-clicking on
the page
document.addEventListener('contextmenu', showContextMenu);
</script>
</body>
</html>

Q. What is a frame? How to create? Explain with example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Iframes Example</title>
</head>
<body>
<h1>Webpage with Three Iframes</h1>

<h2>Iframe 1: Example Website</h2>


<iframe src="https://www.example.com" width="600" height="400"
title="Example Website"></iframe>

<h2>Iframe 2: Wikipedia</h2>
<iframe src="https://www.wikipedia.org" width="600" height="400"
title="Wikipedia"></iframe>

</body>
</html>
Q.SLIDESHOW with links

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Slideshow with Links</title>
<script>
// Array of image URLs from Google
var pics = new Array(
'1.jpg', // Example image from Google
'2.jpg', // Example image from Google
'3.jpg' // Example image from Google
);

// Array of corresponding links for the images


var links = new Array(
'https://www.google.com/', // Link for first image
'https://www.vpt.edu.in/', // Link for second image
'https://www.msbte.org.in/' // Link for third image
);

var count = 0;

// Function to change the slide


function slideshow() {
if (document.images) {
// Increment the count to move to the next image
count++;

// Check if count exceeds the array bounds


if (count >= pics.length) {
count = 0; // Loop back to the first image
}

// Change the image source


document.images.img1.src = pics[count];
document.getElementById("bannerLink").href = links[count]; // Update
the link
}
}

// Set an interval to change the image every 3 seconds (3000 ms)


setInterval(slideshow, 3000);
</script>
</head>
<body>
<center>
<a id="bannerLink" href="https://www.google.com/" target="_blank">
<img src="1.jpg" width="400" height="200" name="img1">
</a>
</center>
</body>
</html>

Q. Write a Javascript to create menu using “folding tree menu”.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Folding Tree Menu with "->"</title>
<style>
/* Basic styles for the menu */
ul {
list-style-type: none;
padding-left: 20px;
}
li {
cursor: pointer;
padding: 5px;
font-size: 16px;
}
.nested {
display: none;
}
.caret {
padding-right: 10px;
}
/* Symbol styles */
.folder-symbol {
font-weight: bold;
padding-right: 5px;
}
</style>
</head>
<body>

<h2>Folding Tree Menu with "->" for Directories with Subdirectories</h2>

<!-- Root menu -->


<ul id="menu">
<li><span class="caret">Home</span></li>
<li>
<span class="caret folder-symbol">Services -></span>
<ul class="nested">
<li>Web Development</li>
<li>App Development</li>
<li>SEO</li>
</ul>
</li>
<li>
<span class="caret folder-symbol">About Us -></span>
<ul class="nested">
<li>Our Team</li>
<li>Our Story</li>
</ul>
</li>
<li><span class="caret">Contact</span></li>
</ul>

<script>
// Function to toggle the nested menu visibility
function toggleMenu(event) {
var currentCaret = event.target;
var nestedList = currentCaret.parentElement.querySelector('.nested');

// Toggle visibility of the nested list


if (nestedList) {
nestedList.style.display = nestedList.style.display === 'block' ? 'none' :
'block';

// Toggle caret icon for expanded/collapsed state


currentCaret.classList.toggle('caret-down');
}
}

// Attach event listeners to all caret elements


document.querySelectorAll('.caret').forEach(function(caret) {
caret.addEventListener('click', toggleMenu);
});
</script>

</body>
</html>

Q. Write HTML code to design a form that display two textboxes for
accepting two numbers,one textbox for accepting result and two buttons as
ADDITION and SUBTRACTION.Write proper JavaScript such that when the
user clicks on any one of the button,respective operation will be performed
on two numbers and result will be displayed in result textbox.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Form</title>
<script>
// Function to perform addition
function performAddition() {
var num1 = parseFloat(document.getElementById('number1').value);
var num2 = parseFloat(document.getElementById('number2').value);

// Check for valid inputs


if (isNaN(num1) || isNaN(num2)) {
alert("Please enter valid numbers.");
return;
}

// Perform addition
var result = num1 + num2;
document.getElementById('result').value = result;
}

// Function to perform subtraction


function performSubtraction() {
var num1 = parseFloat(document.getElementById('number1').value);
var num2 = parseFloat(document.getElementById('number2').value);

// Check for valid inputs


if (isNaN(num1) || isNaN(num2)) {
alert("Please enter valid numbers.");
return;
}

// Perform subtraction
var result = num1 - num2;
document.getElementById('result').value = result;
}
</script>
</head>
<body>
<h2>Simple Calculator</h2>
<form>
<label for="number1">Enter First Number:</label>
<input type="text" id="number1" name="number1"><br><br>

<label for="number2">Enter Second Number:</label>


<input type="text" id="number2" name="number2"><br><br>

<label for="result">Result:</label>
<input type="text" id="result" name="result" readonly><br><br>

<input type="button" value="Addition" onclick="performAddition()">


<input type="button" value="Subtraction" onclick="performSubtraction()">
</form>
</body>
</html>

Q. Write HTML code to design a form that dsiplays two buttons START and
STOP.Write a JavaScript code such that when user clicks on START button,
real time digital clock will be displayed on screen. When user clicks on
STOP button,clock will stop displaying time(Use Timer Methods)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Digital Clock</title>
<script>
var timer; // Variable to store the timer reference

// Function to start the clock


function startClock() {
if (!timer) { // Ensure no multiple timers are running
timer = setInterval(displayTime, 1000);
}
}

// Function to stop the clock


function stopClock() {
clearInterval(timer); // Stop the timer
timer = null; // Reset the timer variable
}

// Function to display the current time


function displayTime() {
var todayTime = new Date();
var hours = String(todayTime.getHours()).padStart(2, '0');
var minutes = String(todayTime.getMinutes()).padStart(2, '0');
var seconds = String(todayTime.getSeconds()).padStart(2, '0');
document.getElementById('clock').innerText = hours + ":" + minutes + ":"
+ seconds;
}
</script>
</head>
<body>
<h2>Digital Clock</h2>
<div id="clock" style="font-size: 24px; font-weight: bold;">00:00:00</div>
<br>
<form>
<input type="button" value="START" onclick="startClock()">
<input type="button" value="STOP" onclick="stopClock()">
</form>
</body>
</html>
Q. Write HTML code to design a form that displays textboxes for accepting
UserID and Aadhar No. and a SUBMIT button. UserlD should contain 10
alphanumeric characters and must start with Capital Letter. Aadhar No.
should contain 12 digits in the format nnnn nnnn nnnn. Write JavaScript
code to validate the UserID and Aadhar No. when the user clicks on
SUBMIT button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<script>
function validateForm() {
// Get input values
var userId = document.getElementById("userId").value;
var aadharNo = document.getElementById("aadharNo").value;

// UserID validation: 10 alphanumeric characters starting with a capital


letter
var userIdPattern = /^[A-Z][a-zA-Z0-9]{9}$/;
if (!userIdPattern.test(userId)) {
alert("Invalid UserID! It should contain 10 alphanumeric characters and
start with a capital letter.");
return false;
}

// Aadhar No validation: 12 digits in the format nnnn nnnn nnnn


var aadharPattern = /^\d{4} \d{4} \d{4}$/;
if (!aadharPattern.test(aadharNo)) {
alert("Invalid Aadhar No! It should contain 12 digits in the format nnnn
nnnn nnnn.");
return false;
}

// If both validations pass


alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<h2>UserID and Aadhar No. Form</h2>
<form onsubmit="return validateForm()">
<label for="userId">UserID:</label>
<input type="text" id="userId" name="userId" required>
<br><br>
<label for="aadharNo">Aadhar No.:</label>
<input type="text" id="aadharNo" name="aadharNo" required>
<br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

Write a JavaScript that accents user's first name and domain name of
Organization from user., The JavaScript then forms email address as name
and displays the results in the browser window.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Email Address</title>
<script>
function createEmail() {
// Get values from the input fields
var firstName = document.getElementById("firstName").value.trim();
var domain = document.getElementById("domain").value.trim();

// Check if both fields are filled


if (firstName === "" || domain === "") {
alert("Please enter both first name and domain!");
return;
}

// Form the email address


var email = firstName + "@" + domain;
// Display the email address
document.getElementById("result").innerHTML = "Your email address is:
<b>" + email + "</b>";
}
</script>
</head>
<body>
<h1>Create Email Address</h1>
<form onsubmit="return false;">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" placeholder="Enter your first
name"><br><br>

<label for="domain">Domain:</label>
<input type="text" id="domain" placeholder="Enter organization domain
(e.g., example.com)"><br><br>

<button type="button" onclick="createEmail()">Create Email</button>


</form>

<p id="result" style="margin-top: 20px;"></p>


</body>
</html>

Q.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laptop Brands</title>
<script>
function showLaptopImage(brand) {
// Map laptop brands to images
var laptopImages = {
"Dell": "https://via.placeholder.com/300x200?text=Dell",
"HP": "https://via.placeholder.com/300x200?text=HP",
"Lenovo": "https://via.placeholder.com/300x200?text=Lenovo",
"Apple": "https://via.placeholder.com/300x200?text=Apple",
"Asus": "https://via.placeholder.com/300x200?text=Asus"
};

// Change the image source based on the selected brand


document.getElementById("laptopImage").src = laptopImages[brand];
}
</script>
</head>
<body>
<h1>Select a Laptop Brand</h1>
<ul>
<li><a href="#" onclick="showLaptopImage('Dell')">Dell</a></li>
<li><a href="#" onclick="showLaptopImage('HP')">HP</a></li>
<li><a href="#" onclick="showLaptopImage('Lenovo')">Lenovo</a></li>
<li><a href="#" onclick="showLaptopImage('Apple')">Apple</a></li>
<li><a href="#" onclick="showLaptopImage('Asus')">Asus</a></li>
</ul>

<h2>Selected Laptop:</h2>
<img id="laptopImage"
src="https://via.placeholder.com/300x200?text=Select+a+Laptop" alt="Laptop
Image">
</body>
</html>
Q.Write a JavaScript that demonstrates use of floating menu alongwith
respective HTML script.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Floating Menu</title>
<style>
#menu {
position: fixed;
top: 40px;
left: 40px;
background: lightgray;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="menu">
<h4>Menu</h4>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>

<div style="margin-top: 300px;">


<h2 id="section1">Section 1</h2>
<p>Content for section 1.</p>
<h2 id="section2">Section 2</h2>
<p>Content for section 2.</p>
<h2 id="section3">Section 3</h2>
<p>Content for section 3.</p>
</div>
</body>
</html>

You might also like