Scribd
Upload
21 views

CSS Prac Exam Ans

Uploaded by

apurvapednekar36
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
21 views

CSS Prac Exam Ans

Uploaded by

apurvapednekar36
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/ 26

CSS Practical Exam Programs:

1.Develop a Javascript to create Rotating Banner Ads.

<html>
<head>
<script language="Javascript">MyBanners=new
Array('https://static.toiimg.com/photo/80350419.cms?imgsize=80649','https://static.indepe
ndent.co.uk/2022/02/17/08/78cfdf593004f48cda2ee1f3b8410fb6Y29udGVudHNlYXJjaGFwa
SwxNjQ1MTEzNzI2-2-1.62342572','https://static.guim.co.uk/sys-
images/Guardian/Pix/pictures/2012/12/9/1355055907038/e0428d50-868a-4840-af87-
b94579a94da4-460.jpeg')
banner=0
function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="banner1.jpg" width="900" height="700" name="ChangeBanner"/>
</center>
</body>
</html>
2.Write a javascript to create a pull-down menu with three
options [Google, MSBTE, AICTE] once the user selects one
of the options then user will be redirected to that site.

<html>
<head>
<title>Menu</title>
<script language="javascript" type="text/javascript">
function getPage(choice) {
var page = choice.options[choice.selectedIndex].value;
if (page !== "") {
window.location = page;
}
}
</script>
</head>
<body>
<form action="" name="Form1">
Select Your Favorite website:
<select name="menuChoice" onchange="getPage(this)">
<option value="https://www.google.com/">Google</option>
<option value="https://msbte.org.in/">MSBTE</option>
<option value="https://www.aicte-india.org/">AICTE</option>
</select>
</form>
</body>
</html>
3. Write a program to design 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. (User Timer
methods)

<html> <body>
<script>
var clock;
function timer() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var currentTime = hour + ":" + min + ":" + sec;
document.getElementById("time").innerHTML = currentTime;
}
function startTime() {
clock = setInterval(timer, 1000);
}
function stopTime() {
clearInterval(clock);
}
</script>
<button onclick="startTime()">Start timer</button>
<button onclick="stopTime()">Stop timer</button>
<p id="time"></p>
</body></html>
4. Write a javascript to create option list containing list of
images and then display images in new window as per
selection.
<html>
<head>
<title>Image Selector</title>
<script>
function displayImage() {
var selectedImage = document.getElementById("imageList").value;
var newWindow = window.open("", "Image Display", "width=400, height=400");
newWindow.document.write("<img src='" + selectedImage + "' alt='Selected
Image'>");
}
</script>
</head>
<body>
<h2>Select an Image:</h2>
<form>
<select id="imageList">
<option value="https://w0.peakpx.com/wallpaper/199/685/HD-wallpaper-
lord-rama-blue-lord-ram-god-jai-shri-ram.jpg">Image 1</option>
<option value="https://qph.cf2.quoracdn.net/main-qimg-
37d091f4a65681a35ef2915d66297c18">Image 2</option>
<option value="https://taazakhabarnews.com/wp-
content/uploads/2022/04/Hanuman-1-823x1024.jpeg">Image 3</option>
</select>
<br><br>
<button type="button" onclick="displayImage()">Display Image</button>
</form>
</body>
</html>
5. Write a HTML script that displays textboxes for accepting
emp id, name and designation. Write proper JavaScript such
that when the user clicks the submit button
i) all textboxes change the color to Blue
ii) constructs mail id as <id><name>@yahoo.com and display
mail id.

<!DOCTYPE html>
<html>
<head>
<title>Employee Details</title>
<script>
function processForm()
{
var empId = document.getElementById("empId").value;
var empName = document.getElementById("empName").value;

var empDesignation = document.getElementById("empDesignation").value;


document.getElementById("empId").style.color = "blue";
document.getElementById("empName").style.color = "blue";
document.getElementById("empDesignation").style.color = "blue";

var emailId = empId + empName + "@yahoo.com";


alert("Email ID: " + emailId);
}
</script>
</head>
<body>
<h2>Employee Details</h2>
<form>
<label for="empId">Employee ID:</label>
<input type="text" id="empId" name="empId"><br><br>

<label for="empName">Employee Name:</label>


<input type="text" id="empName" name="empName"><br><br>

<label for="empDesignation">Designation:</label>
<input type="text" id="empDesignation" name="empDesignation"><br><br>

<button type="button" onclick="processForm()">Submit</button>


</form>
</body>
</html>

6. Write a javscript for folding tree menu.


<!DOCTYPE html>
<html>
<head>
<style>
.folder {
cursor: pointer;
}
.nested {
display: none;
}
</style>
</head>
<body>
<ul>
<li class="folder" onclick="toggleFolder(this)">Folder 1
<ul class="nested">
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul>
</li>
<li class="folder" onclick="toggleFolder(this)">Folder 2
<ul class="nested">
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
</ul>
<script>
function toggleFolder(element) {
var nestedList = element.querySelector('.nested');
if (nestedList.style.display === "none") {
nestedList.style.display = "block";
} else {
nestedList.style.display = "none";
}
}
</script>
</body>
</html>
7. Write html code to design form that displays textboxes for
accepting userID and Aadhar no. and 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
userID and Aadhar no. when the user clicks on submit
button.

<!DOCTYPE html>
<html lang="en">
<head>
<title>User Form</title>
</head>
<body>
<h2>User Information</h2>
<form id="userForm">
<label for="userID">UserID (10 alphanumeric, starting with a capital letter):</label>
<input type="text" id="userID" name="userID" pattern="[A-Z][A-Za-z0-9]{9}" required>
<br><br>
<label for="aadharNo">Aadhar No. (12 digits in the format nnnn nnnn nnnn):</label>
<input type="text" id="aadharNo" name="aadharNo" pattern="\d{4} \d{4} \d{4}"
required>
<br><br>
<button type="button" onclick="validateForm()">Submit</button>
</form>
<script>
function validateForm() {
var userIDInput = document.getElementById("userID");
var aadharNoInput = document.getElementById("aadharNo");
// Validate UserID
var userIDPattern = /^[A-Z][A-Za-z0-9]{9}$/;
if (!userIDPattern.test(userIDInput.value)) {
alert("Invalid UserID format. Must start with a capital letter and have 10 alphanumeric
characters.");
return;
}
// Validate Aadhar No.
var aadharNoPattern = /^\d{4} \d{4} \d{4}$/;
if (!aadharNoPattern.test(aadharNoInput.value)) {
alert("Invalid Aadhar No. format. Should be in the format nnnn nnnn nnnn.");
return;
}
// If both validations pass, show a confirm dialog with a success message
confirm("Correct UID and Aadhar No.");
}
</script>
</body>
</html>

8. 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.

<html><head>
<title> Banner Ad </title>
</head>
<script language="Javascript" type="text/javascript">
pics = new
Array('https://upload.wikimedia.org/wikipedia/commons/1/16/Bugatti_Divo%2C_GIMS_201
9%2C_Le_Grand-
Saconnex_%28GIMS0029%29.jpg','https://imgd.aeplcdn.com/664x374/n/cw/ec/21135/wrai
th-exterior-right-front-three-quarter-
62430.jpeg?isig=0&q=80','https://d2hucwwplm5rxi.cloudfront.net/wp-
content/uploads/2022/09/08115610/Ferrari-Logo-History-and-Meaning-_-Cover-8-9-
22.jpg','https://images.drive.com.au/driveau/image/upload/c_fill,f_auto,g_auto,h_1080,q_a
uto:good,w_1920/cms/uploads/gnzzydgywcvxog4nrblk','https://www.autotrader.com/wp-
content/uploads/2023/02/2023-audi-r8-coupe-right-
side.jpg?quality=75','https://img.indianautosblog.com/2018/03/Tata-EVision-concept-front-
three-quarters-at-2018-Geneva-Motor-Show.jpg');
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.img1.src = pics[count];
}
}
</script>
</head>
<body>
<img
src="https://upload.wikimedia.org/wikipedia/commons/1/16/Bugatti_Divo%2C_GIMS_2019
%2C_Le_Grand-Saconnex_%28GIMS0029%29.jpg" width= "1200" height="650"
name="img1" alt="no image"/>
<br>
<input type="button" value="next" onclick= "SlideShow(1)">
<input type="button" value="back" onclick= "SlideShow(-1)">
</body></html>

9. Write a program to create a context menu.


<!DOCTYPE html>
<html>
<head>
<title>Context Menu</title>
<style>
#contextMenu {
display: none;
position: absolute;
background: white;
}
</style>
</head>
<body oncontextmenu="showContextMenu(event)">
<div id="contextMenu" onclick="handleContextMenu(event)">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
</div>

<script>
function showContextMenu(e) {
e.preventDefault();
const contextMenu = document.getElementById('contextMenu');
contextMenu.style.display = 'block'; // Changed 'black' to 'block'
contextMenu.style.left = e.pageX + 'px';
contextMenu.style.top = e.pageY + 'px';
}
function handleContextMenu(e) {
alert('Selected: ' + e.target.textContent);
document.getElementById('contextMenu').style.display = 'none';
}
</script>
</body>
</html>

10. Write HTML script that will display a dropdown list


containing options such as Red, Green, Blue and Yellow.
Write a JavaScript program such that when the user selects
any options. It will change the background colour of
webpage.

<!DOCTYPE html>
<html>
<body>
<label for="color">Choose a Background Color:</label>
<select name="color" id="color" class="color" onchange="changeColor()">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<script type="text/javascript">
function changeColor() {

var color = document.getElementById("color").value;


switch (color) {

case "green":
document.body.style.backgroundColor = "green";
break;
case "red":
document.body.style.backgroundColor = "red";
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>
</body>
</html>
11. Write a javascript for the following structure.

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.

<html>
<head>
<title>Frame Demo</title>
</head>
<body>
<table border="1">
<td align="center" colspan="2">
FRAME I
</td>
</tr>
<td>
FRAME 2
<ul>
<li>
<a href="https://kauveryhospital.com/blog/wp-
content/uploads/2023/01/Treatment-for-diabetes-2.jpg"
target="mainframe">FRUITS</a>
</li>
<li>
<a href="https://img.freepik.com/free-photo/natures-beauty-captured-colorful-
flower-close-up-generative-ai_188544-8593.jpg" target="mainframe">FLOWERS</a>
</li>
<li>
<a href="https://u4d2z7k9.rocketcdn.me/wp-content/uploads/2022/04/Untitled-
design-2022-04-14T155317.295.jpg" target="mainframe">CITIES</a>
</li>

</ul>
</td>
<td>
FRAME 3<BR>
<iframe name="mainframe" width="800" height="600"></iframe>
</td>
</tr>
</table>
</body>
</html>

12. 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 nubers and result will be displayed in
result textbox.
<html><head><title>Button event</title>
<script>
function compute(operation)
{
var a = document.getElementById("txt1").value;
var b = document.getElementById("txt2").value;
var result = 0;
if (operation === 'add')
{
result = parseInt(a) + parseInt(b);
}
else if (operation === 'sub')
{
result = parseInt(a) - parseInt(b);
}
document.getElementById("txt3").value = result;
}
</script>
</head>
<body>
<form>
Enter value of A <input type="text" id="txt1"/><br/>
Enter value of B <input type="text" id="txt2"/><br/>
Result : <input type="text" id="txt3"/><br/>

<button id="addbtn" type="button" onclick="compute('add')"> Addition


</button>
<button id="subbtn" type="button" onclick="compute('sub')"> Subtraction
</button>
</form>
</body>
</html>

13. 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.

14. Write a javascript to checks whether a passed string is


palindrome or not.
<html>
<head>
<title>Button event</title>
<script>
function checkPalindrome(string) {
const arrayValues = string.split('');
const reverseArrayValues = arrayValues.slice().reverse();
const reverseString = reverseArrayValues.join('');

if (string === reverseString) {


document.write('It is a Palindrome');
} else {
document.write('It is not a Palindrome');
}
}
const inputString = prompt('Enter a String:');
checkPalindrome(inputString);
</script>
</head>
</html>

15. Write a program to display two radio buttons (fruits and


vegetables).When user will select the fruits radio button, the
option list should present only the fruits names to user and
when user will select the vegetable radio button, the option
list should present only the vegetable names to user so that
user can select an appropriate element of interest.
<!DOCTYPE html>

<html lang="en">

<head>

<title>Fruits and Vegetables</title>

<script>

function updateOptions() {

var fruitsRadio = document.getElementById("fruitsRadio");

var vegetablesRadio = document.getElementById("vegetablesRadio");

var optionsDropdown = document.getElementById("optionsDropdown");

optionsDropdown.innerHTML = "";

if (fruitsRadio.checked) {

addOptions(["Apple", "Banana", "Orange"]); // Fruits options

} else if (vegetablesRadio.checked) {

addOptions(["Carrot", "Broccoli", "Spinach"]); // Vegetables options

}
function addOptions(options) {

options.forEach(function (option) {

var optionElement = document.createElement("option");

optionElement.text = option;

optionsDropdown.add(optionElement);

});

</script>

</head>

<body>

<form>

<input type="radio" id="fruitsRadio" name="category"


onclick="updateOptions()">

<label for="fruitsRadio">Fruits</label>

<input type="radio" id="vegetablesRadio" name="category"


onclick="updateOptions()">

<label for="vegetablesRadio">Vegetables</label>

<br>

<label for="optionsDropdown">Select an option:</label>

<select id="optionsDropdown"></select>

</form>

</body>

</html>
16. Write a javascript to create the following structure

Chapter 1 and chapter 2 are linked to the webpage


chapter1.html and chapter2.html. When user clicks on the
links corresponding data appears in frame 3.

Step1) create file frame.html


<html><body>

<h1 align="center"> FRAME1 </h1>

</body></html>

Step2) create file frame2.html


<html><head>

<title> Frame 2</title>

</head><body>

<h1> Operating System</h1>

<a href = "https://www.techtarget.com/whatis/definition/operating-


system-
OS#:~:text=An%20operating%20system%20(OS)%20is,application%20pr
ogram%20interface%20(API)."target="c"><UL> Chapter 1 </UL></a>

<br>
<a href = "https://www.uow.edu.au/student/learning-co-op/technology-and-
software/operating-systems/" target="c"><UL> Chapter 2 </UL></a>

</body></html>

Step3) create file frame3.html


<html><body>

<h1> Frame3 </h1>

</body></html>

Step4) create frame_target.html


<html>

<head>

<title> Create A frame </title>

</head>

<frameset rows="30%,*" border="1">

<frame src="frame1.html" name="a"/>

<frameset cols="50%,*" border="1">

<frame src="frame2.html" name="b">

<frame src="frame3.html" name="c">

</frameset>

</html>
17. Write a program to evaluate checkbox selection.
<!DOCTYPE html>

<html>

<head>

<title>Assign Values</title>

<script>

function displayMessage() {

var checkboxes = document.getElementsByName("Fruits");

var isAnyCheckboxSelected = false;

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

if (checkboxes[i].checked) {

isAnyCheckboxSelected = true;

break;

var message = isAnyCheckboxSelected ? "You selected at least one fruit!" :


"Please select a fruit.";

alert(message);

</script>

</head>

<body>

<form method="post" action="#URL#">

Select your favourite fruit <br>


<input type="checkbox" name="Fruits" id="a" /> Apple

<input type="checkbox" name="Fruits" id="b" /> Banana

<br /><br />

<input type="button" value="Register" onclick="displayMessage()" />

</form>

</body>

</html>

18. Write a program to create and read persistent cookies.


<!DOCTYPE html>

<html lang="en">

<body>

<script>

var name = prompt("Enter a name:");

// Creating a cookie with a 2-day expiration

var date = new Date();

date.setDate(date.getDate() + 2);

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

document.cookie = "name=" + name + "; " + expires;

// Reading the cookie

alert("Cookie Value: " + document.cookie);

</script>

</body>

</html>
19. Write a javascript to create rotating banner ads with URL
links..
<!DOCTYPE html>
<html>
<head>
<title>Rotating Banner</title>
</head>
<body onload="init()">
<a href="" id="link"><img style="width: 1000px; height: 500px;" id="banner"></a>

<script>
var bannerImg = [
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Etihad-
airways-logo.svg/800px-Etihad-airways-logo.svg.png',
'https://airhex.com/images/airline-logos/alt/emirates.png'
];

var bannerlink = [
'https://www.etihad.com/en-in/',
'https://www.emirates.com/in/english/'
];

var bannerCount = 0;

function init() {
updateBanner();
setInterval(updateBanner, 2000);
}

function updateBanner() {
document.getElementById('banner').src = bannerImg[bannerCount];
document.getElementById('link').href = bannerlink[bannerCount];
bannerCount = (bannerCount + 1) % bannerImg.length;
}
</script>
</body>
</html>
20. Write a program that displays textboxes for accepting
name and email Id and a submit button. Write a javascript
code such that when user click on the submit button the
information is validated.

(1) Name validation

(2) Email validation


<!DOCTYPE html>

<html><head>

<title>Registration</title></head>

<body>

<form id="registrationForm" onsubmit="return validateForm()">

<label for="name">Name:</label>

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

<br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<br><br>

<input type="submit" value="Submit">

</form>

<script>

function validateForm() {

// Get values from the form

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

// Regular expression for email validation


var emailFormat = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// Validate name

if (!name) {

alert("Please enter your name.");

return false;

// Validate email

if (!emailFormat.test(email)) {

alert("Please enter a valid email address.");

return false;

alert("Registration successful!\nName: " + name + "\nEmail: " + email);

return true;

}</script>

</body>

</html>

You might also like