DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 06
Title of Experiment Create a webpage using form elements.
6.1: WAP to create a form for creating Gmail account using form elements.
<!DOCTYPE html>
<html>
<head>
<title>Gmail Registration</title>
</head>
<body>
<h2>Create a Gmail Account</h2>
<form id="registrationForm">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" required><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" required><br><br>
<button type="button" onclick="submitForm()">Create Account</button> </form>
<script> function submitForm() { const
firstName =
[Link]("firstName").value; const lastName =
[Link]("lastName").value; const email =
[Link]("email").value; const password =
[Link]("password").value;
// Add your validation logic here
Page | 1
if (email && password) {
// You can perform further actions like sending data to a server here
alert("Account created successfully!");
} else {
alert("Please fill in all required fields.");
}
}
</script>
</body>
</html>
6.2:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Evaluation</title>
</head>
<body>
<h2>Checkbox Evaluation</h2>
<form id="checkboxForm">
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" id="checkbox1"><br><br>
<label for="checkbox2">Checkbox 2</label>
<input type="checkbox" id="checkbox2"><br><br>
<label for="checkbox3">Checkbox 3</label>
Page | 2
<input type="checkbox" id="checkbox3"><br><br>
<button type="button" onclick="evaluateCheckboxes()">Evaluate
Checkboxes</button>
</form>
<p id="result"></p>
<script>
function evaluateCheckboxes() { const checkbox1 =
[Link]("checkbox1"); const checkbox2 =
[Link]("checkbox2"); const checkbox3 =
[Link]("checkbox3"); const resultElement =
[Link]("result"); let selectedCheckboxes = [];
if ([Link]) {
[Link]("Checkbox 1");
}
if ([Link]) {
[Link]("Checkbox 2");
}
if ([Link]) {
[Link]("Checkbox 3");
}
if ([Link] > 0) {
[Link] = "Selected Checkboxes: " +
[Link](", ");
} else {
[Link] = "No checkboxes selected.";
}
}
</script>
</body>
</html>
Page | 3
Page | 4
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 07
Title of Experiment Create a webpage to implement form events. Part 1
7.1 Write a program for changing the option list dynamically.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Option List</title>
</head>
<body>
<h1>Dynamic Option List</h1>
<label for="selectFruit">Select a fruit: </label>
<select id="selectFruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
<input type="text" id="newFruit" placeholder="Enter a new fruit">
<button onclick="addCustomOption()">Add Custom Option</button>
<script>
function addCustomOption() {
var input = [Link]('newFruit');
var newFruitName = [Link];
if ([Link]() !== '') {
var select = [Link]('selectFruit');
var option = [Link]('option');
Page | 5
[Link] = [Link]();
[Link] = newFruitName;
[Link](option);
[Link] = '';
} else {
alert("Please enter a valid fruit name.");
}
}
</script>
</body>
</html>
7.2 Develop a program for as we enter the firstname and lastname , email is automatically
generated.
<!DOCTYPE html>
<html>
<head>
<title>Email Generator</title>
</head>
<body>
<h2>Enter Your First Name and Last Name:</h2>
<input type="text" id="firstName" placeholder="First Name">
<input type="text" id="lastName" placeholder="Last Name">
<button onclick="generateEmail()">Generate Email</button>
Page | 6
<h3>Generated Email:</h3>
<p id="generatedEmail"></p>
<script>
function generateEmail() {
const firstName = [Link]('firstName').value;
const lastName = [Link]('lastName').value;
if (firstName && lastName) {
const email = `${[Link]()}.${[Link]()}@[Link]`;
[Link]('generatedEmail').textContent = email;
} else {
alert('Please enter both first name and last name.');
}
}
</script>
</body>
</html>
Page | 7
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 08
Title of Experiment Create a webpage to implement form events. Part 2
8.1 Write a program to demonstrate the use of onchange event.
<!DOCTYPE html>
<html>
<head>
<title>Onchange Event Example</title>
</head>
<body>
<h2>Select a Color:</h2>
<select id="colorSelect" onchange="updateColor()">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<div id="colorDisplay">Selected color will be displayed here.</div>
<script>
function updateColor() {
const colorSelect = [Link]('colorSelect');
const selectedColor = [Link];
const colorDisplay = [Link]('colorDisplay');
[Link] = `You selected: ${selectedColor}`;
[Link] = selectedColor;
}
</script>
</body>
</html>
Page | 8
8.2 Write a JavaScript program to demonstrate the addEventListener ().
<!DOCTYPE html>
<html>
<head>
<title>addEventListener() Example</title>
</head>
<body>
<h2>Click the Button:</h2>
<button id="myButton">Click Me</button>
<p id="message"></p>
<script>
// Get the button and the message element by their IDs
const button = [Link]('myButton');
const messageElement = [Link]('message');
// Define a function to handle the button click event
function handleClick() {
[Link] = 'Button Clicked!';
}
// Attach an event listener to the button
[Link]('click', handleClick);
</script>
</body>
</html>
Page | 9
Page | 10
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 09
Title of Experiment Develop a webpage using Intrinsic java functions.
9.1 Write a program to disable and enabled text field.
<!DOCTYPE html>
<html>
<head>
<title>Enable/Disable Text Field</title>
</head>
<body>
<label for="textField">Text Field:</label>
<input type="text" id="textField" disabled>
<button id="enableButton">Enable</button>
<button id="disableButton">Disable</button>
<script>
// Get references to the text field and buttons
const textField = [Link]('textField');
const enableButton = [Link]('enableButton');
const disableButton = [Link]('disableButton');
// Function to enable the text field
function enableTextField() {
[Link]('disabled');
}
// Function to disable the text field
function disableTextField() {
[Link]('disabled', 'true');
}
// Add click event listeners to the buttons
[Link]('click', enableTextField);
[Link]('click', disableTextField);
Page | 11
</script>
</body>
</html>
9.2 Write a JavaScript program to change the value of an element that the user cannot change (a
read-only element)
<!DOCTYPE html>
<html>
<head>
<title>Change Read-Only Element Value</title>
</head>
<body>
<h1>Change Read-Only Element Value</h1>
<p>Read-Only Element: <input type="text" id="readOnlyInput" readonly value="This is read-
only"></p>
<button onclick="changeValue()">Change Value</button>
<script>
function changeValue() {
// Get the read-only input element
var readOnlyInput = [Link]('readOnlyInput');
// Change the value
[Link] = "New value for the read-only element";
}
</script>
</body>
</html>
Page | 12
Page | 13
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 10
Title of Experiment Develop a webpage for creating session and persistent cookies.
Observe the effects with Browser cookie settings.
10.1 Write a program to read the cookie
<!DOCTYPE html>
<html>
<head>
<title>Read Cookie</title>
</head>
<body>
<h1>Read Cookie</h1>
<button onclick="readCookie()">Read Cookie</button>
<script>
function readCookie() {
var cookieValue = [Link]('; ').find(cookie =>
[Link]('exampleCookie='));
if (cookieValue) {
alert("Cookie value: " + [Link]('=')[1]);
} else {
alert("Cookie not found.");
}
}
</script>
</body>
</html>
Page | 14
10.2 Write a program to delete the cookie.
<!DOCTYPE html>
<html>
<head>
<title>Delete Cookie</title>
</head>
<body>
<h1>Delete Cookie</h1>
<button onclick="deleteCookie()">Delete Cookie</button>
<script>
function deleteCookie() {
[Link] = "exampleCookie=; expires=Thu, 01 Jan 1970 [Link] UTC; path=/;";
alert("Cookie deleted.");
}
</script>
</body>
</html>
Page | 15
Page | 16
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 11
Title of Experiment Develop a Web Page for placing the window on the screen and
working with child window.
11.1 Write a program to demonstrate the use of resizeBy() and resizeTo().
<!DOCTYPE html>
<html>
<head>
<title>Window Resize Example</title>
</head>
<body>
<h1>Window Resize Example</h1>
<button onclick="resizeWindowBy()">Resize Window by 100x100</button>
<button onclick="resizeWindowTo()">Resize Window to 800x600</button>
<script>
function resizeWindowBy() {
// Resize the window by 100 pixels horizontally and 100 pixels vertically
[Link](100, 100);
}
function resizeWindowTo() {
// Resize the window to a specific width and height (800x600)
[Link](800, 600);
}
</script>
</body>
</html>
Page | 17
11.2 Write a program to demonstrate the use of scrollBy () and scrollTo().
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Example</title>
</head>
<body>
<h1>Scrolling Example</h1>
<button onclick="scrollByExample()">Scroll by 100 pixels</button>
<button onclick="scrollToExample()">Scroll to the top of the page</button>
<script>
function scrollByExample() {
// Scroll the window by 100 pixels horizontally and 100 pixels vertically
[Link](100, 100);
}
function scrollToExample() {
// Scroll the window to a specific position (top of the page)
[Link](0, 0);
}
</script>
</body>
</html>
Page | 18
11.3 Writing a number after a delay using setInterval ( ) method. In this example, numbers are
displayed in a textarea after a 1 second.
<!DOCTYPE html>
<html>
<head>
<title>Display Numbers with setInterval</title>
</head>
<body>
<h1>Display Numbers with setInterval</h1>
<textarea id="numberTextArea" rows="10" cols="30"></textarea>
<script>
var numberTextArea = [Link]('numberTextArea');
var count = 1;
function displayNumber() {
if (count <= 10) {
[Link] += count + "\n";
count++;
} else {
clearInterval(numberInterval);
}
}
var numberInterval = setInterval(displayNumber, 1000); // 1000 milliseconds = 1 second
</script>
</body>
</html>
Page | 19
Page | 20
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 12
Title of Experiment Develop a Web Page for validation of form fields using regular
expressions.
12.1
<!DOCTYPE html>
<html>
<head>
<title>Aadhar Card Validation</title>
</head>
<body>
<h2>Aadhar Card Validation</h2>
<p>Enter your username and Aadhar card number:</p>
<input type="text" id="username" placeholder="Username">
<input type="text" id="aadharNumber" placeholder="Aadhar Card Number">
<button onclick="validateAadhar()">Validate Aadhar</button>
<p id="result"></p>
<script>
function validateAadhar() {
// Get the input values
const username = [Link]("username").value;
const aadharNumber = [Link]("aadharNumber").value;
// Regular expression to match a 12-digit Aadhar card number
const aadharRegex = /^\d{12}$/;
if ([Link](aadharNumber)) {
[Link]("result").textContent = `Hello, ${username}! Aadhar Card
Number is valid.`;
} else {
[Link]("result").textContent = "Invalid Aadhar Card Number.
Page | 21
Please enter a 12-digit number.";
}
}
</script>
</body>
</html>
12.2
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
</head>
<body>
<h2>Email Validation</h2>
<p>Enter your email address:</p>
<input type="text" id="email" placeholder="Email Address">
<button onclick="validateEmail()">Validate Email</button>
<p id="result"></p>
<script>
function validateEmail() {
// Get the input value
const email = [Link]("email").value;
// Regular expression to validate an email address
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if ([Link](email)) {
Page | 22
[Link]("result").textContent = "Valid email address!";
} else {
[Link]("result").textContent = "Invalid email address. Please enter a
valid email.";
}
}
</script>
</body>
</html>
12.3
<!DOCTYPE html>
<html>
<head>
<title>Password Validation with Quantifiers</title>
</head>
<body>
<h2>Password Validation with Quantifiers</h2>
<p>Enter your password:</p>
<input type="password" id="password" placeholder="Password">
<button onclick="validatePassword()">Validate Password</button>
<p id="result"></p>
<script>
function validatePassword() {
// Get the input value
const password = [Link]("password").value;
// Regular expression to validate a password
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}$/;
Page | 23
if ([Link](password)) {
[Link]("result").textContent = "Valid password!";
} else {
[Link]("result").textContent = "Invalid password. Please enter a
valid password (at least one uppercase letter, one lowercase letter, one digit, and 8-20
characters).";
}
}
</script>
</body>
</html>
Page | 24
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 13
Title of Experiment Create a Web Page with Rollovers effect.
13.1
<!DOCTYPE html>
<html>
<head>
<title>Rollover Text Color Change (JavaScript)</title>
<style>
/* Initial text style */
.rollover-text {
color: black;
}
</style>
<script>
[Link] = function() {
const textElement = [Link]('.rollover-text');
// Store the initial text color
const initialColor = getComputedStyle(textElement).color;
// Change text color on mouseover
[Link]('mouseover', function() {
[Link] = 'red';
});
// Restore initial color on mouseout
[Link]('mouseout', function() {
[Link] = initialColor;
});
}
</script>
</head>
<body>
<h2>Rollover Text Color Change (JavaScript)</h2>
Page | 25
<!-- Add the rollover effect to this text -->
<p class="rollover-text">Hover over this text to change its color!</p>
</body>
</html>
13.2
<!DOCTYPE html>
<html>
<head>
<title>Rollover Image Change (JavaScript)</title>
<style>
/* Define the image container */
.image-container {
display: inline-block;
position: relative;
}
/* Define the initial image style */
.image-container img {
width: 200px; /* Set the width of the image */
}
</style>
<script>
// Function to change the image source on hover
function changeImage(imageElement, newSrc) {
[Link] = newSrc;
}
</script>
</head>
<body>
<h2>Rollover Image Change (JavaScript)</h2>
Page | 26
<!-- Image 1 -->
<div class="image-container">
<img src="[Link]" alt="Image 1" onmouseover="changeImage(this, '[Link]')"
onmouseout="changeImage(this, '[Link]')">
</div>
<!-- Image 2 -->
<div class="image-container">
<img src="[Link]" alt="Image 2" onmouseover="changeImage(this, '[Link]')"
onmouseout="changeImage(this, '[Link]')">
</div>
<!-- Image 3 -->
<div class="image-container">
<img src="[Link]" alt="Image 3" onmouseover="changeImage(this, '[Link]')"
onmouseout="changeImage(this, '[Link]')">
</div>
<!-- Image 4 -->
<div class="image-container">
<img src="[Link]" alt="Image 4" onmouseover="changeImage(this, '[Link]')"
onmouseout="changeImage(this, '[Link]')">
</div>
</body>
</html>
Page | 27
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 14
Title of Experiment Develop a Web Page for implementing Menus.
14.1
<!DOCTYPE html>
<html>
<head>
<title>Chained Select Menu Example</title>
</head>
<body>
<h2>Chained Select Menu Example</h2>
<label for="country">Select a Country:</label>
<select id="country" onchange="updateStates()">
<option value="">Select a country</option>
<option value="usa">United States</option>
<option value="canada">Canada</option>
</select>
<br>
<label for="state">Select a State:</label>
<select id="state">
<option value="">Select a state</option>
</select>
<script>
const statesByCountry = {
usa: ["New York", "California", "Texas", "Florida"],
canada: ["Ontario", "Quebec", "British Columbia", "Alberta"]
};
function updateStates() {
const countrySelect = [Link]("country");
const stateSelect = [Link]("state");
const selectedCountry = [Link];
Page | 28
// Clear the existing state options
[Link] = '<option value="">Select a state</option>';
// Populate the state options based on the selected country
if (selectedCountry) {
const states = statesByCountry[selectedCountry];
for (const state of states) {
const option = [Link]("option");
[Link] = state;
[Link] = state;
[Link](option);
}
}
}
</script>
</body>
</html>
14.2
<!DOCTYPE html>
<html>
<head>
<title>Context Menu Example</title>
<style>
/* Define the context menu style */
.context-menu {
display: none;
position: absolute;
background: #f0f0f0;
border: 1px solid #ccc;
list-style: none;
Page | 29
padding: 0;
}
.context-menu li {
padding: 5px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Context Menu Example</h2>
<p>Right-click anywhere on this page to open the context menu.</p>
<!-- Context menu element -->
<ul class="context-menu" id="context-menu">
<li id="option1">Option 1</li>
<li id="option2">Option 2</li>
<li id="option3">Option 3</li>
</ul>
<script>
const contextMenu = [Link]("context-menu");
// Show the context menu at the clicked position
[Link]("contextmenu", (event) => {
[Link]();
[Link] = "block";
[Link] = [Link] + "px";
[Link] = [Link] + "px";
});
// Hide the context menu when clicking elsewhere
[Link]("click", () => {
[Link] = "none";
});
// Handle option selection
[Link]("click", (event) => {
const selectedOption = [Link];
if (selectedOption) {
alert(`You selected: ${[Link](selectedOption).textContent}`);
}
});
</script>
</body>
</html>
Page | 30
Page | 31
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 15
Title of Experiment Develop a Web Page for implementing Status Bar and Web Page
Protection.
15.1
<!DOCTYPE html>
<html>
<head>
<title>Status-Like Message with JavaScript</title>
<style>
/* Define the status message style */
.status-message {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h2>Status-Like Message with JavaScript</h2>
<p>Click the button to show a status-like message:</p>
<button onclick="showStatusMessage()">Show Status Message</button>
<!-- Status message container -->
<div class="status-message" id="statusMessage">
This is a status-like message.
</div>
Page | 32
<script>
function showStatusMessage() {
const statusMessage = [Link]("statusMessage");
[Link] = "block";
// Automatically hide the message after 3 seconds (3000 milliseconds)
setTimeout(function() {
[Link] = "none";
}, 3000);
}
</script>
</body>
</html>
15.2
<!DOCTYPE html>
<html>
<head>
<title>Conceal Email Address</title>
</head>
<body>
<h2>Contact Us</h2>
<p>If you'd like to get in touch, please email us:</p>
<div id="email"></div>
<script type="text/javascript">
var user = 'contact';
var domain = '[Link]';
var mailTo = user + '@' + domain;
Page | 33
var emailDiv = [Link]("email");
var emailLink = [Link]("a");
[Link] = "[Link] + mailTo;
[Link] = mailTo;
[Link](emailLink);
</script>
</body>
</html>
15.3
In short, protecting your webpages is essential for the following reasons:
1. Security: To prevent unauthorized access and cyberattacks.
2. Privacy: Safeguard user data and sensitive information.
3. Data Integrity: Ensure the accuracy and reliability of your data.
4. User Trust: Build trust with users for increased engagement.
5. Compliance: Meet legal and regulatory obligations.
6. Reputation: Maintain a positive image and prevent damage.
7. Malware Prevention: Avoid distributing malware.
8. Downtime Avoidance: Minimize disruptions and financial losses.
9. SEO and Content Protection: Preserve search rankings and intellectual property.
10. Financial Transactions: Secure payment information.
11. Bot and Scraping Prevention: Prevent unauthorized data harvesting.
Page | 34
DEPARTMENT OF INFORMATION
TECHNOLOGY
Subject: Client Side Scripting Subject Code:22519
Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: [Link] Vaz
Name of Student: Shravan Manore Roll ID: 21202B0009
Experiment No: 16
Title of Experiment Develop a Web Page for implementing Slideshow, Banner.
16.1
<!DOCTYPE html>
<html>
<head>
<title>Banner Ads with Links</title>
<script>
// Array of banner objects with image and URL
const banners = [
{ img: '[Link]', url: '[Link] },
{ img: '[Link]', url: '[Link] },
{ img: '[Link]', url: '[Link] }
];
let currentBanner = 0;
function DisplayBanners() {
if ([Link]) {
currentBanner++;
if (currentBanner == [Link]) {
currentBanner = 0;
}
const banner = banners[currentBanner];
[Link] = [Link];
// Open the URL when the banner is clicked
[Link] = function () {
[Link]([Link], '_blank');
};
setTimeout(DisplayBanners, 3000); // Change banner every 3 seconds
}
}
</script>
Page | 35
</head>
<body onload="DisplayBanners()">
<center>
<img src="[Link]" width="400" height="75" name="RotateBanner" style="cursor: pointer;" />
</center>
</body>
</html>
16.2
<!DOCTYPE html>
<html>
<head>
<title>Image Slideshow</title>
<style>
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
img {
width: 100%;
}
.prev, .next {
cursor: pointer;
Page | 36
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
background-color: #333;
color: #fff;
}
.next {
right: 0;
}
</style>
</head>
<body>
<h2>Image Slideshow</h2>
<div class="slideshow-container">
<div class="mySlides">
<img src="[Link]" alt="Image 1">
</div>
<div class="mySlides">
<img src="[Link]" alt="Image 2">
</div>
<div class="mySlides">
<img src="[Link]" alt="Image 3">
</div>
<div class="mySlides">
<img src="[Link]" alt="Image 4">
</div>
<a class="prev" onclick="plusSlides(-1)">Previous</a>
<a class="next" onclick="plusSlides(1)">Next</a>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
const slides = [Link]('.mySlides');
if (n > [Link]) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = [Link];
Page | 37
}
for (let i = 0; i < [Link]; i++) {
slides[i].[Link] = 'none';
}
slides[slideIndex - 1].[Link] = 'block';
}
</script>
</body>
</html>
Page | 38
