Scribd
Upload
40 views

Css Previous Year Coding Question

Css All Previous year Codes with example

Uploaded by

waghvrushali28
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
40 views

Css Previous Year Coding Question

Css All Previous year Codes with example

Uploaded by

waghvrushali28
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/ 88

Css Previous Year Coding Question

Unit 1:Basic of JavaScript Programing


Winter-19
Q. Write Java script to create person object with properties firstname, lastname,
age, eye color, delete eye color property and display remaining properties of
person object. —2m
ANS:
<!DOCTYPE html>
<html>
<head>

<title>person object</title>
</head>
<body>
<script type="text/javascript">
var person=
{
firstname:"viki",
lastname:"Nimbalkar",
age:19,
eyecolor:"black"
};
delete person.eyecolor;
document.write("first-name:"+person.firstname+"<br>");
document.write("last-name:"+person.lastname+"<br>");
document.write("Age:"+person.firstname+"<br>");
document.write("Eyecolor:"+person.eyecolor);//return undefined

</script>
</body>
</html>

Winter-22
Q. Write a simple calculator program using switch case in JavaScript.—2M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
1
</head>
<body>
<script type="text/javascript">
const number1=parseFloat(prompt("Enter first Number :"));
const number2=parseFloat(prompt("Enter second Number :"));
const operator=prompt("Enter the Operator(+,-,*,%,/");
let result;
switch(operator)
{
case '+':
result=number1+number2;
document.write("Addition :"+result);
break;
case '-':
result=number1-number2;
document.write("Subtraction :"+result);
break;
case '*':
result=number1*number2;
document.write("Multiplication :"+result);
break;
case '/':
result=number1/number2;
document.write("Division :"+result);
break;
case '%':
result=number1%number2;
document.write("Modulas :"+result);
break;
default:
alert("pls enter valid operator");
}
</script>
</body>
</html>
Q. Write a JavaScript program that will display current date in DD/MM/YYYY
format.—4M
ANS:
<!DOCTYPE html>
<html>
2
<head>
<title>current Date DD/MM/YYYY</title>
</head>
<body>
<script type="text/javascript">
var d=new Date();
var currentDate=d.getDate()+'/'+d.getMonth()+'/'+d.getFullYear();
document.write("current Date DD/MM/YYYY format:"+currentDate);
</script>
</body>
</html>

Summer -22
Q. Write a javascript program to validate user accounts for multiple set of user
ID and password (using swith case statement).-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Multiple User Login</title>
</head>
<body>
<script type="text/javascript">
var ID=prompt("Enter Id:");
var password=prompt("Enter Passowrd :");

switch(ID)
{
case 'user1':
if(password==='pass1')
{
alert("Login Sucessfully user1");
}
else
{
alert("Invalid Creditials user 1");
}
break;
case 'user2':
if(password==='pass2')
3
{
alert("Login Sucessfully user2");
}
else
{
alert("Invalid Creditials user 2");
}
break;
case 'user3':
if(password==='pass3')
{
alert("Login Sucessfully user3");
}
else
{
alert("Invalid Creditials user 1");
}
break;
case 'user4':
if(password==='pass4')
{
alert("Login Sucessfully user4");
}
else
{
alert("Invalid Creditials user 4");
}
break;
default:
alert("pls enter valid Id");
}
</script>
</body>
</html>
Q. Write a javascript program to check whether entered number is prime or not.-2M
ANS:
<!DOCTYPE html>
<html>
<head>

4
<title>check whether number prime or not</title>
</head>
<body>
<script type="text/javascript">

var number=parseFloat(prompt("Enter Number to check whether is prime or Not:"));


var count=0;
for(var i=2;i<number;i++)
{
if(number%i==0)
{
count++;

}
}
if(count==0 &&number>1)
{
document.write("Prime Number");
}
else
{
document.write("Not prime number");
}

</script>
</body>
</html>

Summer-23
Q. Write JavaScript to create a object “student” with properties roll number,
name, branch, year. Delete branch property and display remaining properties
of student object.-2M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>student object</title>
</head>
<body>

5
<script type="text/javascript">
var student=
{
rollno:66,
name:"viki",
branch:"co",
year:2024-25
};
delete student.branch;
document.write("After delete branch property"+"<br>");
document.write("Roll-no :"+student.rollno+"<br>");
document.write("Name :"+student.name+"<br>");
document.write("Branch :"+student.branch+"<br>");//return undefined
document.write("Roll-no :"+student.rollno);

</script>
</body>
</html>

Q. Write a JavaScript for loop that will iterate from 1 to 15. For each iteration, it
will check if the current number is odd or even and display a message to the
screen.
Sample Output :
“1 is odd”
“2 is even”
…………
……….... 4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Even and odd Number 1 to 15</title>
</head>
<body>
<script type="text/javascript">
var i;
var num=15;
for(i=1;i<=num;i++)
{
if(i%2!=0)
6
{
document.write(i +" is Odd no"+"<br>");
}
else if(i%2==0)
{
document.write(i +" is even no"+"<br>");
}
}
</script>
</body>
</html>

Summer -24
Q. Write a JavaScript program that will print even numbers from 1 to 20 -2M
ANS:

<!DOCTYPE html>
<html>
<head>

<title>Even no</title>
</head>
<body>
<script type="text/javascript">
var i;
var num=20;
document.write("Even Number"+"<br>");
for(i=1;i<=num;i++)
{
if(i%2==0)
{
document.write(i+"<br>");
}
}
</script>
</body>
</html>

7
Q. Write a JavaScript program to check whether a number is positive, negative or zero
using switch case.

ANS:
<!DOCTYPE html>
<html>
<head>

<title>switch case statement for check no p,n,z</title>


</head>
<body>
<script type="text/javascript">
var number=parseFloat(prompt("Enter Number No:"))

switch(Math.sign(number))
{
case 1:
alert("Positive Number");
break;
case -1:
alert("Negative Number");
break;
default:
alert("Zero");

}
</script>
</body>
</html>
Extra Question
Give the Example of Getter and Setter property
ANS:
<!DOCTYPE html>
<html>
<head>

<title>Getter and Setter Property</title>


</head>
<body>
<script type="text/javascript">
8
var car=
{
brand:"Toyota",
color:"blue",

get getBrand()
{
return this.brand;
},

get getColor()
{
return this.color;
},

set setBrand(newBrand)
{
this.brand=newBrand;
},

set setColor(newColor)
{
this.color=newColor;

},

};

document.write("Car Brand :"+car.brand+"<br>");


document.write("Car Color :"+car.color+"<br>");

car.setBrand="Tesla";
car.setColor="Red";
document.write("Set New property value when--"+"<br>");
document.write("Car Brand :"+car.brand+"<br>");
document.write("Car Color :"+car.color+"<br>");

</script>
</body>
</html>
9
Unit 2:Array ,Function and String
Winter -19
Q. Write Java script to create person object with properties firstname, lastname,
age, eye color, delete eye color property and display remaining properties of
person object. -2M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>create 3 flower array and display</title>
</head>
<body>
<script type="text/javascript">
var flowers=new Array();
flowers[0]="mogra";
flowers[1]="rose";
flowers[2]="hibucus";
for(var i=0;i<flowers.length;i++)
{
document.write("flower :"+flowers[i]+"<br>");
}
</script>
</body>
</html>
Q. Write Java script to call function from HTML.-2M
ANS:
<!DOCTYPE html>
<html>
<head>

<title>function Call from HTMl</title>


<script type="text/javascript">
function welcome()
{
alert("Welcome to js Coding");
}
function goodbye()
{
alert("Codind time finish here..");
10
}
</script>
</head>
<body onload="welcome()" onunload="goodbye()">

</body>
</html>

Q:-4M

ANS:
<!DOCTYPE html>
<html>
<head>
<title>Avg marks of Student with grade</title>
</head>
<body>
<script type="text/javascript">
var student=[['sumit',80],['kalpesh',77],['amit',88],['tejas',93],['abhishek',65]];
var totalmarks=0;
for(i=0;i<student.length;i++)
11
{
totalmarks+=student[i][1];
}
var avg=(totalmarks/student.length);
document.write("Average Marks:"+avg+"<br>");
if(avg>90)
{
document.write("A++ Grade");
}
else if(avg>80)
{
document.write("A+ Grade");
}
else if(avg>70)
{
document.write("B Grade");
}
else
{
document.write("C Grade");
}
</script>
</body>
</html>

Q. Write a Java script that will replace following specified value with another
value in a string.
String = “ I will fail”
Replace “fail” by “pass” -4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Replace one value to another value of string</title>
</head>
<body>
<script type="text/javascript">
var str1="i will fail";
var replacestr=str1.replace("fail","pass");
document.write("New String :"+replacestr);
12
</script>
</body>
</html>

Q. Write a Java script code to display 5 elements of array in sorted order-4M


ANS:
<!DOCTYPE html>
<html>
<head>
<title>use sort method</title>
</head>
<body>
<script type="text/javascript">
var number=new Array(5,7,8,9,1);
document.write("Before sort"+"<br>");
for(i=0;i<number.length;i++)
{
document.write(number[i]+"<br>");
}
number.sort();
document.write("After sort"+"<br>");
for(i=0;i<number.length;i++)
{
document.write(number[i]+"<br>");
}
</script>
</body>
</html>

Winter -22
Q. Write a program using sort method of array object.-2M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>array object sort method</title>
</head>
<body>
<script type="text/javascript">
var arr=[1,4,2,3,5];
13
//sorting the array
sorted=arr.sort();
document.write("Sorted array Element"+"<br>");
for(i=0;i<arr.length;i++)
{
document.write(arr[i]+"<br>");
}
</script>
</body>
</html>

Q. Write a JavaScript program that will remove the duplicate element from an
array.
ANS:
<!DOCTYPE html>
<html>
<head>

<title>remove the duplicate from array</title>


</head>
<body>
<script type="text/javascript">
var arr=["scale","happy","happy","scale","peace"];
function removeDuplicate(arr)
{
var uniqueArr=[];
for(i=0;i<arr.length;i++)
{
if(uniqueArr.indexOf(arr[i])===-1)
{
uniqueArr.push(arr[i]);
}
}
return uniqueArr;
}
document.write(removeDuplicate(arr));
</script>
</body>
</html>

14
Q. 4M

ANS:
<!DOCTYPE html>
<html>
<head>
<title>Calculate Average of Class and Sort According to Marks</title>
</head>
<body>
<script type="text/javascript">
// Array of students with names and marks
var stud = [
['Amit', 70],
['Sumit', 78],
['Abhishek', 71]
];

// Sort the array by marks in ascending order


stud.sort(function(a, b) {
return a[1] - b[1];
});

// Display sorted students and their marks


document.write("<h3>Sorted List of Students by Marks</h3>");
for (var i = 0; i < stud.length; i++) {
document.write("Name: " + stud[i][0] + ", Marks: " + stud[i][1] + "<br>");
}

// Calculate the average of marks


var totalMarks = 0;
15
for (var i = 0; i < stud.length; i++) {
totalMarks += stud[i][1];
}
var averageMarks = totalMarks / stud.length;

// Display the average marks


document.write("<h3>Average Performance of the Class: " + averageMarks.toFixed(2)
+ "</h3>");
</script>
</body>
</html>

Q. Write a JavaScript function to merge two array & removes all duplicate
values.-4M
ANS:
<!DOCTYPE html>
<html>
<head>

<title>merge two array and remove dublicate array</title>


</head>
<body>
<script type="text/javascript">

function mergearr(array1,array2)
{
var merge=array1.concat(array2);
var uniqueArr=[];
for(i=0;i<merge.length;i++)
{
if(uniqueArr.indexOf(i)===-1)
{
uniqueArr.push(i);
}
}
document.write(uniqueArr);
}

var arr1=[1,3,4,6,7];
var arr2=[2,4,4,5];
16
mergearr(arr1,arr2);
</script>
</body>
</html>
Q. Write a JavaScript function to check the first character of a string is uppercase
or not. -4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>first char of String is capital or Not</title>
</head>
<body>
<input type="button" value="Check" onclick="myFunction()">
<script type="text/javascript">
function myFunction()
{
var str="Vikram";
var firstchar=str.charAt(0);
document.write(firstchar);
var patt=/^[A-Z]/;
if(patt.test(firstchar))
{
alert("First char String is Capital");
}
else
{
alert("First char String not is Capital");
}
}

</script>
</body>
</html>

Summer-22
Q. Write a javascript function that accepts a string as a parameter and find the
length of the string. -4M
ANS:

17
<!DOCTYPE html>
<html>
<head>

<title>find length of String</title>


</head>
<body>
<script type="text/javascript">
function accept(str1)
{
var strlen=str1.length;
document.write("Length of String :"+strlen)
}

var str=prompt("Enter String");


accept(str);
</script>
</body>
</html>

Q. Write a javascript to checks whether a passed string is palindrome or not.-6M


ANS:
<!DOCTYPE html>
<html>
<head>
<title>Check Whether String is Palindrome or Not</title>
</head>
<body>
<script type="text/javascript">
var str = prompt("Enter String:");
var len = str.length;
var isPalindrome = true; // Flag to track palindrome status

// Loop to check characters from both ends


for (var i = 0; i < len / 2; i++) {
if (str[i] !== str[len - 1 - i]) {
isPalindrome = false; // Set flag to false if characters don't match
break; // No need to continue checking
}
}
18
if (isPalindrome) {
document.write(str + " is a palindrome.");
} else {
document.write(str + " is not a palindrome.");
}
</script>
</body>
</html>
Q. Develop javascript to convert the given character to unicode and vice-versa. -6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>unicode vice-versa</title>
</head>
<body>
<script type="text/javascript">
var unicode =72;
var char=String.fromCharCode(unicode);
document.write("unicode(72) to char :"+char+"<br>");
var charecter='H';
var chartoUnicode=charecter.charCodeAt(0);
document.write("char to Unicode :"+chartoUnicode);
</script>
</body>
</html>
Q. Write a javascript function to generate Fibonacci series till user defined limit.-6M
ANS:
<!DOCTYPE html>
<html>
<head>

<title>Generate fibonacci series user limit</title>


</head>
<body>
<script type="text/javascript">
var limit=parseFloat(prompt("Enter Limit :"));
var a=0,b=1,c;
19
document.write("Fibonacci Series"+"<br>");
document.write(a+"<br>");
document.write(b+"<br>");

for(var i=2;i<limit;i++)
{
c=a+b;
a=b;
b=c;
document.write(c+"<br>");
}

</script>
</body>
</html>
Winter -23
Q. Write a JavaScript that accepts a number and displays addition of digits of that
number in a message box. -4M
ANS:
<!DOCTYPE html>
<html>
<head>

<title>Addition of Digit and display msg box</title>


</head>
<body>
<script type="text/javascript">
var number1=parseFloat(prompt("Enter Number 1 :"));
var number2=parseFloat(prompt("Enter Number 2 :"));
var add=number1+number2;
alert("Addition :"+add);

</script>
</body>
</html>
Q. Write an HTML script that accepts Amount, Rate of Interest and Period from
user. When user submits the information a JavaScript function must calculate
and display simple interest in a message box. (Use formula S.I. = PNR/100)-4M
ANS:

20
<!DOCTYPE html>
<html>
<head>

<title>Calculate simple Interest</title>


</head>
<body>
<script type="text/javascript">
//P=principal amount
//N=period
//R=Rate of Interest
//S.I=PNR/100
var P=parseInt(prompt("Enter Principal amount :"));
var N=parseInt(prompt("Enter the Period"));
var R=parseInt(prompt("Enter Rate of Interest"));
var SI=(P*N*R)/100;
alert("Simple Interest is :"+SI);
</script>
</body>
</html>

Q. Write a JavaScript that initializes an array called Colors with the names of 3
Colors and display the array elements.-2M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>create three flower array and display</title>
</head>
<body>
<script type="text/javascript">
var colors=new Array();
colors[0]="red";
colors[1]="black";
colors[2]="orange";

for(var i=0;i<colors.length;i++)
{
document.write(colors[i]+"<br>");
21
}
</script>
</body>
</html>
Q. Write JavaScript code to perform following operations on string. (Use split()
method)
Input String : “Sudha Narayana Murthy”
Display output as
First Name : Sudha
Middle Name : Narayana
Last Name : Murthy
-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>spilt method</title>
</head>
<body>
<script type="text/javascript">
// Input string
let inputString = "Sudha Narayana Murthy";

// Split the input string by spaces


let nameParts = inputString.split(" ");

// Display each part


let firstName = nameParts[0];
let middleName = nameParts[1];
let lastName = nameParts[2];

document.write("First Name: " + firstName+"<br>");


document.write("Middle Name: " + middleName+"<br>");
document.write("Last Name: " + lastName);
</script>
</body>
</html>

22
Summer 24
Q. Write a JavaScript program to display the elements of array in ascending and
descending order.
2M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Acending and Decending order of Array Element display</title>
</head>
<body>
<script type="text/javascript">
function order()
{
var arr=[2,1,5,4,3];
document.write("Acending Order :"+arr.sort()+"<br>");
document.write("Decending Order :"+arr.reverse());
}
order();
</script>
</body>
</html>
Q. Write a JavaScript function that checks whether a passed string is palindrome or not.
4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Check Whether String is Palindrome or Not</title>
</head>
<body>
<script type="text/javascript">
var str = prompt("Enter String:");
var len = str.length;
var isPalindrome = true; // Flag to track palindrome status

// Loop to check characters from both ends


for (var i = 0; i < len / 2; i++) {
if (str[i] !== str[len - 1 - i]) {
isPalindrome = false; // Set flag to false if characters don't match
23
break; // No need to continue checking
}
}
if (isPalindrome) {
document.write(str + " is a palindrome.");
} else {
document.write(str + " is not a palindrome.");
}
</script>
</body>
</html>

Unit 3:Form and Event Handling


Winter 19
Q. Write a Java script to design a form to accept values for user ID & password.-2M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<form name="login">
Enter Username: <input type="text" name="userid"><br>
Enter Password: <input type="password" name="pswrd"><br>
<input type="button" onclick="displayData()" value="Display">
</form>
<div id="result"></div>
<script type="text/javascript">
function displayData() {
document.getElementById("result").innerHTML =
"User ID: " + login.userid.value + "<br>" +
"Password: " + login.pswrd.value;
}
</script>
</body>
</html>

24
Q. Write a HTML script which displays 2 radiobuttons to the users for fruits and
vegetable 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.-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>option list fruit and vegetables</title>
<script type="text/javascript">
function updateList(ElementValue)
{
with(document.forms.myform)
{
if (ElementValue==1)
{
optionList[0].text="Mango";
optionList[0].value=1;
optionList[1].text="Banana";
optionList[1].value=2;
optionList[2].text="Apple";
optionList[2].value=3;
}
if (ElementValue==2)
{
optionList[0].text="Potato";
optionList[0].value=1;
optionList[1].text="Cabbage";
optionList[1].value=2;
optionList[2].text="Onion";
optionList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform">

25
<p>
<select name="optionList" size="2">
<option value=1>Mango</option>
<option value=2>Banana</option>
<option value=3>Apple</option>
</select>
<br>
<input type="radio" name="grp1" value=1 checked="true"
onclick="updateList(this.value)">Fruits
<input type="radio" name="grp1" value=2 onclick="updateList(this.value)">Vegetables
<br>
<input type="Reset" value="Reset">
</p>
</form>
</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 -6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Form Name and Email Validation</title>
<script type="text/javascript">
function validate() {
// Check if Name field is empty
if (document.myForm.Name.value == "")
{
alert("Please provide Username");
document.myForm.Name.focus();
return false;
}
// Check if Email field is empty
if (document.myForm.EMail.value == "")
{
alert("Please provide Email");
document.myForm.EMail.focus();
26
return false;
}
// Validate email format
var emailId = document.myForm.EMail.value;
var atpos = emailId.indexOf("@");
var dotpos = emailId.lastIndexOf(".");
if (atpos < 1 || (dotpos - atpos < 2))
{
alert("Please provide a Correct Email");
document.myForm.EMail.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validate();">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="EMail" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>

Winter 22
Q. Write HTML script that will display dropdown list containing options such as
Red, Green, Blue & Yellow. Write a JavaScript program such that when the
user selects any options. It will change the background colour of webpage.-6M
27
ANS:
<!DOCTYPE html>
<html>
<head>
<title>change background from from drop down list</title>
</head>
<body>
<label>Selects Color From Drop-Down List:</label>
<select name="color" id="color" onchange="changeColor()">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<script type="text/javascript">
function changeColor()
{
var color=document.getElementById("color").value;
switch(color)
{
case 'red':
document.body.style.backgroundColor="red";
break;
case 'green':
document.body.style.backgroundColor="green";
break;
case 'blue':
document.body.style.backgroundColor="blue";
break;
case 'yellow':
document.body.style.backgroundColor="yellow";
break;
default:
document.body.style.backgroundColor="white";
break;
}
}
</script>
</select>
</body>
</html>
28
Summer 22
Q. Write HTML code to design a form that displays 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.-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<form name="myForm">
<fieldset>
<label>Enter Number 1:</label><input type="number" name="number1">
<br><br>
<label>Enter Number 2:</label><input type="number" name="number2">
<br><br>
<button type="button" onclick="Add()">Addition</button>
<button type="button" onclick="Sub()">Subtraction</button>
<button type="button" onclick="Mul()">Multiplication</button>
<button type="button" onclick="Div()">Division</button>
<p id="output">Output</p>
</fieldset>
</form>

<script type="text/javascript">
function Add()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
var add = a + b;
document.getElementById("output").innerHTML = "Addition: " + add;
}
function Sub()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
29
var sub = a - b;
document.getElementById("output").innerHTML = "Subtraction: " + sub;
}
function Mul()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
var mul = a * b;
document.getElementById("output").innerHTML = "Multiplication: " + mul;
}
function Div()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
if (b === 0)
{
document.getElementById("output").innerHTML = "Division: Cannot divide by
zero";
}
else
{
var div = a / b;
document.getElementById("output").innerHTML = "Division: " + div;
}
}
</script>
</body>
</html>
Q. Write a javascript program to demonstrate java intrinsic function.—4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>intrinsic function</title>
</head>
<body>
<script type="text/javascript">
let num=-42;
document.write("Abosolute value of -42 :"+Math.abs(num)+"<br>");

30
let angle=Math.PI/2;
document.write("Sine of 90 degrees (π/2 radians):"+Math.sin(angle)+"<br>");

let number=25;
document.write("Square root of 25:"+ Math.sqrt(number)+"<br>");

let currentDate = new Date();


document.write("Current date:"+ currentDate.toDateString()+"<br>");

let text = "Hello, World!";


document.write("Number of characters in 'Hello, World!':"+ text.length+"<br>");

let integerString = "123";


document.write("String '123' converted to integer:"+ parseInt(integerString)+"<br>");

let floatString = "3.14159";


document.write("String '3.14159' converted to float:"+ parseFloat(floatString));
</script>
</body>
</html>
Winter 2023
Q. Write an HTML Script that displays the following webpage output :

The user enters two numbers in respective text boxes. Write a JavaScript such
that when user clicks “add”, a message box displays sum of two entered numbers, if the
user clicks on “sub”, message box displays subtraction of two numbers and on clicking
“mul” the message box displays multiplication of two numbers.-4M

31
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<form name="myForm">
<fieldset>
<label>Enter Number 1:</label><input type="number" name="number1">
<br><br>
<label>Enter Number 2:</label><input type="number" name="number2">
<br><br>
<button type="button" onclick="Add()">Addition</button>
<button type="button" onclick="Sub()">Subtraction</button>
<button type="button" onclick="Mul()">Multiplication</button>

</fieldset>
</form>
<script type="text/javascript">
function Add()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
var add = a + b;
alert("Addition :"+add);
}
function Sub()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
var sub = a - b;
alert("Subtraction :"+sub);
}
function Mul()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
var mul = a * b;
alert("Multiplication :"+mul);
32
}
</script>
</body>
</html>
Q. Write HTML and respective JavaScript such that
(i) Webpage displays three checkboxes as :

ANS:
i.
<!DOCTYPE html>
<html>
<head>
<title>select checkboxes</title>

33
<style type="text/css">
#beverage
{
margin-left: 130px;
}
</style>
</head>
<body>
<form>
<fieldset>
<label>Select Beverage :</label>
<div id="beverage">
<label>Tea</label><input type="checkbox" name="" value="Tea"><br>
<label>Coffee</label><input type="checkbox" name=""
value="Coffee"><br>
<label>Soft Drink</label><input type="checkbox" name="" value="Soft
Drink">
</div>
</fieldset>
</form>
</body>
</html>
ii.
<!DOCTYPE html>
<html>
<head>
<title>Select Beverages</title>
<style type="text/css">
#beverage {
margin-left: 130px;
}
</style>
</head>
<body>
<form name="myform">
<fieldset>
<legend>Select Beverage:</legend>
<div id="beverage">
<label>Tea</label>
<input type="checkbox" name="tea" onclick="updateDropdown('tea')">
34
<br>
<label>Coffee</label>
<input type="checkbox" name="coffee" onclick="updateDropdown('coffee')">
<br>
<label>Soft Drink</label>
<input type="checkbox" name="softdrink" onclick="updateDropdown('softdrink')">
<br>
<select name="beverageDropdown" size="3">
<option>Select a beverage</option>
</select>
</div>
</fieldset>
</form>
<script type="text/javascript">
function updateDropdown(choice) {
// Get the dropdown element
var dropdown = document.forms.myform.beverageDropdown;
// Clear existing options
dropdown.options.length = 0;
// Populate dropdown based on selected checkbox
if (choice === "tea")
{
dropdown.options[0] = new Option("Green Tea", "1");
dropdown.options[1] = new Option("Milk Tea", "2");
dropdown.options[2] = new Option("Black Tea", "3");
}
else if (choice === "coffee")
{
dropdown.options[0] = new Option("Cappuccino", "1");
dropdown.options[1] = new Option("Latte", "2");
dropdown.options[2] = new Option("Espresso", "3");
}
else if (choice === "softdrink")
{
dropdown.options[0] = new Option("Maaza", "1");
dropdown.options[1] = new Option("Sprite", "2");
dropdown.options[2] = new Option("Coca-Cola", "3");
}
}
</script>
35
</body>
</html>

Q. Write a JavaScript that accepts user’s first name and domain name of
organization from user. The JavaScript then forms email address as
<firstname@domain name> and displays the results in the browser window.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>create email format</title>
</head>
<body>
<fieldset>
<form name="myform">
Enter User Name:<input type="text" name="username"><br>
Enter Domain Name:<input type="text" name="domain"><br>
<input type="button" value="Submit" onclick="getemailformat()">
</form>
</fieldset>
<script type="text/javascript">
function getemailformat()
{
var username=document.forms.myform.username.value;
var domain=document.forms.myform.domain.value;
var email=username+"@"+domain;
document.write("Email :"+email);
}
</script>
</body>
</html>

Summer-23
Q. Write HTML code to design a form that displays 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.-6M
36
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<form name="myForm">
<fieldset>
<label>Enter Number 1:</label><input type="number" name="number1">
<br><br>
<label>Enter Number 2:</label><input type="number" name="number2">
<br><br>
<button type="button" onclick="Add()">Addition</button>
<button type="button" onclick="Sub()">Subtraction</button>
<label>Output :</label><input type="text" name="output" readonly>

</fieldset>
</form>
<script type="text/javascript">
function Add()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
var add = a + b;
document.myForm.output.value = "Addition: " + add;
}

function Sub()
{
var a = parseFloat(document.myForm.number1.value);
var b = parseFloat(document.myForm.number2.value);
var sub = a - b;
document.myForm.output.value = "Subtraction: " + sub;
}
</script>
</body>
</html>

37
Summer 2024
Q. Write HTML script that displays textboxes for accepting username and password.
Write proper JavaScript such that when the user clicks on submit button
i) All textboxes must get disabled and change the color to ‘RED; and with respective
labels
ii) Prompt the error message if the password is less than six characters -6M
ANS:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<fieldset>
<form name="myform">
<label id="l1">Enter User Name:</label><input type="text" name="username"
id="username">
<br>
<br>
<label id="l2">Enter Password:</label><input type="password" name="pwd"
id="password">
<br>
<input type="button" onclick="disableTxt()" value="Disbled element">
</form>
</fieldset>
<script type="text/javascript">
function disableTxt()
{
var username=document.forms.myform.username.value;
var password=document.forms.myform.pwd.value;

document.getElementById("username").disabled=true;
document.getElementById("username").style.color='red';

document.getElementById("password").disabled=true;
document.getElementById("password").style.color='red';

document.getElementById("l1").style.color='red';
document.getElementById("l2").style.color='red';
38
if(username===)
{
alert("Please provide username");
}
else if(password.length<8)
{
alert("Please enter password more than 8 digit");
}
}
</script>
</body>
</html>

Unit 4
Cookies and Browser Data
Winter 22
Q. Write a JavaScript function that will open new window when the user will
clicks on the button.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>open window when click button</title>
</head>
<body>
<button onclick="openWin()">Open new Window</button>
<script type="text/javascript">
var myWindow;
function openWin()
{
myWindow=window.open("","myWindow","width=400,height=400");
myWindow.document.write("<p>Helloo Everyone welcome to new
Window</p>");
}
</script>
</body>
</html>

39
Q. Write a webpage that displays a form that contains an input for username &
password. User is prompted to entre the input & password & password
becomes the value of the cookie. Write a JavaScript function for storing the
cookie. It gets executed when the password changes.—6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>StoreCookie</title>
</head>
<body>
<fieldset>
<form name="myform">
Enter Username:<input type="text" id="usr"><br>
Enter Password:<input type="password" id="pwd"><br>
<input type="button" value="Submit" onclick="storeCookie()">
<p id="panel"></p>
</fieldset>
<script type="text/javascript">
function storeCookie()
{
var pwd=document.getElementById('pwd').value;
document.cookie="Password="+pwd+";";
alert("Cookie Stored\n"+document.cookie);
}
</script>
</form>
</body>
</html>
Summer-22
Q. Write a javascript program to changing the contents of a window.-2M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Changing the Content of Window</title>
</head>
<body>
<input type="button" value="Msg1" onclick="Msg1()">
40
<input type="button" value="Msg1" onclick="Msg2()">
<p id="para">Hello Javascript</p>
<script type="text/javascript">
function Msg1()
{
document.getElementById("para").innerHTML="Javascript Easy Language";
}
function Msg2()
{
document.getElementById("para").innerHTML="Javascript use for Validation";
}
</script>
</body>
</html>
Q. Write a javascript program to create read, update and delete cookies.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>cookie</title>
</head>
<body>
<form name="myform">
Enter Username:<input type="text" name="uname"><br>
Enter Password:<input type="password" name="uPass"><br>
<input type="button" onclick="CreateCookie()" value="CrateCookie"><br>
<input type="button" onclick="ReadCookie()" value="ReadCookie"><br>
<input type="button" onclick="DeleteCookie()" value="DeleteCookie"><br>
<br>
Enter New Password:<input type="password" name="nPass"><br>
<input type="button" onclick="UpdateCookie()" value="UpdateCookie"><br>
<script type="text/javascript">
var x;
function CreateCookie()
{
var d=new Date();
d.setTime(d.getTime()+(7*24*60*60));
with(document.myform)
{

41
document.cookie="Username:"+uname.value+"Password:"+uPass.value;
expires=+d.toGMTString();
x=document.cookie;
alert("Cookie Store Successfully");
}
}
function ReadCookie()
{
if(x==="")
{
alert("Cookie not Found");
}
else
{
alert(x);
}
}
function DeleteCookie()
{
var d=new Date();
d.setTime(d.getTime()-(7*24*60*60));
with(document.myform)
{
document.cookie="Username:"+uname.value+"Password:"+uPass.value;
expires=+d.toGMTString();
x="";
alert("Cookie Delete Successfully");
}
}
function UpdateCookie()
{
var d=new Date();
d.setTime(d.getTime()+(7*24*60*60));
with(document.myform)
{
document.cookie="Username:"+uname.value+"Password:"+nPass.value;
expires=+d.toGMTString();
x=document.cookie;
alert("Cookie Updpate Successfully");
}
42
}
</script>
</form>
</body>
</html>

Q. Write a javascript to open a new window and the new window is having two
frames. One frame containing buthon as “click here !”, and after clicking this
button an image should open in the second frame of that child window.-6M
ANS:
Windowopen.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Window</title>
</head>
<body>
<input type="button" onclick="openNewWin()" value="Open New Window">
<script type="text/javascript">
function openNewWin()
{
window.open("frame.html", "", "width=600,height=400" );
}
</script>
</body>
</html>
Frame.html
<!DOCTYPE html>
<html>
<head>
<title>Iframes Example</title>
</head>
<body>
<div class="frame-container">
<iframe src="f1.html" name="f1" class="frame"></iframe>
<iframe src="f2.html" name="f2" class="frame"></iframe>
</div>
</body>
</html>
43
F1.html
<!DOCTYPE html>
<html>
<head>
<title>frame1</title>
</head>
<body>
<script type="text/javascript">
function openImage()
{
parent.frames['f2'].location.href="https//flowerimage.png"
}
</script>
<input type="button" value="Load Image" onclick="openImage()">
</body>
</html>

F2.html
<!DOCTYPE html>
<html>
<head>
<title>frame 2</title>
</head>
<body>
<p>Image load here</p>
</body>
</html>

Q. Write a javascript to create option list containing list of images and then
display images in new window as per selection.-6M
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Selector</title>
</head>
<body>
<select id="imageSelect" onchange="openImage()">
<option value="">--Select an image--</option>
<option value="apple.jpg">Apple</option>
44
<option value="mango.jpg">Mango</option>
<option value="banana.jpg">Banana</option>
</select>

<script>
// Function to open the selected image in a new window
function openImage()
{
const selectElement = document.getElementById("imageSelect");
const selectedOption = selectElement.value;
let imageUrl = "";

switch (selectedOption)
{
case "apple.jpg":
imageUrl = "apple.jpg";
break;
case "mango.jpg":
imageUrl = "mango.jpg";
break;
case "banana.jpg":
imageUrl = "banana.jpg";
break;
default:
alert("Please select an image.");
return;
}

if (imageUrl)
{
window.open(imageUrl, "newWindow", "width=600,height=400");
}
}
</script>
</body>
</html>

45
Winter 23
Q. Write a JavaScript that opens a new popup window with message “WELCOME To
SCRIPTING”
when the page loads and a new popup window displaying message “FUN
WITH SCRIPTING” when the page unloads.
ANS:
<!DOCTYPE html>
<html>
<head>
<title>popup new window</title>
</head>
<body onload="openWin()">
<script type="text/javascript">
function openWin()
{
var myWindow=window.open("","MyWindow","width=200,height=100");
myWindow.document.write("WELCOME TO SCRIPTING");
function closeWin()
{
alert("FUN WITH JAVASCRIPT");
}
myWindow.unload=closeWin();

}
</script>
</body>
</html>
Summer-23
Q. Write HTML code to design a form that displays 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)-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
</head>
<body>
<input type="button" id="start" value="Start" onclick="start()">
46
<input type="button" id="stop" value="Stop" onclick="stop()">
<p id="clock"></p>
<script type="text/javascript">
var interval; // Declare interval variable globally

// Start function to start the clock


function start()
{
interval = setInterval(updateClock, 1000); // Set interval to call updateClock every
second
}
// Stop function to stop the clock
function stop()
{
clearInterval(interval); // Clear the interval
}
// Update the clock every second
function updateClock() {
var now = new Date(); // Get the current time
let hours = now.getHours(); // Get hours
let minutes = now.getMinutes(); // Get minutes
let seconds = now.getSeconds(); // Get seconds

// Format time to always show two digits


hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;

// Display the time in the format HH:MM:SS


var time = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock").innerHTML = time;
}
</script>
</body>
</html>
Q. Write a webpage that displays a form that contains an input for students rollno and
names user is prompted to enter the input student rollno and name and rollno becomes
value of the cookie. -6M
ANS:

47
<!DOCTYPE html>
<html>
<head>
<title>Write and Read Cookie</title>
</head>
<body>
<form name="myform">
Enter Student Name: <input type="text" name="sname"><br>
Enter Student Roll No: <input type="text" name="sroll"><br>
<input type="button" onclick="WriteCookie()" value="Submit">
<input type="button" onclick="ReadCookie()" value="Getcookie">
</form>
<script type="text/javascript">
var x;
function WriteCookie()
{
with(document.myform)
{
if ( sname.value!== && sroll.value !== )
{
var d = new Date();
d.setTime(d.getTime() + (10 * 60 * 1000)); // expires in 10 minutes
document.cookie="Student Name:"+sname.value+" Roll-No:"+sroll.value;
expires=+d.toGMTString();
x=document.cookie;
alert("Cookie Store Successfully");
}
else
{
alert("Please provide both name and roll number.");
}
}
}
function ReadCookie()
{
if(x==="")
{
alert("Cookie Not Found");
}
else
48
{
alert(x);
}
}
</script>
</body>
</html>

Unit 5
Regular Expression rollover and Frames
Winter 19
Q Write a script for creating following frame structure -6M

FRUITS, FLOWERS and CITIES are links to the webpage fruits.html,


flowers.html, cities.html respectively. When these links are clicked
corresponding data appears in FRAME 3.
ANS:

frameStructure.html
<!DOCTYPE html>
<html>
<head>
<title>frame structure</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" align="center">Frame 1</td>

</tr>
<tr>
49
<td>
Frame 2
<ul>
<li><a href="fruits.html" target="mainframe">Fruits</li>
<li><a href="flowers.html" target="mainframe">Flowers</li>
<li><a href="cities.html" target="mainframe">Cities</li>
</ul>
</td>
<td>
<p>Frame 3</p>
<iframe name="mainframe"></iframe>
</td>
</tr>
</table>
</body>
</html>

Friuts.html
<!DOCTYPE html>
<html>
<head>
<title>fruits</title>
</head>
<body>
<h1>Fruits File</h1>
<p>Apple,Mango,Chikku</p>
</body>
</html>

Flower.html
<!DOCTYPE html>
<html>
<head>
<title>flowers</title>
</head>
<body>
<h1>Flowers File</h1>
<p>Sunflower,Rose,Mogra</p>
</body>
</html>
50
Cities.html
<!DOCTYPE html>
<html>
<head>
<title>Cities</title>
</head>
<body>
<h1>Cities File</h1>
<p>Chh Sambhaji-Nagar CSN ,Nashik -NSK</p>
</body>
</html>

Winter -22
Q. Write a JavaScript function to check the first character of a string is uppercase
or not.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Check if First Character is Uppercase</title>
</head>
<body>
<script type="text/javascript">
let str = prompt("Enter String:");

function checkFirstCharUppercase()
{
let regexp = /^[A-Z]/;
if (regexp.test(str))
{
document.write("The first character of the string is uppercase.");
}
else
{
document.write("The first character of the string is not
uppercase.");
}
}
checkFirstCharUppercase();
51
</script>
</body>
</html>
Q. Write HTML script that will display following structure

Write the JavaScript code for below operations :


(1) Name, Email & Pin Code should not be blank.
(2) Pin Code must contain 6 digits & it should not be accept any characters.-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<table border="1">
<form name="myform">
<tr>
<td>Name </td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Email </td>
<td><input type="email" id="email"></td>
</tr>
<tr>
<td>Pincode </td>
<td><input type="text" id="pin"></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick="ValidationForm()" value="Submit"></td>
</tr>
</form>
</table>
52
</body>
<script type="text/javascript">
function ValidationForm()
{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var pin = document.getElementById("pin").value;

// Check if all fields are filled


if (name === "" || email === "" || pin === "")
{
alert("Please provide all values");
return;
}

// Check pin pattern


var pinpattern = /^[4][0-9]{5}$/;
if (pinpattern.test(pin))
{
alert("Pin is Perfect");
}
else
{
alert("Wrong Pin Code");
}
}
</script>
</html>
Note:
var pinpattern = /^[4][0-9]{5}$/;
^: This is the start anchor. It ensures that the match must start at the beginning of the
string.
[4]: This part specifies that the first character in the string must be the digit "4". The square
brackets [] denote a character set, which allows any one of the characters inside it to match.
In this case, [4] only has one option: the digit "4".
[0-9]{5}:
• [0-9]: This character set matches any single digit from 0 to 9.
• {5}: This quantifier specifies that the previous character set ([0-9]) must occur exactly
5 times. This means that after the initial "4," there must be exactly five digits (0-9).
$: This is the end anchor. It ensures that the match must end at the end of the string.
53
Q. Write a JavaScript for creating following frame structure-6M

Chapter 1 & Chapter 2 are linked to the webpage Ch1 HTML & Ch2.html
respectively. When user click on these links corresponding data appears in
FRAME3.
ANS:
frameStruct.html
<!DOCTYPE html>
<html>
<head>
<title>frame structure</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" align="center">TYIF</td>
</tr>
<tr>
<td>
Operating system
<ul>
<li><a href="ch1.html" target="mainframe">Chapter 1</li>
<li><a href="ch2.html" target="mainframe">Chapter 2</li>
</ul>
</td>
<td>
<p>Frame 3</p>
<iframe name="mainframe"></iframe>
</td>
</tr>
</table>
</body>
</html>
Ch1.html
54
<!DOCTYPE html>
<html>
<head>
<title>ch1</title>
</head>
<body>
<h3>Basic of OS</h3>
<p>An operating system is the most important software that runs on a computer. It manages
the computer's memory and processes, as well as all of its software and hardware. It also
allows you to communicate with the computer without knowing how to speak the computer's
language.</p>
</body>
</html>

Ch2.html
<!DOCTYPE html>
<html>
<head>
<title>ch1</title>
</head>
<body>
<h3>System call</h3>
<p>A system call is a programmatic way for a computer program to request services from
the operating system (OS) it's running on. System calls allow programs to interact with the
OS without directly accessing system resources.
</p>
</body>
</html>

Summer 22
Q. Write a javascript program to validate email ID of the user using regular
expression.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>validate email Id using regExg</title>
</head>
<body>
55
<form name="myform">
Enter Email:<input type="text" id="email"><br>
Enter Password:<input type="text" id="pass"><br>
<input type="button" onclick="validateEmail()" value="Login">
</form>
</body>
<script type="text/javascript">

function validateEmail()
{
var email=document.getElementById("email").value;
var password=document.getElementById("pass").value;
if(email=== || password===)
{
alert("pls provide both value");
}
else
{
var emailPattern=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if(emailPattern.test(email))
{
alert("Login Successfully");
}
else
{
alert("pls provide valid email Like :example123@gmail.com")
}

}
</script>
</html>

56
Q. Write a javascript program to design HTML page with books information in
tabular format, use rollovers to display the discount information.-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Rollover for Books - Hover to Show Discount</title>
</head>
<body>
<table border="1">
<tr>
<th>Book Title</th>
<th>Author</th>
<th>Price</th>
<th>Discount Price</th>
</tr>
<tr>
<td onmouseover="displayDiscount('disinfo1', '20%')"
onmouseout="clearDiscount('disinfo1')">CGR</td>
<td>Ram Raj</td>
<td>450rs</td>
<td id="disinfo1"></td>
</tr>
<tr>
<td onmouseover="displayDiscount('disinfo2', '15%')"
onmouseout="clearDiscount('disinfo2')">OSY</td>
<td>OM Raj</td>
<td>400rs</td>
<td id="disinfo2"></td>
</tr>
<tr>
<td onmouseover="displayDiscount('disinfo3', '10%')"
onmouseout="clearDiscount('disinfo3')">AJP</td>
<td>Prem Raj</td>
<td>300rs</td>
<td id="disinfo3"></td>
</tr>
<tr>
<td onmouseover="displayDiscount('disinfo4', '18%')"
onmouseout="clearDiscount('disinfo4')">DBMS</td>
57
<td>Jay Raj</td>
<td>420rs</td>
<td id="disinfo4"></td>
</tr>
</table>

<script type="text/javascript">
// Function to display the discount when hovering over a book title
function displayDiscount(elementId, discount)
{
document.getElementById(elementId).innerHTML = discount;
}

// Function to clear the discount when the mouse is no longer hovering


function clearDiscount(elementId)
{
document.getElementById(elementId).innerHTML = ;
}
</script>
</body>
</html>

Q. Write a JavaScript that accepts a string and searches for the pattern “MSBTE”
in the given string using regular expressions. If the pattern is found,
JavaScript will display that “Pattern is found” else display “Pattern is not
found”.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>regex</title>
</head>
<body>
<script type="text/javascript">
function check()
{
var str=prompt("Enter String :");
var pattern=/MSBTE/g;
if(pattern.test(str))
{
58
alert("MSBTE found in String");
}
else
{
alert("MSBTE not Found");
}
}
check();
</script>
</body>
</html>

Q. Write an HTML script that displays names of different brands of Laptop and
an image by default as :

When the mouse moves over the specific brand name the script must display
the image of respective Laptop in the adjacent box.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Roll-over Text</title>
</head>
<body>
<fieldset>
<ul>
<li><a
onmouseover="document.cover.src='levano.jpeg'">Lenovo</a></li>
<li><a onmouseover="document.cover.src='hp.jpeg'">HP</a></li>
<li><a onmouseover="document.cover.src='dell.jpeg'">Dell</a></li>
</ul>
</fieldset>
59
<!-- Image element to display the corresponding image on hover -->
<img name="cover" src="default.jpg" alt="Hover over a brand to see the image"
style="width: 300px; height: auto;">
</body>
</html>

Q. Form regular expressions for following :


(i) Validation of email address.
(ii) Validation of adhaar card. Format is
dddd – dddd – dddd
(iii) Validation of phone number. Format is
(ddd) – (dddddddd) -6M
ANS:
(i) Email Address Validation
Regex:
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
Explanation:
- `^` - Start of the string.
- `[a-zA-Z0-9._%+-]+` - Allows letters, numbers, and special characters (._%+-) before the
"@" symbol.
- `@` - Requires an "@" symbol.
- `[a-zA-Z0-9.-]+` - Allows letters, numbers, dots, and hyphens after the "@" symbol.
- `\.` - Matches a literal dot.
- `[a-zA-Z]{2,}` - Ensures a domain extension of at least 2 letters (like ".com" or ".org").
- `$` - End of the string.

(ii) Aadhaar Card Validation (Format: `dddd – dddd – dddd`)


Regex:
^\d{4}-\d{4}-\d{4}$
Explanation:

60
- `^` - Start of the string.
- `\d{4}` - Matches exactly 4 digits.
- `-` - Requires a hyphen after each set of 4 digits.
- Repeats `\d{4}-` two more times for the 12-digit Aadhaar number.
- `$` - End of the string.

(iii) Phone Number Validation (Format: `(ddd) – (dddddddd)`)


Regex:
^\(\d{3}\)-\(\d{8}\)$
Explanation:
- `^` - Start of the string.
- `\(\d{3}\)` - Matches 3 digits enclosed in parentheses for the area code.
- `-` - Requires a hyphen after the area code.
- `\(\d{8}\)` - Matches 8 digits enclosed in parentheses for the main number.
- `$` - End of the string.
Q. (i) Design frameset tag for representing following layout :-3M

ANS:

61
<!DOCTYPE html>
<html>
<head>
<title>frame structure using frameset</title>
</head>
<frameset rows="10%,*" border="5" frameborder="1" bordercolor="black" noresize>
<frame src="frame1.html"></frame>
<frameset cols="33%,33%,34%" border="5" frameborder="1" bordercolor="black"
noresize>
<frame src="frame2.html"></frame>
<frame src="frame3.html"></frame>
<frame src="frame4.html"></frame>
</frameset>
</frameset>
</html>
Q. Write HTML code to design a form that displays textboxes for accepting
UserID and Aadhar No. and a SUBMIT button. UserID 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.-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Aadhar Number validation</title>
</head>
<body>
<form name="myform">
Enter UserID:<input type="text" id="uid"><br>
Enter Aadhar No:<input type="text" id="aadharno"><br>
<input type="button" onclick="ValidateForm()" value="Submit">
</form>
62
</body>
<script type="text/javascript">
function ValidateForm()
{
var uid=document.getElementById("uid").value;
var aadharno=parseInt(document.getElementById("aadharno").value);
if(uid=== || aadharno===)
{
alert("Pls provide both value")
}
else
{
var userPattern=/^[A-Z]/;
var aadharPattern ^\d{4}-\d{4}-\d{4}$;
if(userPattern.test(uid))
{
alert("Corrected UserID");
}
else
{
alert("Pls Provide Coorect Username ");
}
if(aadharPattern.test(aadharno))
{
alert("Corrected Aadhar Number");
}
else
{
alert("Enter Corect Aadhar Number");
}
}
}
</script>
</html>

Q. Write a script for creating following frame structure :


Frame 1 contains three buttons SPORT, MUSIC and DANCE that will
perform following action :
When user clicks SPORT button, sport.html webpage will appear in Frame 2.
When user clicks MUSIC button,music.html webpage will appear in Frame 3.
When user clicks DANCE button,dance.html webpage will appear in Frame 4.

63
ANS:
Later

Summer 24
Q. Write a JavaScript to create rollover effect that involves text and images. When the
user places his or her mouse pointer over a book title, the corresponding book images
appears -6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>text rollover to display image</title>
</head>
<body>
<table border="1px">
<tr>
<td><img src="default.png" name="img1"></td>
<td><a onmouseover="document.img1.src='child.jpeg'">Child Book</a></td>
</tr>
<tr>
<td><img src="default.png" name="img2"></td>
<td><a onmouseover="document.img2.src='edu.jpeg'">Eductional
Book</a></td>
</tr>
<tr>
<td><img src="default.png" name="img3"></td>
<td><a onmouseover="document.img3.src='gru.jpeg'">Graudution
Book</a></td>
</tr>
<tr>
64
<td><img src="default.png" name="img4"></td>
<td><a onmouseover="document.img4.src='dip.jpeg'">Diploma
Book</a></td>
</tr>
</body>
</html>

Unit 6
Menus navigation & webpage Protection
Winter 19
Q. Create a slideshow with the group of three images, also simulate next and
previous transition between slides in your Java script.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<script>
var pics = ['1.jpeg', '3.png', '2.jpeg'];
var count = 0;
function slideshow(status) {
if (document.images)
{
count = count + status;
if (count > (pics.length - 1))
{
count = 0;
}
if (count < 0)
{
count = pics.length - 1;
}
document.getElementById("img1").src = pics[count];
}
}
</script>
</head>
<body>
<center>
<img id="img1" src="1.jpeg" width="200" height="200"><br>
<input type="button" value="Next" onclick="slideshow(1)">
<input type="button" value="Back" onclick="slideshow(-1)">
</center>
</body>
</html>
65
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.
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Pull Down Menu</title>
</head>
<body>
<form name="myform">
Select Your Favourite Website:
<select name="MenuChoice" onchange="getPageLink(this)">
<option value="">--Select--</option>
<option value="https://www.google.com/">Google</option>
<option value="https://msbte.ac.in/">MSBTE</option>
<option value="https://in.yahoo.com/">Yahoo</option>
</select>
</form>

<script type="text/javascript">
function getPageLink(choice)
{
var page = choice.options[choice.selectedIndex].value;
if (page !== "")
{
window.location.href = page;
}
}
</script>
</body>
</html>

Winter 22
Q. 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.-4M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Pull Down Menu</title>
</head>
<body>
<form name="myform">
Select Your Favourite Website:
66
<select name="MenuChoice" onchange="getPageLink(this)">
<option value="">--Select--</option>
<option value="https://www.google.com/">Google</option>
<option value="https://msbte.ac.in/">MSBTE</option>
<option value="https://in.yahoo.com/">Yahoo</option>
</select>
</form>

<script type="text/javascript">
function getPageLink(choice)
{
var page = choice.options[choice.selectedIndex].value;
if (page !== "")
{
window.location.href = page;
}
}
</script>
</body>
</html>

Q. Develop a JavaScript program to create Rotating Banner Ads.-6M


ANS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Banner Linking with JavaScript</title>
<script type="text/javascript">
var banners = [
{ image: "banner1.jpeg", url: "https://www.flipkart.com/" },
{ image: "banner2.png", url: "https://www.amazon.in/" },
{ image: "banner3.png", url: "https://www.shopsy.in/" },
{ image: "banner4.png", url: "https://www.meesho.com/" }
];

var currentIndex = 0;

function updateBanner()
{
var bannerImg = document.getElementById('bannerImage');
var bannerLink = document.getElementById('bannerLink');
bannerImg.src = banners[currentIndex].image;
bannerLink.href = banners[currentIndex].url;
currentIndex = (currentIndex + 1) % banners.length;
67
}

window.addEventListener('load', function()
{
updateBanner();
setInterval(updateBanner, 5000);
});
</script>
</head>
<body>
<center>
<a id="bannerLink" href="#">
<img id="bannerImage" src="" width="900" height="120" alt="Banner
Advertisement" />
</a>
</center>
</body>
</html>

Q. Write a JavaScript for the folding tree menu.-6M


ANS:
<!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</title>
<style>
/* Style for the tree menu */
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

li {
padding: 5px 10px;
cursor: pointer;
}

.nested {
display: none;
padding-left: 20px;
}

68
.active {
display: block;
}
</style>
</head>
<body>

<h2>Folding Tree Menu</h2>

<ul>
<li onclick="toggleMenu(event)">Item 1
<ul class="nested">
<li onclick="toggleMenu(event)">Sub-item 1.1
<ul class="nested">
<li onclick="toggleMenu(event)">Sub-item 1.1.1
<ul class="nested">
<li>Sub-item 1.1.1.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<script>
function toggleMenu(event)
{
// Prevent the click from bubbling up to the parent li
event.stopPropagation();

// Find the nested <ul> element


const nestedMenu = event.target.querySelector('ul');

// If there is a nested menu, toggle its visibility


if (nestedMenu)
{
nestedMenu.classList.toggle('active');
}
}
</script>

</body>
</html>

Summer 22
69
Q.Write a javascript program to link banner advertisements to different URLs.
ANS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Banner Linking with JavaScript</title>
<script type="text/javascript">
var banners = [
{ image: "banner1.jpeg", url: "https://www.flipkart.com/" },
{ image: "banner2.png", url: "https://www.amazon.in/" },
{ image: "banner3.png", url: "https://www.shopsy.in/" },
{ image: "banner4.png", url: "https://www.meesho.com/" }
];

var currentIndex = 0;

function updateBanner()
{
var bannerImg = document.getElementById('bannerImage');
var bannerLink = document.getElementById('bannerLink');
bannerImg.src = banners[currentIndex].image;
bannerLink.href = banners[currentIndex].url;
currentIndex = (currentIndex + 1) % banners.length;
}

window.addEventListener('load', function()
{
updateBanner();
setInterval(updateBanner, 5000);
});
</script>
</head>
<body>
<center>
<a id="bannerLink" href="#">
<img id="bannerImage" src="" width="900" height="120" alt="Banner
Advertisement" />
</a>
</center>
</body>
</html>

70
Q. Write a javascript program to create a silde show with the group of six
images, also simulate the next and previous transition between slides in your
javascript.-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<script>
var pics = ['1.jpeg', '2.jpeg', '3.jpeg'];
var count = 0;
function slideshow(status)
{
if (document.images)
{
count = count + status;
if (count > (pics.length - 1))
{
count = 0;
}
if (count < 0)
{
count = pics.length - 1;
}
document.getElementById("img1").src = pics[count];
}
}
</script>
</head>
<body>
<center>
<img id="img1" src="1.jpeg" width="200" height="200"><br>
<input type="button" value="Next" onclick="slideshow(1)">
<input type="button" value="Back" onclick="slideshow(-1)">
</center>
</body>
</html>

Winter 23
Q. Write a JavaScript that demonstrates use of floating menu alongwith
respective HTML script.-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>floating Menu</title>
71
<style type="text/css">
#floatingMenu
{
background-color: black;
border-radius: 10px;
width: 200px;
padding: 10px;
color: white;
position: fixed;
margin-top: 10px;
}

.menu a
{
display: block;
color: white;
text-decoration: none;

}
</style>
</head>
<body>
<div id="floatingMenu">
<nav class="menu">
<h3>Floating Menu</h3>
<a href="https://www.w3schools.com/c/c_intro.php">C</a>
<a href="https://www.w3schools.com/cpp/">C++</a>
<a href="https://www.w3schools.com/js/">Javascript</a>
</nav>
</div>
</body>
</html>

Q. Write a JavaScript that sets a crawling status bar message to the webpage.
Message is “Welcome to the Mystic World of JavaScript”.
The message must start crawling when the webpage gets loaded.-6M
ANS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crawling Message</title>
<style>
#crawlingMessage {
72
width: 100%;
white-space: nowrap;
background-color: black;
color: white;
font-size: 20px;
padding: 10px;
position: fixed;
top: 0;
}
#messageText
{
position: relative;
}
</style>
</head>
<body>

<div id="crawlingMessage">
<span id="messageText">Welcome to the Mystic World of JavaScript</span>
</div>

<script>
let message = document.getElementById('messageText');
let position = window.innerWidth; // Start from the right of the screen

function moveMessage()
{
position--; // Move the message left by 1px
if (position < -message.offsetWidth)
{
position = window.innerWidth;
// Reset position to the right when it goes off-screen
}
message.style.left = position + 'px';
}

setInterval(moveMessage, 20); // Move the message every 20ms


</script>

</body>
</html>

73
Summer 23
Q. What is Status bar and how to display moving message on the status line of a
window using JavaScript ?-4M
ANS:
i)

1. A **status bar** displays information or feedback to users, such as loading progress or


status messages.
2. It is often shown at the top or bottom of a webpage.
3. JavaScript can update the status bar by changing the content or style of an HTML element.
4. The content of the status bar can be updated in real time using JavaScript.
5. You can update the status bar by modifying properties like `innerText` or `innerHTML` in
JavaScript.
ii)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crawling Message</title>
<style>
#crawlingMessage {
width: 100%;
white-space: nowrap;
background-color: black;
color: white;
font-size: 20px;
padding: 10px;
position: fixed;
top: 0;
}
#messageText
{
position: relative;
}
</style>
</head>
<body>

<div id="crawlingMessage">
<span id="messageText">Welcome to the Mystic World of JavaScript</span>
</div>

<script>
74
let message = document.getElementById('messageText');
let position = window.innerWidth; // Start from the right of the screen

function moveMessage()
{
position--; // Move the message left by 1px
if (position < -message.offsetWidth)
{
position = window.innerWidth;
// Reset position to the right when it goes off-screen
}
message.style.left = position + 'px';
}

setInterval(moveMessage, 20); // Move the message every 20ms


</script>

</body>
</html>

Q. Write a JavaScript to create a pull – down menu with four options [AICTE,
DTE, MSBTE, GOOGLE]. Once the user will select one of the options then
user will be redirected to that site.-6M
ANS:
<!DOCTYPE html>
<html>
<head>
<title>Pull Down Menu</title>
</head>
<body>
<form name="myform">
Select Your Favourite Website:
<select name="MenuChoice" onchange="getPageLink(this)">
<option value="">--Select--</option>
<option value="https://www.aicte-india.org/schemes">AICTE</option>
<option value="https://www.dtemaharashtra.gov.in/">DTE</option>
<option value="https://msbte.ac.in/">MSBTE</option>
<option value="https://google.com/">GOOGLE</option>
</select>
</form>

<script type="text/javascript">
function getPageLink(choice)
{
var page = choice.options[choice.selectedIndex].value;
if (page !== "")
75
{
window.location.href = page;
}
}
</script>
</body>
</html>

Summer 24

Q. Develop a JavaScript to create rotating Banner Ads with URL links.


ANS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Banner Linking with JavaScript</title>
<script type="text/javascript">
var banners = [
{ image: "banner1.jpeg", url: "https://www.flipkart.com/" },
{ image: "banner2.png", url: "https://www.amazon.in/" },
{ image: "banner3.png", url: "https://www.shopsy.in/" },
{ image: "banner4.png", url: "https://www.meesho.com/" }
];

var currentIndex = 0;

function updateBanner()
{
var bannerImg = document.getElementById('bannerImage');
var bannerLink = document.getElementById('bannerLink');
bannerImg.src = banners[currentIndex].image;
bannerLink.href = banners[currentIndex].url;
currentIndex = (currentIndex + 1) % banners.length;
}

window.addEventListener('load', function()
{
updateBanner();
setInterval(updateBanner, 5000);
});
</script>
</head>
<body>
<center>
76
<a id="bannerLink" href="#">
<img id="bannerImage" src="" width="900" height="120" alt="Banner
Advertisement" />
</a>
</center>
</body>
</html>

All Menu Code


1.Chain select menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chain-Selected Menu</title>
</head>
<body>

<h2>Select Category</h2>

<select id="category" onchange="updateTeachers()">


<option value="">--Select Engineering--</option>
<option value="com">Computer</option>
<option value="ele">Electrical</option>
</select>

<select id="subcategory">
<option value="">--Select Teacher--</option>
</select>

<script>
function updateTeachers()
{
const category = document.getElementById("category").value;
const subcategory = document.getElementById("subcategory");
subcategory.innerHTML = '<option value="">--Select Teacher--</option>';
let teachers = [];

if (category = = = "com")
{
teachers = ["Prof V.J Bodake", "Prof Chaudhary", "Prof Bhabad"];
}
else if (category = = = "ele")
{
teachers = ["Prof Swati", "Prof Jaya", "Prof Guru"];
}

77
for (let i = 0; i < teachers.length; i++)
{
const teacher = teachers[i];
const option = document.createElement("option");
option.value = teacher;
option.textContent = teacher;
subcategory.appendChild(option);
}
}
</script>

</body>
</html>

2.Tab Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Menu</title>
<style>
.cityClass
{
display: none;
}
</style>
</head>
<body>

<div>
<button onclick="openCity('kalyan')">Kalyan</button>
<button onclick="openCity('thane')">Thane</button>
<button onclick="openCity('csmt')">CSMT</button>
</div>

<div id="kalyan" class="cityClass">


<p>This is Kalyan page</p>
</div>
<div id="thane" class="cityClass">
<p>This is Thane page</p>
</div>
<div id="csmt" class="cityClass">
<p>This is CSMT page</p>
</div>

78
<script>
function openCity(city) {
// Get all city elements and hide them
var cities = document.getElementsByClassName('cityClass');
for (var i = 0; i < cities.length; i++)
{
cities[i].style.display = 'none';
}

// Show the selected city


document.getElementById(city).style.display = 'block';
}
</script>

</body>
</html>

3.Pop-up Menu
<html>
<head>
<title>Popup menu</title>
<style>
a{
display: block; /* Ensures each link appears on a new line */
}

.branch {
display: none; /* Initially hides the submenu */
}

.program:hover .branch {
display: block; /* Displays the submenu when hovering over the main menu */
}
</style>
</head>
<body>
<!-- Main menu container -->
<div class="program">
Program <!-- Main menu label -->
<div class="branch">
<!-- Submenu items -->
<a href="#">IF</a>
<a href="#">CO</a>
<a href="#">AIML</a>
</div>
</div>
79
</body>
</html>

4.Sibiling Menu
<!DOCTYPE html>
<html>
<head>
<title>Sliding Menu</title>
<style>
.menu
{
width: 100px;
height: 100%;
background: black;
color: white;
position: fixed;
top: 0;
left: -200px; /* Hidden by default */
transition: 0.3s;
}

.menu.show
{
left: 0; /* Move menu into view */
}

.menu a
{
display: block;
padding: 10px;
color: white;
text-decoration: none;
}

.toggle-btn
{
position: fixed;
top: 0px;
left: 100px;
background: black;
color: white;
padding: 5px;
border: none;

}
</style>
80
</head>
<body>

<!-- Toggle button -->


<button class="toggle-btn" onclick="toggleMenu()">☰ Menu</button>

<!-- Sliding menu -->


<div id="menu" class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>

<script>
function toggleMenu()
{
const menu = document.getElementById("menu");
menu.classList.toggle("show");
}
</script>

</body>
</html>

5.Highlighted Menu
<!DOCTYPE html>
<html>
<head>
<title>Highlighted Menu</title>
<style>
.menu
{
list-style: none;
}

.menu a
{
display: inline-block;
text-decoration: none;
color: black;
padding: 5px 10px;
border-radius: 5px;
}

.menu a:hover
81
{
background-color: lightgray;
}

</style>
</head>
<body>
<!-- Menu -->
<ul class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</ul>
</body>
</html>

6.Folding tree menu


<!DOCTYPE html>
<html lang="en">
<head>
<title>Folding Tree Menu</title>
<style>
/* Style for the tree menu */
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

li {
padding: 5px 10px;
cursor: pointer;
}

.nested {
display: none;
padding-left: 20px;
}

.active {
display: block;
}
</style>
82
</head>
<body>

<h2>Folding Tree Menu</h2>

<ul>
<li onclick="toggleMenu(event)">Item 1
<ul class="nested">
<li onclick="toggleMenu(event)">Sub-item 1.1
<ul class="nested">
<li onclick="toggleMenu(event)">Sub-item 1.1.1
<ul class="nested">
<li>Sub-item 1.1.1.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<script>
function toggleMenu(event)
{
// Prevent the click from bubbling up to the parent li
event.stopPropagation();

// Find the nested <ul> element


const nestedMenu = event.target.querySelector('ul');

// If there is a nested menu, toggle its visibility


if (nestedMenu)
{
nestedMenu.classList.toggle('active');
}
}
</script>

</body>
</html>

7.Context Menu
<!DOCTYPE html>
<html lang="en">
83
<head>
<title>Simple Context Menu</title>
<style>
#context-menu
{
display: none;
position: absolute;
border-radius: 10px;
background-color: grey;
padding: 10px;
}
#context-menu a
{
color: white;
text-decoration: none;
display: block;
}

</style>
</head>
<body>

<div id="context-menu">
<a href="#">Cut</a>
<a href="#">Load</a>
<a href="#">Save</a>
</div>

<p>Right-click anywhere on this page to see the custom context menu.</p>

<script>
const contextMenu = document.getElementById("context-menu");

document.addEventListener("contextmenu", function(event)
{
event.preventDefault();
contextMenu.style.display = "block";
contextMenu.style.left = event.pageX + "px";
contextMenu.style.top = event.pageY + "px";
});

document.addEventListener("click", function()
{
contextMenu.style.display = "none";
});
</script>
84
</body>
</html>

8.Scrollable Menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>Horizontal Scrollable Menu</title>
<style>
.menu
{
white-space: nowrap; /* Prevents items from wrapping to the next line */
overflow-x: auto; /* Enables horizontal scrolling */
background-color: black;
padding: 10px;
border-radius: 5px;
}

.menu a
{
color: white;
text-decoration: none;
padding: 10px 20px;
display: inline-block;
}
</style>
</head>
<body>

<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
<a href="#">FAQ</a>
<a href="#">Support</a>
<a href="#">Careers</a>
<a href="#">Terms</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
85
<a href="#">Blog</a>
<a href="#">FAQ</a>
<a href="#">Support</a>
<a href="#">Careers</a>
<a href="#">Terms</a>
</div>

</body>
</html>

9.Side bar Menu


<!DOCTYPE html>
<html>
<head>
<title>Side Bar Menu</title>
<style>
.sidemenu {
width: 200px;
height: 100%;
background-color: black;
margin: 0;
padding: 0;
position: fixed;

}
.sidemenu a
{
display: block;
text-decoration: none;
color: white;
padding: 15px;

</style>
</head>
<body>

<div class="sidemenu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
</div>
86
</body>
</html>

Q.Write code to disabling Write Click in webpage


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Right Click</title>
</head>
<body>

<h1>Right-click is disabled on this page!</h1>

<script>
// Disable right-click by preventing the default context menu
document.addEventListener("contextmenu", function(event)
{
event.preventDefault();
});
</script>

</body>
</html>

Conceiling Email Address Code


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conceal Email Address</title>
<script>
function CreateEmailAddress() {
var x = 'abcxyz*c_o_m'; // Concealed part of the email
var y = 'gmail'; // Gmail domain
var s = '?subject=Customer Inquiry'; // Subject of the email

// Replacing characters to form the correct email address


x = x.replace('*', '.'); // Replace '*' with '.'
x = x.replace('_', ''); // Remove '_'
x = x.replace('c_o_m', 'com'); // Replace 'c_o_m' with 'com'

var email = 'mailto:' + x + '@' + y + '.com' + s; // Construct the email address


87
// Open the email client with the constructed email address
window.location = email;
}
</script>
</head>
<body>
<input type="button" value="Send Email" onclick="CreateEmailAddress()">
</body>
</html>

88

You might also like