Scribd
Upload
24 views

CSSX

Uploaded by

adityadeshmukhpersonal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

CSSX

Uploaded by

adityadeshmukhpersonal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

CSS Practical list for Exam

Q1 Accept two values from the user. Perform addition, Subtraction, Multiplication and Division
on it. If you get a negative result of subtraction then display an alert box with a message as
“Negative Subtraction Result”.

Ans <html>
<body>
<h3>Enter two numbers:</h3>
<input type="number" id="num1">
<input type="number" id="num2">
<button onclick="performOperations()">Calculate</button>
<script>
function performOperations()
{
let num1 = parseInt(document.getElementById("num1").value);
let num2 = parseInt(document.getElementById("num2").value);
let add = num1 + num2;
let subtract = num1 - num2;
let multiply = num1 * num2;
let divide = num1 / num2;
alert("Addition: " + add + "\nSubtraction: " + subtract + "\nMultiplication: " + multiply +
"\nDivision: " + divide);
if (subtract < 0)
alert("Negative Subtraction Result");
}
</script>
</body>
</html>

Q2 Accept marks from the user and display his/her grade. Congratulate him/her on the alert
box if he/she got distinction (Use if-else-if).
Ans <html>
<body>
<h3>Enter your marks:</h3>
<input type="number" id="marks">
<button onclick="calculateGrade()">Get Grade</button>

<script>
function calculateGrade()
{
let marks = parseInt(document.getElementById("marks").value);
let grade;

if (marks >= 75)


{
grade = "Distinction";
alert("Congratulations! You got a Distinction");
}
else if (marks >= 60)
grade = "First Class";
else if (marks >= 50)
grade = "Second Class";
else if (marks >= 35)
grade = "Pass";
else
grade = "Fail";
alert("Your Grade: " + grade);
}
</script>
</body>
</html>

Q3 Accept the day from the user and display the scheduled meeting of that day in tabular form
using switch statements
Ans <html>
<head>
<script>
let day = parseInt(prompt("Enter a day:"));
switch (day)
{
case 1:
document.write("Monday Schedule<br>");
document.write("<table> <tr> <td> Client 1 </td> <td> Client 2 </td>
<td> Client 3 </td> </tr> <tr><td>9:00 am</td><td>12:00 pm</td><td>4:00
pm</td></tr></table>");
break;
case 2:
document.write("Tuesday Schedule<br>");
document.write("<table><tr><td>Client 1</td><td>Client
2</td><td>Client 3</td></tr><tr><td>9:00 am</td><td>12:00 pm</td><td>4:00
pm</td></tr></table>");
break;
case 3:
document.write("Wednesday Schedule<br>");
document.write("<table><tr><td>Client 1</td><td>Client
2</td><td>Client 3</td></tr><tr><td>9:00 am</td><td>12:00 pm</td><td>4:00
pm</td></tr></table>");
break;
case 4:
document.write("Thursday Schedule<br>");
document.write("<table><tr><td>Client 1</td><td>Client
2</td><td>Client 3</td></tr><tr><td>9:00 am</td><td>12:00 pm</td><td>4:00
pm</td></tr></table>");
break;
case 5:
document.write("Friday Schedule<br>");
document.write("<table><tr><td>Client 1</td><td>Client
2</td><td>Client 3</td></tr><tr><td>9:00 am</td><td>12:00 pm</td><td>4:00
pm</td></tr></table>");
break;
case 6:
document.write("<br>Enjoy Your Weekend<br>");
break;
case 7:
document.write("<br>Enjoy Your Weekend<br>");
break;
default:
document.write("Provide a valid Input.");

}
</script>
</head>
<body>
</body>
</html>

Q4 Write a program

a. To display prime numbers from 1-20 using for loop


b. To display even numbers from 21-40 using do-while loop
c. To display odd numbers from 41-60 using while loop
<html>
<body>
<script>
Ans
let num;
document.write("Prime numbers from 1 to 20:");
for (num = 2; num <= 20; num++)
{
let isPrime = true;
for (let i = 2; i <= Math.sqrt(num); i++)
{
if (num % i === 0)
{
isPrime = false;
break;
}
}
if (isPrime)
document.write("\t" +num);
}
document.write("<br>Even numbers from 21 to 40:");
num = 22;
do
{
document.write("\t" +num);
num += 2;
} while (num <= 40);
document.write("<br>Odd numbers from 41 to 60:");
num = 41;
while (num <= 60)
{
document.write("\t" +num);
num += 2; // Increment by 2 to get the next odd number
}
</script>
</body>
</html>
Q5 Write a program to implement array methods for adding and removing elements from an
array. Display the array of elements after every method
Ans <html>
<body>
<button onclick="addToEnd()">Add to End</button>
<button onclick="addToBeginning()">Add to Beginning</button>
<button onclick="removeFromEnd()">Remove from End</button>
<button onclick="removeFromBeginning()">Remove from Beginning</button>
<script>
let array = [1, 2, 3, 4, 5];
function displayArray()
{
console.log("Current Array: ", array);
}
function addToEnd()
{
let nextelement = array[array.length - 1] + 1;
array.push(nextelement);
displayArray();
}
function addToBeginning()
{
array.unshift(0);
displayArray();
}
function removeFromEnd()
{
array.pop();
displayArray();
}
function removeFromBeginning()
{
array.shift();
displayArray();
}
displayArray();
</script>
</body>
</html>

Q6 Write a program to combine three different arrays into one array and display it and also
display another array with “–“between every element
Ans <html>
<body>
<script>
const array1 = [1, 2, 3];
const array2 = [4.5, 6.7, 8.9];
const array3 = ["a", "b", "c"];
var result = array1.concat(array2, array3);
document.write(result.join("-"));
</script>
</body>
</html>

Q7 Write a program to set the index of the array as CSS, AJP, OSY, STE, EST and values for this
index as 22519, 22517, 22516, 22518 and 22447 respectively. And display array elements
with index using dot syntax
Ans <html>
<body>
<script>
const values =
{
CSS: 22519,
AJP: 22517,
OSY: 22516,
STE: 22518,
EST: 22447
};
document.write("CSS: "+values.CSS +"<br>");
document.write("AJP: "+values.AJP +"<br>");
document.write("OSY: "+values.OSY +"<br>");
document.write("STE: "+values.STE +"<br>");
document.write("EST: "+values.EST +"<br>");
</script>
</body>
</html>

Q8 Write a program to create a function to find out the perfect number between 1 and 100
Ans <html>
<body>
<script>
function findPerfectNumbersInRange() {
for (let num = 1; num <= 100; num++) {
let sum = 0;
for (let i = 1; i < num; i++) {
if (num % i === 0) {
sum += i;
}
}
if (sum === num) {
console.log(num + " is a perfect number.");
}
}
}
findPerfectNumbersInRange();
</script>
</body>
</html>

Q9 Write a program to create one function to multiply 2 numbers, 3 numbers, and 4 numbers.
Write function definition in external JavaScript file and call this function from html file
Ans <html>
<body>
<script src="mullt.js">
</script>
<script>
mul(2,3,4,5);
</script>
</body>
</html>
--- js file---
function mul(a,b,c,d)
{
console.log("Ans of "+a+" * "+b+" = "+(a*b));
console.log("Ans of "+a+" * "+b+" * "+c+" = "+(a*b*c));
console.log("Ans of "+a+" * "+b+" * "+c+" * "+d+" = "+(a*b*c*d));
}
Q10 Write a program to print sum of digits of user entered value using recursive function.

Ans <html>
<body>
<h1>Sum of Digits Calculator</h1>

<label for="numberInput">Enter a number: </label>


<input type="number" id="numberInput">
<button onclick="calculateSum()">Calculate</button>
<p>Sum of digits: <span id="result"></span></p>
<script>
function calculateSum() {
let num = parseInt(document.getElementById("numberInput").value);

let sum = 0;
while (num > 0) {
sum += num % 10;
num = Math.floor(num / 10);
}
document.getElementById("result").textContent = sum;
}
</script>
</body>
</html>
Q11 Write a program to retrieve characters from position 3, 15, 8 and retrieve position of
character J, p, a, t. Search for ‘like’ and display results. (Given string = “I like JavaScript
programming”)

Ans <html>
<body>
<script>
let s = "I like JavaScript programming";
console.log("Given String : ",s);
let c3 = s.charAt(3);
let c15 = s.charAt(15);
let c8 = s.charAt(8);

console.log("Character at position 3:", c3);


console.log("Character at position 15:", c15);
console.log("Character at position 8:", c8);

let pJ = s.indexOf('J');
let pP = s.indexOf('p');
let pA = s.indexOf('a');
let pT = s.indexOf('t');

console.log("Position of 'J':", pJ);


console.log("Position of 'p':", pP);
console.log("Position of 'a':", pA);
console.log("Position of 't':", pT);
let searchLike = s.includes('like');

if(s.includes('like')){
console.log("'like' word does exist in given string .");
}else{
console.log("'like' word don't exist in given string .");
}
</script>
</body>
</html>
Q12 Write a program to replace “like” by “know” and divide the string on the basis of space from
the 7th index. (Given string = “I like JavaScript programming”)
Ans <html>
<body>
<script>
let s = "I like JavaScript programming";
console.log("Given String : ",s);

console.log("Replaced String : ",s.replace("like" ,"know"));


let s2 = s.substring(7).split(" ");
console.log("Divided String :" + s2);
</script>
</body>
</html>
Q13 Write a program to display the above string as “I like JAVASCRIPT programming”. (Given
string = “I like JavaScript programming”)
Ans <html>
<body>
<style>
.highlight {
background-color: limegreen;
}
</style>

<script>
const ogstr = "I like JavaScript programming";
const highstr = ogstr.replace("JavaScript",` JAVASCRIPT`);
document.write(`<span class="highlight"><b><i>${highstr}</i></b></span>`);

</script>
</body>
</html>
Q14 Create an employee registration form with fields ‘name’, ‘Employee-ID’, ‘Email’, ‘Password’,
‘Confirm Password’ and 'Register' button. When the user clicks on the ‘Register’ button it
checks whether ‘Password’ and ‘Confirm Password’ have the same values. If the same then
display a message as “Registration is successful”, else display “Passwords don’t match”
(Add output for both conditions)
Ans <html>
<body>

<form onsubmit="register(event)" id="rf">


Name: <input type="text" required><br><br>
Employee-ID: <input type="text" required><br><br>
Email: <input type="email" required><br><br>
Password: <input type="password" id="pwd" required><br><br>
Confirm Password: <input type="password" id="cpwd" required><br><br>
<button type="submit">Register</button>
</form>
<p id="msg"></p>

<script>
function register(e) {
e.preventDefault();
let pass = document.getElementById("pwd").value;
let confirmPass = document.getElementById("cpwd").value;

if (pass === confirmPass) {


document.getElementById("msg").innerText = "Registration is successful";
// document.getElementById("rf").reset();
} else {

document.getElementById("msg").innerText = "Passwords don't match";


}
}
</script>

</body>
</html>
Q15 Write a JavaScript program to demonstrate form events with output (e.g. focus, blur,
submit, reset, change, input, select)
Ans
<html >
<body>

<h2>Form Event Demonstration</h2>


<form onsubmit="handleEvent('submit',event)" onreset="handleEvent('reset',event)" >

<label for="name">Name:</label>
<input type="text" id="name" onfocus="handleEvent('focus' ,event)"
onblur="handleEvent('blur',event)" oninput="handleEvent('input' ,event)"
onselect="handleEvent('select',event)" onchange="handleEvent('change',event)">
<br><br>

<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>

<script>
function handleEvent(eventType, e) {
e.preventDefault();
console.log(`Event: ${eventType}`);
}
</script>

</body>
</html>
Q16 Write a JavaScript program to demonstrate mouse events with output (e.g. click, dblclick,
mouseup, mousedown, mousemove, mouseout, mouseover)
Ans <html>
<body>

<h2>Mouse Event Demo</h2>

<label>click me:</label>
<input type="text"
onclick="showMessage('Click')"
ondblclick="showMessage('Double Click')"
onmousemove="showMessage('Mouse Move')"
onmouseout="showMessage('Mouse Out')">
<br><br>

<label>click me:</label>
<input type="text"
onmousedown="showMessage('Mouse Down')"
onmouseup="showMessage('Mouse Up')"
onmouseover="showMessage('Mouse Over')" >
<br><br>

<p id="output"></p>
<script>
function showMessage(message) {
document.getElementById('output').textContent = message;
}
</script>

</body>
</html>
Q17 Write a JavaScript program to demonstrate window methods with output (e.g. load, unload,
open, close, resize)
Ans <html>
<body>
<h1>Window Methods Demo</h1>
<button onclick="openWindow()">Open Pop-up Window</button>
<button onclick="closeWindow()">Close Pop-up Window</button>
<script>
let popupWindow;

window.onload = () => alert("Window has fully loaded!");


window.onunload = () => alert("Window is being unloaded!");

function openWindow() {
popupWindow = window.open("", "newWindow", "width=400,height=300");
popupWindow.document.write("<p>This is a new pop-up window!</p>");
}
function closeWindow() {
popupWindow?.close();
}

window.onresize = () => {
console.log(`Window resized to: ${window.innerWidth} x ${window.innerHeight}`);
alert("Window Resized");
};
</script>
</body>
</html>

Q18 Write a JavaScript program to demonstrate key events with output (e.g. keyup, keydown,
keypress)
ans
<html >
<head>
<title>Key Event Demo</title>

</head>
<body>
<div id="OP"></div>
<script>
function logEvent(eventType, key, keyCode) {
const output = document.getElementById('OP');
const message = document.createElement('p');
message.textContent = `${eventType} event triggered - Key: ${key} (Code:
${keyCode})`;
output.appendChild(message);
}

document.addEventListener('keydown', function(event) {
logEvent('keydown', event.key, event.keyCode);
});

document.addEventListener('keyup', function(event) {
logEvent('keyup', event.key, event.keyCode);
});

document.addEventListener('keypress', function(event) {
logEvent('keypress', event.key, event.keyCode);
});
</script>
</body>
</html>
Q19 Create the following form. Make the first text field read only. When the user clicks on the
YES radio button, disable the Permanent Address input element

Ans <html>
<body>
<h2>Disable and Read-Only Elements</h2>
<form>
<input type="text" value="This Form is to demonstrate disable and read only elements"
readonly>
<br><br>
Name:
<input type="text"><br><br>
Temporary Address:
<textarea id="temp_address"></textarea><br><br>
Permanent Address:
<textarea id="perm_address"></textarea><br><br>
Are both addresses same?
<input type="radio" id="yes"> YES
<input type="radio" id="no"> NO<br><br>
</form>
<script>
document.getElementById('yes').addEventListener('change', () => {
const tempAddress = document.getElementById('temp_address').value;
const permAddress = document.getElementById('perm_address');
if (document.getElementById('yes').checked) {
permAddress.value = tempAddress;
permAddress.disabled = true;
}
});
document.getElementById('no').addEventListener('change', () => {
const permAddress = document.getElementById('perm_address');
if (document.getElementById('no').checked) {
permAddress.value = '';
permAddress.disabled = false;
}
});
</script>
</body>
</html>

Q20 Create a form containing name and username as input fields. Form should contain two
buttons as ‘Set Session Cookie’ and ‘Set Persistent Cookie’. When the user clicks on ‘Set
session Cookie’, create a session cookie for ‘name’ and when the user clicks on ‘Set
Persistent Cookie’, create a persistent cookie for ‘username’
Ans <html>
<body>
<h2>Cookie Form</h2>
<form>
<label>Name:</label>
<input type="text" id="name"><br><br>
<label>Username:</label>
<input type="text" id="username"><br><br>
<button type="button" onclick="setSessionCookie()">Set Session Cookie</button>
<button type="button" onclick="setPersistentCookie()">Set Persistent Cookie</button>
</form>
<script>
function setSessionCookie() {
const name = document.getElementById('name').value;
document.cookie = `name=${name}; path=/`;
alert("Session cookie set for name!");
}

function setPersistentCookie() {
const username = document.getElementById('username').value;
const expires = new Date();
expires.setTime(expires.getTime() + (30*24*60*60*1000)); // 30 days
document.cookie = `username=${username}; expires=${expires.toUTCString()};
path=/`;
alert("Persistent cookie set for username!");
}
</script>
</body>
</html>
Q21 Write javascript code to demonstrate setTimeout(), setInterval() functions of window object
Ans <html>
<body>

<button onclick="startDemo()">Start Demo</button>

<script>
function startDemo() {

setTimeout(() => alert('setTimeout runs once'), 2000);

setInterval(() => alert(`setInterval runs forever `), 1000);


}
</script>

</body>
</html>
Q22 Create a form with input fields as Name, Employee Id, Email Id, Mobile Number and one
submit button. When the user clicks on the submit button, validate all data entered by
using regular expressions. (Note: Format of Employee Id is EMP191120)
Ans <html>
<body>
<form id="myForm">
<input placeholder="Name" id="name" required><br><br>
<input placeholder="Employee ID" id="empId" required><br><br>
<input placeholder="Email ID" id="email" required><br><br>
<input placeholder="Mobile Number" id="mobile" required><br><br>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').onsubmit = function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
const empId = document.getElementById('empId').value;
const email = document.getElementById('email').value;
const mobile = document.getElementById('mobile').value;

const empIdPattern = /^EMP\d{6}$/;


const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const mobilePattern = /^\d{10}$/;

if (!name) {
alert(' enter a valid name.');
} else if (!empIdPattern.test(empId)) {
alert('Invalid EmployeeID format.');
} else if (!emailPattern.test(email)) {
alert('Invalid email format.');
} else if (!mobilePattern.test(mobile)) {
alert('Mobile number must be 10 digits.');
} else {
alert('Form submitted successfully!');
}
};
</script>
</body>
</html>
Q23 Create two drop down menus. In the first menu create options as SYCO and TYCO. In the
second menu create a subject list. Change options of second menu dynamically according
to option selected in first menu (e.g When user selects SYCO then display DSU, OOP, DTE,
CGR, DMS and when user selects TYCO then display OSY, CSS, AJP, STE, EST). Form should
contain one button for submit. When the user clicks on the submit button then displays the
selected option.
Ans <html>
<body>
<h1>Dynamic Dropdown Menu</h1>
<form>
<label>Select Year:</label>
<select id="year" onchange="updateSubjects()">
<option value="">--Select--</option>
<option value="SYCO">SYCO</option>
<option value="TYCO">TYCO</option>
</select><br><br>

<label>Select Subject:</label>
<select id="subject">
<option value="">--Select--</option>
</select><br><br>

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


</form>
<script>
function updateSubjects() {
const year = document.getElementById('year').value;
const subjects = {
SYCO: ['DSU', 'OOP', 'DTE', 'CGR', 'DMS'],
TYCO: ['OSY', 'CSS', 'AJP', 'STE', 'EST']
};

const subjectSelect = document.getElementById('subject');


subjectSelect.innerHTML = '<option value="">--Select--</option>';

(subjects[year] || []).forEach(subject => {


subjectSelect.add(new Option(subject, subject));
});
}

function submitForm() {
const year = document.getElementById('year').value;
const subject = document.getElementById('subject').value;
alert(`Selected Year: ${year}\nSelected Subject: ${subject}`);
}
</script>
</body>
</html>
Q24 Write a JavaScript program to create a rotating banner of five images. When a user clicks on
any image then open a link for that advertisement. Web Page should contain three buttons
as Stop slideshow, Previous and Next. Initially Previous and Next buttons should be
disabled, when user clicks on Stop slideshow buttons then Previous and Next buttons
should be enabled and slideshow will be going on using these buttons
Ans <html>

<body>
<div class="banner">
<img id="bannerImage" src="chip1.png" onclick="openLink()">
</div>
<div class="controls">
<button id="stopButton" onclick="stopSlideshow()">Stop Slideshow</button>
<button id="prevButton" onclick="prevImage()">Previous</button>
<button id="nextButton" onclick="nextImage()">Next</button>
</div>

<script>
const images = [
{ src: 'chip1.png', link: 'http://example.com/ad1' },
{ src: 'chip2.png', link: 'http://example.com/ad2' },
{ src: 'c1.jpeg', link: 'http://example.com/ad3' },
{ src: 'c2.jpeg', link: 'http://example.com/ad4' },
{ src: 'c3.jpeg', link: 'http://example.com/ad5' }
];

let currentIndex = 0;
let intervalId;

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


const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');

function startSlideshow() {
intervalId = setInterval(nextImage, 3000);
}

function stopSlideshow() {
clearInterval(intervalId);
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
updateBanner();
}
function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateBanner();
}

function updateBanner() {
bannerImage.src = images[currentIndex].src;
bannerImage.onload = () => console.log('Image loaded:', bannerImage.src);
bannerImage.onerror = () => bannerImage.src = '';
prevButton.disabled = currentIndex === 0;
nextButton.disabled = currentIndex === images.length - 1;
}

function openLink() {
window.open(images[currentIndex].link, '_blank');
}

startSlideshow();
</script>
</body>
</html>
Q25 Create the following frame. When the user clicks on the Frame 2 link then content of Frame
2 should be displayed in Frame 1. When User clicks on the Frame 3 link then redirect Frame
3 to google page

Ans <html>
<frameset cols="50%, 50%">
<frame name="frame1" src="frame1.html">
<frameset rows="50%, 50%">
<frame name="frame2" src="frame2.html">
<frame name="frame3" src="frame3.html">
</frameset>
</frameset>

<!-- frame1.html -->


<html>
<body>
<ul>
<li><a href="frame2.html" target="frame1">Frame 2</a></li>
<li><a href="https://www.google.com" target="frame3">Frame 3</a></li>
</ul>
</body>
</html>

<!-- frame2.html -->


<html >
<body>
<p>This is the content for Frame 2.</p>
</body>
</html>

@suppliers

You might also like