Amruta CSS 1 to 16 Exp
Amruta CSS 1 to 16 Exp
Experiment No: 1
Title of Experiment Write a simple JavaScript with HTML for arithmetic expression
Program :
Script/Code:
<html>
<body>
<script>
document.write(message);
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 2
Title of Experiment Write a code to find out whether the year is leap or not
Script/Code:
<html>
<body>
<script>
function isLeapYear(yearInput1)
else
}
const yearInput = prompt("Enter a year: ");
isLeapYear();
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 3
Title of Experiment Develop JavaScript to implement Array Functions
car.push("Ferrari");
car.push("Lamborghini");
car.push("BMW");
car.sort();
document.write(car[i]+"<br>");
</script>
Script/Code:
<html>
<body>
<script>
car.push("Mercedes");
car.push("Lamborghini");
car.push("BMW");
car.sort();
for(var i=0;i<car.length;i++)
document.write(car[i]+"<br>");
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 4
Title of Experiment Develop javascript to implement functions
Script/Code:
<html>
<head>
<title>Factorial Calculator</title>
</head>
<body>
<div id="result"></div>
<script>
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * factorial(n - 1);
function calculateFactorial() {
function calculateFactorialWithArgument(num) {
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 5
Title of Experiment Develop javascript to implement strings
Program : Write a JavaScript program to count the number of vowels into a string
Script/Code:
<html>
<body>
<script>
function countVowels(str) {
let vowelCount = 0;
if (vowels.includes(str[i])) {
vowelCount++;
return vowelCount;
}
// Test the function
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 6
Title of Experiment Create web page using Form Elements
Program : Write a program to create the registration form for social media account
Script/Code:
<html>
<body>
<script>
function createRegistrationForm() {
form.id = "registration-form";
const fields = [
type: "text",
id: "first-name",
required: true
},
{
label: "Last Name",
type: "text",
id: "last-name",
required: true
},
label: "Email",
type: "email",
id: "email",
required: true
},
label: "Password",
type: "password",
id: "password",
required: true
},
type: "password",
id: "confirm-password",
required: true
},
label: "Birthday",
type: "date",
id: "birthday",
required: true
];
fields.forEach((field) => {
label.textContent = field.label;
label.htmlFor = field.id;
input.type = field.type;
input.id = field.id;
input.required = field.required;
form.appendChild(label);
form.appendChild(input);
});
submitButton.textContent = "Register";
submitButton.type = "submit";
form.appendChild(submitButton);
// Add form to the page
document.body.appendChild(form);
event.preventDefault();
return;
fetch("/register", {
method: "POST",
body: formData
})
});
}
createRegistrationForm();
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 7
Title of Experiment Create a web page to implement Form Event (Part 1)
Program : Develop a program for as we enter the firstname and lastname , email is
automatically generated.
Script/Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Email Generator</title>
</head>
<body>
<h1>Email Generator</h1>
<form id="emailForm">
<br>
<br>
</form>
<h2>Generated Email:</h2>
<p id="generatedEmail"></p>
<script>
document.getElementById('emailForm').addEventListener('submit', function(event) {
event.preventDefault();
document.getElementById('generatedEmail').innerText = email;
});
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 8
Title of Experiment Create a web page to implement Form Event (Part 2)
Script/Code:
<html>
<head>
<title>Amruta-Pr.no8</title>
<style>
body {
text-align: center;
margin-top: 50px;
margin-top: 20px;
font-size: 24px;
color: blue;
</style>
</head>
<body>
<script>
document.addEventListener('keydown', function(event) {
switch (event.key) {
case 'F1':
break;
case 'F3':
break;
case 'Enter':
break;
default:
});
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 9
Title of Experiment Develop a web page using Intrinsic java functions
Program : Write a JavaScript program to change the value of an element that the user cannot
change (a read-only element).
Script/Code:
<html>
<head>
<style>
body {
text-align: center;
margin-top: 50px;
margin-top: 20px;
font-size: 24px;
</style>
</head>
<body>
<br><br>
<div id="output"></div>
<script>
changeValueButton.addEventListener('click', function() {
});
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 10
Title of Experiment Develop a webpage for creating session and persistent cookies. Observe
the effects with browser cookies settings.
Program : Design a webpage that displays a form that contains an input for user name and
password. User is prompted to enter the input user name and password and password become
value of the cookies. Write the JavaScript function for storing the cookies.
Script/Code:
<html>
<head>
<style>
body {
text-align: center;
margin-top: 50px;
input {
margin: 10px;
padding: 10px;
font-size: 16px;
}
button {
font-size: 16px;
#message {
margin-top: 20px;
font-size: 18px;
color: green;
</style>
</head>
<body>
<form id="loginForm">
<br>
<br>
<button type="submit">Submit</button>
</form>
<div id="message"></div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
});
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 11
Title of Experiment Develop a website for placing the window on the screen and working
with child window.
Script/Code:
<html>
<head>
<title>Animation</title>
<script type="text/javascript">
var animate;
function init() {
obj = document.getElementById('car');
obj.style.position = 'relative';
obj.style.left = '0px';
function start() {
function stop() {
clearTimeout(animate);
obj.style.left = '0px';
window.onload = init;
</script>
</head>
<body>
<br><br>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 12
Title of Experiment Develop a webpage for validation of form fields using Regular
Expression
Program : 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.
Script/Code:
<html>
<head>
<title>Practical 12</title>
<style>
form {
max-width: 400px;
margin: auto;
.error {
color: red;
font-size: 0.9em;
.valid {
color: green;
font-size: 0.9em;
</style>
</head>
<body>
<form>
<label for="userId">UserID:</label>
</form>
<script>
function validate() {
document.getElementById('userIdError').textContent = '';
document.getElementById('userIdValid').textContent = '';
document.getElementById('aadharError').textContent = '';
if (!userIdPattern.test(userId)) {
isValid = false;
} else {
if (!aadharPattern.test(aadhar)) {
isValid = false;
if (isValid) {
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 13
Title of Experiment Create webpage with Rollovers effect
Program : Write a JavaScript program to design HTML page with books information in
tabular format, use rollovers to display the discount information.
Script/Code:
<html>
<head>
<title>Book Information</title>
<style>
body {
margin: 20px;
table {
width: 100%;
border-collapse: collapse;
th, td {
padding: 8px;
text-align: left;
th {
background-color: #f2f2f2;
.book-title {
color: blue;
cursor: pointer;
.discount-info {
display: none;
position: absolute;
background-color: yellow;
padding: 5px;
z-index: 10;
</style>
</head>
<body>
<h1>Book Information</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Price (INR)</th>
<th>Discount</th>
</tr>
</thead>
<tbody>
<tr>
<td>₹824.25</td>
</tr>
<tr>
<td>Harper Lee</td>
<td>₹599.25</td>
</tr>
<tr>
<td>George Orwell</td>
<td>₹674.25</td>
</tr>
<tr>
<td>₹524.25</td>
</tr>
</tbody>
</table>
<script>
discountInfo.classList.add('discount-info');
discountInfo.innerText = discount;
discountInfo.style.display = 'block';
discountInfo.style.position = 'absolute';
discountInfo.style.left = `${event.pageX}px`;
discountInfo.style.top = `${event.pageY}px`;
event.target.appendChild(discountInfo);
function hideDiscount() {
discountInfos.forEach(info => {
info.style.display = 'none';
});
</script>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 14
Title of Experiment Develop a webpage for implementing Menus.
Program : Write a JavaScript program that will create pull-down menu with three options.
Once the user will select the one of the options then user will redirected to that website.
Script/Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown Redirect</title>
<script>
function redirectToSite() {
if (selectedValue) {
window.location.href = selectedValue;
</script>
</head>
<body>
<h1>Select a Site to Visit</h1>
<option value="https://www.msbte.org.in">MSBTE</option>
<option value="https://www.google.com">GOOGLE</option>
</select>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 15
Title of Experiment Develop a webpage for implementing Status bars and web page protection.
Script/Code:
<html >
<head>
<script>
function CreateEmailAddress()
var x = 'abcxyz*c_o_m'
var y = 'mai'
var z = 'lto'
x = x.replace('&','@')
x = x.replace('*','.')
x = x.replace('_','')
x = x.replace('_','')
var b = y + z +':'+ x + s
window.location=b;
</script>
</head>
<body>
</body>
</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY
Experiment No: 16
Title of Experiment Write a JavaScript program to create a slide show with the group of six images,
also simulate the next and previous transition between slides in your
JavaScript.
Program: Write a JavaScript program to create a slide show with the group of six images, also
simulate the next and previous transition between slides in your JavaScript.
Script/Code:
<html>
<head>
<title>Image Slideshow</title>
<style>
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.slide {
display: none;
.active-slide {
display: block;
.nav-buttons {
text-align: center;
margin-top: 10px;
.nav-buttons button {
font-size: 16px;
cursor: pointer;
</style>
</head>
<body>
<div class="slideshow-container">
</div>
<div class="nav-buttons">
<button onclick="previousSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>
</div>
<script>
let currentSlideIndex = 0;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.classList.remove('active-slide');
if (i === index) {
slide.classList.add('active-slide');
});
function nextSlide() {
showSlide(currentSlideIndex);
}
function previousSlide() {
showSlide(currentSlideIndex);
showSlide(currentSlideIndex);
</script>
</body>
</html>
Output: