0% found this document useful (0 votes)
25 views51 pages

Amruta CSS 1 to 16 Exp

Uploaded by

Amruta Pansare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views51 pages

Amruta CSS 1 to 16 Exp

Uploaded by

Amruta Pansare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 51

DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

Experiment No: 1
Title of Experiment Write a simple JavaScript with HTML for arithmetic expression

Program :

Script/Code:

<html>

<body>

<script>

function checkCondition(condition, trueValue, falseValue)

return condition ? trueValue : falseValue;

const isRaining = true;

const message = checkCondition(isRaining, "Take an umbrella!", "It's a sunny day!");

document.write(message);

const isAdmin = false;

//const accessLevel = checkCondition(isAdmin, "Admin", "User");


document.write(accessLevel);

</script>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: 3 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

Experiment No: 2
Title of Experiment Write a code to find out whether the year is leap or not

Program 1: Write down statement

Script/Code:

<html>

<body>

<script>

function isLeapYear(yearInput1)

if(yearInput % 4 === 0)// && yearInput % 100 !== 0)

document.write("Year is leap year");

else

document.write("Year is not a Leap Year");

}
const yearInput = prompt("Enter a year: ");

const yearInput1 = parseInt(yearInput);

isLeapYear();

</script>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

Experiment No: 3
Title of Experiment Develop JavaScript to implement Array Functions

Program : Write output of the following:

<script> var car= new Array(); car.push("Mercedes");

car.push("Ferrari");

car.push("Lamborghini");

car.push("BMW");

car.sort();

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

document.write(car[i]+"<br>");

</script>

Script/Code:

<html>

<body>

<script>

var car= new Array();

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

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

Experiment No: 4
Title of Experiment Develop javascript to implement functions

Program : Calculate the factorial of a number by:

1) Calling function without argument

2) Calling function with argument.

Script/Code:

<html>

<head>

<title>Factorial Calculator</title>

</head>

<body>

<button onclick="calculateFactorial()">No Argument</button>

<button onclick="calculateFactorialWithArgument(5)">With Argument (5)</button>

<div id="result"></div>

<script>

function factorial(n) {

if (n === 0 || n === 1) {

return 1;

} else {
return n * factorial(n - 1);

function calculateFactorial() {

var num = prompt("Enter a number:");

document.getElementById("result").innerHTML = `Factorial of ${num} is $


{factorial(parseInt(num))}`;

function calculateFactorialWithArgument(num) {

document.getElementById("result").innerHTML = `Factorial of ${num} is ${factorial(num)}`;

</script>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

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;

const vowels = 'aeiouAEIOU';

for (let i = 0; i < str.length; i++) {

if (vowels.includes(str[i])) {

vowelCount++;

return vowelCount;

}
// Test the function

const inputString = 'Hello World';

document.write(Number of vowels in "${inputString}": ${countVowels(inputString)});

</script>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

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() {

const form = document.createElement("form");

form.id = "registration-form";

// Create form fields

const fields = [

label: "First Name",

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

},

label: "Confirm Password",

type: "password",

id: "confirm-password",

required: true

},

label: "Birthday",

type: "date",
id: "birthday",

required: true

alert("You've selected something");

];

fields.forEach((field) => {

const label = document.createElement("label");

label.textContent = field.label;

label.htmlFor = field.id;

const input = document.createElement("input");

input.type = field.type;

input.id = field.id;

input.required = field.required;

form.appendChild(label);

form.appendChild(input);

});

// Create submit button

const submitButton = document.createElement("button");

submitButton.textContent = "Register";

submitButton.type = "submit";

form.appendChild(submitButton);
// Add form to the page

document.body.appendChild(form);

// Add event listener to form submission

form.addEventListener("submit", (event) => {

event.preventDefault();

// Get form data

const formData = new FormData(form);

// Validate form data

if (formData.get("password") !== formData.get("confirm-password")) {

alert("Passwords do not match");

return;

// Submit form data to server

fetch("/register", {

method: "POST",

body: formData

})

.then((response) => response.json())

.then((data) => console.log(data))

.catch((error) => console.error(error));

});

}
createRegistrationForm();

</script>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

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">

<label for="firstName">First Name:</label>

<input type="text" id="firstName" required>

<br>

<label for="lastName">Last Name:</label>

<input type="text" id="lastName" required>

<br>

<button type="submit">Generate Email</button>

</form>
<h2>Generated Email:</h2>

<p id="generatedEmail"></p>

<script>

document.getElementById('emailForm').addEventListener('submit', function(event) {

event.preventDefault();

const firstName = document.getElementById('firstName').value;

const lastName = document.getElementById('lastName').value;

// Generate email format

const email = `${firstName.toLowerCase()}${lastName.toLowerCase()}@gmail.com`;

document.getElementById('generatedEmail').innerText = email;

});

</script>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

Experiment No: 8
Title of Experiment Create a web page to implement Form Event (Part 2)

Program : write a program to demonstrate the use of keyevent event in javascript

Script/Code:

<html>

<head>

<title>Amruta-Pr.no8</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

margin-top: 20px;

font-size: 24px;

color: blue;

</style>
</head>

<body>

<h1>Press F1, F3, or Enter!</h1>

<div id="output">Key Pressed: None</div>

<script>

document.addEventListener('keydown', function(event) {

const output = document.getElementById('output'); // Get the output element

switch (event.key) {

case 'F1':

event.preventDefault(); // Prevent the default action for F1

output.textContent = 'You pressed F1!';

break;

case 'F3':

output.textContent = 'You pressed F3!';

break;

case 'Enter':

output.textContent = 'You pressed Enter!';

break;

default:

output.textContent = 'Key Pressed: None';

});

</script>
</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

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>

<title>Read-Only Input Example</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

margin-top: 20px;

font-size: 24px;

</style>
</head>

<body>

<h1>Change Read-Only Input Value</h1>

<input type="text" id="readOnlyInput" value="You cannot change this!" readonly>

<br><br>

<button id="changeValueButton">Change Value</button>

<div id="output"></div>

<script>

const readOnlyInput = document.getElementById('readOnlyInput');

const changeValueButton = document.getElementById('changeValueButton');

const output = document.getElementById('output');

changeValueButton.addEventListener('click', function() {

// Change the value of the read-only input

readOnlyInput.value = "Value changed by JavaScript!";

output.textContent = 'Input value has been changed.';

});

</script>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

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>

<title>User Login Form</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

input {

margin: 10px;

padding: 10px;

font-size: 16px;

}
button {

padding: 10px 20px;

font-size: 16px;

#message {

margin-top: 20px;

font-size: 18px;

color: green;

</style>

</head>

<body>

<h1>User Login Form</h1>

<form id="loginForm">

<input type="text" id="username" placeholder="Enter Username" required>

<br>

<input type="password" id="password" placeholder="Enter Password" required>

<br>

<button type="submit">Submit</button>

</form>

<div id="message"></div>

<script>

function setCookie(name, value, days) {

let expires = "";


if (days) {

const date = new Date();

date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

expires = "; expires=" + date.toUTCString();

document.cookie = name + "=" + (value || "") + expires + "; path=/";

document.getElementById('loginForm').addEventListener('submit', function(event) {

event.preventDefault(); // Prevent the form from submitting normally

const username = document.getElementById('username').value;

const password = document.getElementById('password').value;

setCookie('userPassword', password, 7);

document.getElementById('message').textContent = `Welcome, ${username}! Your password


has been stored in cookies.`;

});

</script>

</body>

</html>
Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

Experiment No: 11
Title of Experiment Develop a website for placing the window on the screen and working
with child window.

Program : Write a program for moving car in java script

Script/Code:

<html>

<head>

<title>Animation</title>

<script type="text/javascript">

var obj = null;

var animate;

function init() {

obj = document.getElementById('car');

obj.style.position = 'relative';

obj.style.left = '0px';

function start() {

obj.style.left = parseInt(obj.style.left) + 10 + 'px';


animate = setTimeout(start, 20);

function stop() {

clearTimeout(animate);

obj.style.left = '0px';

window.onload = init;

</script>

</head>

<body>

<img id="car" src="https://png.pngtree.com/element_our/png/20181223/super-red-sports-car-


png_293223.jpg" style="width:200px;">

<br><br>

<input value="Start" type="button" onclick="start()"/>

<input value="Stop" type="button" onclick="stop()"/>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

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>

<input type="text" id="userId" required>

<span class="error" id="userIdError"></span>

<span class="valid" id="userIdValid"></span><br>

<label for="aadhar">Aadhar No:</label>

<input type="text" id="aadhar" required placeholder="xxxx xxxx xxxx">

<span class="error" id="aadharError"></span><br>

<input type="button" onclick="validate()" value="SUBMIT">

</form>

<script>

function validate() {

var isValid = true;

document.getElementById('userIdError').textContent = '';

document.getElementById('userIdValid').textContent = '';

document.getElementById('aadharError').textContent = '';

var userId = document.getElementById('userId').value;


var userIdPattern = /^[A-Z]{1}[A-Za-z0-9]{9}$/;

if (!userIdPattern.test(userId)) {

document.getElementById('userIdError').textContent = 'Invalid UserID. It must start with a


capital letter and be 10 alphanumeric characters long.';

isValid = false;

} else {

document.getElementById('userIdValid').textContent = 'Valid UserID.';

var aadhar = document.getElementById('aadhar').value;

var aadharPattern = /^\d{4} \d{4} \d{4}$/;

if (!aadharPattern.test(aadhar)) {

document.getElementById('aadharError').textContent = 'Invalid Aadhar No. It must be 12


digits in the format nnnn nnnn nnnn.';

isValid = false;

if (isValid) {

alert('Form submitted successfully!');

</script>

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

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 {

font-family: Arial, sans-serif;

margin: 20px;

table {

width: 100%;

border-collapse: collapse;

th, td {

border: 1px solid #ddd;

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;

border: 1px solid #ccc;

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 class="book-title" onmouseover="showDiscount(event, '20% off!')"


onmouseout="hideDiscount()">The Great Gatsby</td>

<td>F. Scott Fitzgerald</td>

<td>₹824.25</td>

<td><span class="discount-info" id="discount-1"></span></td>

</tr>

<tr>

<td class="book-title" onmouseover="showDiscount(event, '15% off!')"


onmouseout="hideDiscount()">To Kill a Mockingbird</td>

<td>Harper Lee</td>

<td>₹599.25</td>

<td><span class="discount-info" id="discount-2"></span></td>

</tr>

<tr>

<td class="book-title" onmouseover="showDiscount(event, '10% off!')"


onmouseout="hideDiscount()">1984</td>

<td>George Orwell</td>

<td>₹674.25</td>

<td><span class="discount-info" id="discount-3"></span></td>

</tr>

<tr>

<td class="book-title" onmouseover="showDiscount(event, '25% off!')"


onmouseout="hideDiscount()">Pride and Prejudice</td>
<td>Jane Austen</td>

<td>₹524.25</td>

<td><span class="discount-info" id="discount-4"></span></td>

</tr>

</tbody>

</table>

<script>

function showDiscount(event, discount) {

const discountInfo = event.target.querySelector('.discount-info') ||


document.createElement('span');

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() {

const discountInfos = document.querySelectorAll('.discount-info');

discountInfos.forEach(info => {

info.style.display = 'none';

});

</script>
</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Mayank Chabhare Roll ID: 22202B0016

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">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dropdown Redirect</title>

<script>

function redirectToSite() {

const selectElement = document.getElementById('siteSelector');

const selectedValue = selectElement.value;

if (selectedValue) {

window.location.href = selectedValue;

</script>

</head>

<body>
<h1>Select a Site to Visit</h1>

<select id="siteSelector" onchange="redirectToSite()">

<option value="">--Select an option--</option>

<option value="http://dte.maharashtra.gov.in">DTE MH</option>

<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

Subject: Client Side Scripting Subject Code: 22519


Semester: 5 Course: Client-side Scripting
Laboratory No: L0003 Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

Experiment No: 15
Title of Experiment Develop a webpage for implementing Status bars and web page protection.

Program : Write a program to Concealing your E-mail Address

Script/Code:

<html >

<head>

<title>Conceal Email Address</title>

<script>

function CreateEmailAddress()

var x = 'abcxyz*c_o_m'

var y = 'mai'

var z = 'lto'

var s = '?subject=Customer Inquiry'

x = x.replace('&','@')

x = x.replace('*','.')

x = x.replace('_','')

x = x.replace('_','')

var b = y + z +':'+ x + s
window.location=b;

</script>

</head>

<body>

<input type="button" value="send" onclick="CreateEmailAddress()">

</body>

</html>

Output:
DEPARTMENT OF INFORMATION TECHNOLOGY

Subject: Client Side Scripting Subject Code:


Semester: 5 Course: Client-side Scripting
Laboratory No: Name of Teacher: Sushama Pawar
Name of Student: Amruta Pansare Roll ID: 22202B0018

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 {

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

</style>

</head>

<body>

<h2 style="text-align: center;">Image Slideshow</h2>

<div class="slideshow-container">

<img src="image1.jpg" alt="Slide 1" class="slide active-slide">

<img src="image2.jpg" alt="Slide 2" class="slide">


<img src="image3.jpg" alt="Slide 3" class="slide">

<img src="image4.jpg" alt="Slide 4" class="slide">

<img src="image5.jpg" alt="Slide 5" class="slide">

<img src="image6.jpg" alt="Slide 6" class="slide">

</div>

<div class="nav-buttons">

<button onclick="previousSlide()">Previous</button>

<button onclick="nextSlide()">Next</button>

</div>

<script>

let currentSlideIndex = 0;

const slides = document.querySelectorAll('.slide');

function showSlide(index) {

slides.forEach((slide, i) => {

slide.classList.remove('active-slide');

if (i === index) {

slide.classList.add('active-slide');

});

function nextSlide() {

currentSlideIndex = (currentSlideIndex + 1) % slides.length;

showSlide(currentSlideIndex);
}

function previousSlide() {

currentSlideIndex = (currentSlideIndex - 1 + slides.length) % slides.length;

showSlide(currentSlideIndex);

// Initialize the first slide

showSlide(currentSlideIndex);

</script>

</body>

</html>

Output:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy