CSS Practicals
CSS Practicals
TECHNOLOGY
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="email">Email:</label>
<input type="email" id="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" required><br><br>
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>
Page | 2
<input type="checkbox" id="checkbox3"><br><br>
<p id="result"></p>
<script>
function evaluateCheckboxes() { const checkbox1 =
document.getElementById("checkbox1"); const checkbox2 =
document.getElementById("checkbox2"); const checkbox3 =
document.getElementById("checkbox3"); const resultElement =
document.getElementById("result"); let selectedCheckboxes = [];
if (checkbox1.checked) {
selectedCheckboxes.push("Checkbox 1");
}
if (checkbox2.checked) {
selectedCheckboxes.push("Checkbox 2");
}
if (checkbox3.checked) {
selectedCheckboxes.push("Checkbox 3");
}
if (selectedCheckboxes.length > 0) {
resultElement.textContent = "Selected Checkboxes: " +
selectedCheckboxes.join(", ");
} else {
resultElement.textContent = "No checkboxes selected.";
}
}
</script>
</body>
</html>
Page | 3
Page | 4
DEPARTMENT OF INFORMATION
TECHNOLOGY
Experiment No: 07
Title of Experiment Create a webpage to implement form events. Part 1
<!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>
<script>
function addCustomOption() {
select.appendChild(option);
input.value = '';
} 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 = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;
Page | 7
DEPARTMENT OF INFORMATION
TECHNOLOGY
Experiment No: 08
Title of Experiment Create a webpage to implement form events. Part 2
<script>
function updateColor() {
const colorSelect = document.getElementById('colorSelect');
const selectedColor = colorSelect.value;
const colorDisplay = document.getElementById('colorDisplay');
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 = document.getElementById('myButton');
const messageElement = document.getElementById('message');
Page | 9
Page | 10
DEPARTMENT OF INFORMATION
TECHNOLOGY
Experiment No: 09
Title of Experiment Develop a webpage using Intrinsic java functions.
<script>
// Get references to the text field and buttons
const textField = document.getElementById('textField');
const enableButton = document.getElementById('enableButton');
const disableButton = document.getElementById('disableButton');
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>
<script>
function changeValue() {
// Get the read-only input element
var readOnlyInput = document.getElementById('readOnlyInput');
Page | 12
Page | 13
DEPARTMENT OF INFORMATION
TECHNOLOGY
Experiment No: 10
Title of Experiment Develop a webpage for creating session and persistent cookies.
Observe the effects with Browser cookie settings.
<script>
function readCookie() {
var cookieValue = document.cookie.split('; ').find(cookie =>
cookie.startsWith('exampleCookie='));
if (cookieValue) {
alert("Cookie value: " + cookieValue.split('=')[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>
<script>
function deleteCookie() {
document.cookie = "exampleCookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
alert("Cookie deleted.");
}
</script>
</body>
</html>
Page | 15
Page | 16
DEPARTMENT OF INFORMATION
TECHNOLOGY
Experiment No: 11
Title of Experiment Develop a Web Page for placing the window on the screen and
working with child window.
<script>
function resizeWindowBy() {
// Resize the window by 100 pixels horizontally and 100 pixels vertically
window.resizeBy(100, 100);
}
function resizeWindowTo() {
// Resize the window to a specific width and height (800x600)
window.resizeTo(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>
<script>
function scrollByExample() {
// Scroll the window by 100 pixels horizontally and 100 pixels vertically
window.scrollBy(100, 100);
}
function scrollToExample() {
// Scroll the window to a specific position (top of the page)
window.scrollTo(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>
<script>
var numberTextArea = document.getElementById('numberTextArea');
var count = 1;
function displayNumber() {
if (count <= 10) {
numberTextArea.value += count + "\n";
count++;
} else {
clearInterval(numberInterval);
}
}
Page | 19
Page | 20
DEPARTMENT OF INFORMATION
TECHNOLOGY
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>
<p id="result"></p>
<script>
function validateAadhar() {
// Get the input values
const username = document.getElementById("username").value;
const aadharNumber = document.getElementById("aadharNumber").value;
if (aadharRegex.test(aadharNumber)) {
document.getElementById("result").textContent = `Hello, ${username}! Aadhar Card
Number is valid.`;
} else {
document.getElementById("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>
<p id="result"></p>
<script>
function validateEmail() {
// Get the input value
const email = document.getElementById("email").value;
if (emailRegex.test(email)) {
Page | 22
document.getElementById("result").textContent = "Valid email address!";
} else {
document.getElementById("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>
<p id="result"></p>
<script>
function validatePassword() {
// Get the input value
const password = document.getElementById("password").value;
Page | 24
DEPARTMENT OF INFORMATION
TECHNOLOGY
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>
window.onload = function() {
const textElement = document.querySelector('.rollover-text');
13.2
<!DOCTYPE html>
<html>
<head>
<title>Rollover Image Change (JavaScript)</title>
<style>
/* Define the image container */
.image-container {
display: inline-block;
position: relative;
}
Page | 27
DEPARTMENT OF INFORMATION
TECHNOLOGY
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>
<script>
const statesByCountry = {
usa: ["New York", "California", "Texas", "Florida"],
canada: ["Ontario", "Quebec", "British Columbia", "Alberta"]
};
function updateStates() {
const countrySelect = document.getElementById("country");
const stateSelect = document.getElementById("state");
const selectedCountry = countrySelect.value;
Page | 28
// Clear the existing state options
stateSelect.innerHTML = '<option value="">Select a state</option>';
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>
<script>
const contextMenu = document.getElementById("context-menu");
Page | 30
Page | 31
DEPARTMENT OF INFORMATION
TECHNOLOGY
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>
Page | 32
<script>
function showStatusMessage() {
const statusMessage = document.getElementById("statusMessage");
statusMessage.style.display = "block";
15.2
<!DOCTYPE html>
<html>
<head>
<title>Conceal Email Address</title>
</head>
<body>
<h2>Contact Us</h2>
<div id="email"></div>
<script type="text/javascript">
var user = 'contact';
var domain = 'example.com';
var mailTo = user + '@' + domain;
Page | 33
var emailDiv = document.getElementById("email");
var emailLink = document.createElement("a");
emailLink.href = "mailto:" + mailTo;
emailLink.textContent = mailTo;
emailDiv.appendChild(emailLink);
</script>
</body>
</html>
15.3
In short, protecting your webpages is essential for the following reasons:
Page | 34
DEPARTMENT OF INFORMATION
TECHNOLOGY
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: '1.jpg', url: 'https://www.google.com' },
{ img: '2.jpg', url: 'https://www.youtube.com' },
{ img: '3.jpg', url: 'https://www.vpt.edu.in' }
];
let currentBanner = 0;
function DisplayBanners() {
if (document.images) {
currentBanner++;
if (currentBanner == banners.length) {
currentBanner = 0;
}
const banner = banners[currentBanner];
document.RotateBanner.src = banner.img;
// Open the URL when the banner is clicked
document.RotateBanner.onclick = function () {
window.open(banner.url, '_blank');
};
setTimeout(DisplayBanners, 3000); // Change banner every 3 seconds
}
}
</script>
Page | 35
</head>
<body onload="DisplayBanners()">
<center>
<img src="1.jpg" 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="1.jpg" alt="Image 1">
</div>
<div class="mySlides">
<img src="2.jpg" alt="Image 2">
</div>
<div class="mySlides">
<img src="3.jpg" alt="Image 3">
</div>
<div class="mySlides">
<img src="4.jpg" alt="Image 4">
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
const slides = document.querySelectorAll('.mySlides');
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
Page | 37
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slides[slideIndex - 1].style.display = 'block';
}
</script>
</body>
</html>
Page | 38