Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

css pract answers

Uploaded by

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

css pract answers

Uploaded by

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

Ǫ1Accept 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”.

<html>
<body>
<h3> Calculator </h3>

<br><br>

<label for="num1" > Enter Number 1: </label>


<input type="text" id="num1" name="num1">
<br><br>
<label for="num2"> Enter Number 2: </label>
<input type="text" id="num2" name="num2">
<br><br>

<button id="btn" onclick="calc()">Calculate</button>

<script>

function calc(){

let num1 = Number( document.getElementById("num1").value);


let num2 = Number( document.getElementById("num2").value);

let addn = num1+num2;


let subn = num1-num2;
let muln = num1*num2;
let divn = num1/num2;

alert("Addition="+addn+" "+"Substraction="+subn+" "+"Multiplication="+muln +" "+"Division="+divn+"


");
if(subn < 0){
alert("Negatiive Subtraction Result!");
}

</script>
</body>
</html>
Ǫ2
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).

<html>
<body>

Enter Your Marks: <input type="text" id="marks" name="marks">


<button id="btn" onclick="calcgrade()"> Calculate Grade </butto>

<script>

function calcgrade(){

let marks= Number(document.getElementById("marks").value);

if(marks >=75 ){
alert(" Congratulation u got Distinction ");
}
else if( marks>=60){
alert(" You got First Class");
}
else if(marks>=50){
alert(" You got Second Class");
}
else if(marks>=35){
alert(" Passed ");
}

</script>
</body>
</html>
Ǫ3 Accept the day from the user and display the scheduled meeting of that day in tabular form
using switch statements

<!DOCTYPE html>
<html>
<body>
<button id="btn" onclick="schedule()">Show Schedule</button>
<br><br>
<div id="output"></div>

<script>
let day = Number(prompt("Enter the day (1 for Monday, 2 for Tuesday, ..., 7 for Sunday):"));
let output = "";

function schedule() {
switch (day) {
case 1:
output = "Monday Schedule<br>" +
"<table>" +
"<tr><td>Client 1</td><td>Client 2</td><td>Client 3</td></tr>" +
"<tr><td>9 am</td><td>12 pm</td><td>3 pm</td></tr>" +
"</table>";
break;
case 2:
output = "Tuesday Schedule<br>" +
"<table>" +
"<tr><td>Client 1</td><td>Client 2</td><td>Client 3</td></tr>" +
"<tr><td>9 am</td><td>12 pm</td><td>3 pm</td></tr>" +
"</table>";
break;
case 3:
output = "Wednesday Schedule<br>" +
"<table>" +
"<tr><td>Client 1</td><td>Client 2</td><td>Client 3</td></tr>" +
"<tr><td>9 am</td><td>12 pm</td><td>3 pm</td></tr>" +
"</table>";
break;
case 4:
output = "Thursday Schedule<br>" +
"<table>" +
"<tr><td>Client 1</td><td>Client 2</td><td>Client 3</td></tr>" +
"<tr><td>9 am</td><td>12 pm</td><td>3 pm</td></tr>" +
"</table>";
break;
case 5:
output = "Friday Schedule<br>" +
"<table>" +
"<tr><td>Client 1</td><td>Client 2</td><td>Client 3</td></tr>" +
"<tr><td>9 am</td><td>12 pm</td><td>3 pm</td></tr>" +
"</table>";
break;
case 6:
case 7:
output = "Enjoy your weekend!";
break;
default:
output = "Enter a valid day from 1 to 7.";
}

document.getElementById("output").innerHTML = output;
}
</script>
</body>
</html>

Ǫ4
Write a program

To display prime numbers from 1-20 using for loop


To display even numbers from 21-40 using do-while loop
To display odd numbers from 41-60 using while loop

<html>
<body>
<script>

document.write(" PRIME NUMBERS FROM 1 TO 20 : ");


for(let num = 2 ; num<=20 ; num++){
for(let i = 2 ; i<Math.sqrt(num); i++){
if(num%i==0){
document.write(num +" ");
}
}
}

document.write("<br><br> Even Number from 21 to 40: ");


let a=21;
do{

if(a%2==0){
document.write(a+" ");
}
a++;
} while(a<=40);

document.write("<br><br> Odd numbers from 41 to 60: ");


let b =41;
while( b<=60){

if(b%2!=0){
document.write(b+" ");
}

b++;
}

</script>
</body>
</html>
Ǫ 5. Write a program to implement array methods for adding and removing elements from an
array. Display the array of elements after every method

<html>
<body>

<button id="btn1" onclick="displayArray()"> Display Array </button>


<button id="btn2" onclick="addAtEnd()">Add Element at End </button>
<button id="btn3" onclick="removeFromEnd()"> Remove Element from End </button>
<button id="btn4" onclick="addAtStart()"> Add Element at Start </button>
<button id="btn5" onclick="removeFromStart()"> Remove Element From Start </button>

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

let arr = [1,2,3,4,5,6,7,8];

function displayArray(){
document.getElementById("output").innerHTML = arr;

function addAtEnd(){

let num = Number(prompt("Enter Number to add at end: "));

arr.push(num);
displayArray();

}
function removeFromEnd(){

arr.pop();
displayArray();

function addAtStart(){
let num2 = Number(prompt("Enter number to Add at Start:"));
arr.unshift(num2);
displayArray();
}

function removeFromStart(){

arr.shift();
displayArray();
}

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

arr.unshift(5 ) → add 5 at starting of array


arr.shift() → remove first element from beginning
arr.push(100) → add 100 at end of array
arr.pop() → remove element from end of array

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

<html>
<body>
<script>

let subjects={

CSS : 22519,
AJP : 22517,
OSY : 22516,
STE : 22518,
EST : 22447
};

document.write(" Value of Subject with Index (SUbject name) using dot syntax: <br>");
document.write(" CSS : "+subjects.CSS +"<br>");
document.write(" AJP : "+subjects.AJP +"<br>");
document.write(" OSY : "+subjects.OSY +"<br>");
document.write(" STE : "+subjects.STE +"<br>");
document.write(" EST : "+subjects.EST +"<br>");

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

Ǫ8 Write a program to create a function to find out the perfect number between 1 and 100

Perfect number ase number asto jya number che divisors mahnjech as tya number la complete divide
karnare sagle number except that number itself cha sum ani to number jr equal asel tar te perfct
number astat

6 is a perfect number because its divisors (excluding 6) are 1, 2, and 3, and 1+2+3=61 + 2 + 3 =
61+2+3=6.
28 is also a perfect number because 1+2+4+7+14=281 + 2 + 4 + 7 + 14 = 281+2+4+7+14=28.
<html>
<body>

<button id="btn" onclick="perfectNum()"> Click to Display Perfect Numbers from 1 to 100 </button>

<script>

function perfectNum(){

for( let num=1 ; num<=100 ; num++){

let sum=0; // after every number check sum = 0 as it should chdck for sum of other numbers
to
for(let i=1 ; i<num ; i++){

if(num%i==0){

sum = sum + i;
}

}
if(sum==num){
document.write(num+" ");
}

}
}

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

Ǫ9 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

<html>
<body>
<script src="jsx.js"> </script>

<script>

muln(2,3,4,5);

</script>

</body>
</html>

Js file:

function muln(a,b,c,d){
console.log(" Multiplication of 2 Numbers: "+(a*b));
console.log(" Multiplication of 3 Numbers: "+(a*b*c));
console.log(" Multiplication of 4 Numbers: "+(a*b*c*d));
}

Ǫ10 Write a program to print sum of digits of user entered value using recursive function.
<html>
<body>

<h2> Sum of Digit Code </h2>


<label> Enter a Number: </label>
<input type="text" id="num" name="num">
<button id="btn" onclick="calc()"> Calculate </button>

<p id="result"> Sum of Digit = </p>

<script>

function calc(){
let num = Number(document.getElementById("num").value);

let res = sumOfDigit(num);

document.getElementById("result").innerHTML = " Sum of Digit = "+res;

function sumOfDigit(num){

if(num===0){

return 0;
}

return num % 10 + sumOfDigit(Math.floor(num/10));

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

Remember this:
return num % 10 + sumOfDigit(Math.floor(num/10));

Ǫ11 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”)

( string.includes() to check if word exist in string or not and method return true or false
string.indexOf() to find the chrarcter at that index considering index starting from 0
string.charAt() to find the index of the any character we want )
<html>
<body>
<script>

let str = "I like JavaScript programming";

document.write(" Characters at position 3,15,8 : <br>");


document.write("Character at position 3: "+ str.charAt(3) +"<br>");
document.write("Character at position 15: "+str.charAt(15) +"<br>");
document.write("Character at position 8: "+str.charAt(8) +"<br>");

document.write(" Position of caharcter J,p,a,t: ");


document.write(" position of J: "+str.indexOf('J') +"<br>");
document.write(" position of p: "+str.indexOf('p') +"<br>");
document.write(" position of a: "+str.indexOf('a') +"<br>");
document.write(" position of t: "+str.indexOf('t') +"<br>");

let likepresent = str.includes("like");

if(likepresent){
document.write("like is present in string");
}
else document.write("like is not present in string");

</script>
</body>
</html>
/body>
</html>
// remember every method or character of string starts from index 0 so if u want to display answer for
normal user add 1 while displaying the character
// space is also conssiderd as a character in string

Ǫ12 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”)
<html>
<body>
<script>

let str = "I like JavaScript programming";

let newstr1 = str.replace("like","know");

document.write(" String after replacing like with know: "+newstr1 +"<br>");

let newstr2 = newstr1.substring(7).split(" "); // substring startIndex and endIndex as parameter


gheto , if no specified then end of string as end index

document.write(" String after splitting at index 7: "+newstr2 +"<br>");

</script>
</body>
</html>
Ǫ13

Ans
<html>
<body>
<style>
.highlight {
background-color: limegreen;
}
</style>

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

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

Ǫ14 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)

<html>
<body>
<form>

<label>Enter Name: </label>


<input type="text" id="name">
<br><br>
<label> Employee ID: </label>
<input type="text" id="emppid">
<br><br>
<label> Email: </label>
<input type="email" id="email">
<br><br>
<label> Enter Password: </label>
<input type="text" id="pass">
<br><br>
<label> Confirm Password: </label>
<input type="text" id="conpass">
<br><br>
<button id="reg" onclick="register()"> Register </button>

</form>

<script>

function register(){

let pass1 = document.getElementById("pass").value;


let pass2 = document.getElementById("conpass").value;

if(pass1 != pass2){
alert(" Password Doesnt Match");;
}
else alert("Password MATCHED! Regsiteration sucesfull");

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

<html>
<body>

<h2> Form Events </h2>

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

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


<input type="text id="name" onfocus="handleEvent('focus',event)" onblur="handleEvent('blur',event)"
>

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

<p id="output"></p>

</form>

<script>

function handleEvent(eventType,e){
e.preventDefault();
document.getElementById("output").innerHTML=eventType ;

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

<html>
<body>

<h2> Mouse Events </h2>

<label for="name"> Perfrom the mouse events on this textfield: </label>

<input type="text" id="name" ondblclick="showMsg('Double click')" onclick="showMsg('Click')"


onmouseup="showMsg('mouseup')" onmousedown="showMsg('mousedown')"
onmousemove="showMsg('mousemov')" onmouseout="showMsg('mouseout')"
onmouseover="showMsg('mouseover')" >

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

<p id="output"></p>

<script>

function showMsg(eventType){

document.getElementById("output").innerHTML=eventType;
}

</script>

</body>
</html>
Ǫ17 Write a JavaScript program to demonstrate window methods with output (e.g. load, unload,
open, close, resize)

<html>
<body>

<h2> Window Events </h2>

<button onclick="openWindow()"> Open pop up window </button>


<button onclick="closeWindow()"> Close pop up window </button>

<script>
let popupWindow;

window.onload = () => {
alert("Window loaded");
};

// This event won't work because `window.unload` is deprecated in modern browsers.


// Use `window.onbeforeunload` instead:
window.onbeforeunload = () => {
alert("Window unloaded");
};

// Open a new popup window


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

// Close the popup window if it exists


function closeWindow() {
popupWindow?.close();
}

// Properly attach the resize event


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

</body>
</html>

Ǫ18 Write a JavaScript program to demonstrate key events with output (e.g. keyup, keydown,
keypress)

<html>
<body>

<label>ENter text: </label>


<input type="text" onkeydown="showMsg('key Down')" onkeypress="showMsg('key press')"
onkeyup="showMsg('key up')" >
<p id="output"></p>
<script>

function showMsg(str){

document.getElementById("output").innerHTML=str;

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

Ǫ19 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

<!DOCTYPE html>
<html>
<body>

<h2>Address Form</h2>

<form>
<!-- Middle Name -->
<label for="mname"> Name:</label>
<input type="text" id="myname" name="myname"><br><br>

<!-- Current Address -->


<label for="currentAddress">Current Address:</label>
<input type="text" id="currentAddress"
name="currentAddress"><br><br>

<!-- Radio Button -->


<label>Is Current Address your Permanent
Address?</label>
<input type="radio" name="sameAddress"
onclick="togglePermanentAddress(true)"> Yes
<input type="radio" name="sameAddress"
onclick="togglePermanentAddress(false)"> No<br><br>

<!-- Permanent Address -->


<label for="permAddress">Permanent Address:</label>
<input type="text" id="permAddress"
name="permAddress"><br><br>

<!-- Submit Button -->


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

<script>
function togglePermanentAddress(disable) {
document.getElementById("permAddress").disabled =
disable;
}
</script>

</body>
</html>
Ǫ20Create 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’

<html>
<body>
<form>

Enter Name: <input type="text" id="myname"> <br><br>


Enter Userame: <input type="text" id="un"> <br><br>

<button id="btn1" onclick="createSessionCookie()">Create Session


Cookie</button>
<button id="btn2" onclick="createPersistentCookie()"> Create
Persistent Cookie </button>
</form>
<script>
function createSessionCookie(){
let myname = document.getElementById("myname").value;
document.cookie=`name=${myname} ; path=/`;
alert("session cookie created for name");
}

function createPersistentCookie(){

let un=document.getElementById("un").value;
document.cookie=`username=${un} ; path=/ ; expires= Wed, 25
Dec 2024 23:23:05 GMT ; Secure ; SameSite=LAX`;
alert("persistent cookie created");
}

</script>

</body>
</html>

Ǫ22Create 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)

<!DOCTYPE html>
<html>
<body>

<h2>Employee Form</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="empId">Employee ID:</label>


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

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


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

<label for="mobile">Mobile Number:</label>


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

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

<script>
function validateForm() {
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 nameRegex = /^[a-zA-Z\s]+$/;


const empIdRegex = /^EMP\d{6}$/;
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const mobileRegex = /^\d{10}$/;

if (!nameRegex.test(name)) {
alert("Invalid Name. Use letters and spaces only.");
return false;
}
if (!empIdRegex.test(empId)) {
alert("Invalid Employee ID. Format should be EMP followed by 6 digits (e.g.,
EMP191120).");
return false;
}
if (!emailRegex.test(email)) {
alert("Invalid Email ID.");
return false;
}
if (!mobileRegex.test(mobile)) {
alert("Invalid Mobile Number. Enter a 10-digit number.");
return false;
}

alert("Form submitted successfully!");


return true;
}
</script>

</body>
</html>

Ǫ23 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.

<html>
<body>

<h1>Dynamic Dropdown Menu</h1>


<form>
<!-- Year dropdown -->
<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>

<!-- Subject dropdown -->


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

<!-- Submit button -->


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

<script>
// Update subjects based on selected year
function updateSubjects() {
var subjects = {
SYCO: ['DSU', 'OOP', 'DTE'],
TYCO: ['OSY', 'CSS', 'AJP']
};

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


var subjectSelect = document.getElementById('subject');
subjectSelect.innerHTML = '<option value="">--Select--</option>';

if (subjects[year]) {
subjects[year].forEach(function(subject) {
var option = document.createElement('option');
option.text = subject;
subjectSelect.add(option);
});
}
}

// Show selected year and subject


function submitForm() {
var year = document.getElementById('year').value;
var subject = document.getElementById('subject').value;
alert('Selected Year: ' + year + '\nSelected Subject: ' + subject);
}
</script>

</body>
</html>
Ǫ24
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
<html>
<body>

<img id="bannerImage" src="chip1.png" onclick="openLink()">


<button onclick="stopSlideshow()">Stop</button>
<button onclick="prevImage()" id="prevButton"
disabled>Prev</button>
<button onclick="nextImage()" id="nextButton"
disabled>Next</button>

<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, intervalId;

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

function stopSlideshow() {
clearInterval(intervalId);
document.querySelectorAll('button').forEach(b => b.disabled =
false);
}

function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
updateBanner();
}

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

function updateBanner() {
document.getElementById('bannerImage').src =
images[currentIndex].src;
document.getElementById('prevButton').disabled = currentIndex
=== 0;
document.getElementById('nextButton').disabled = currentIndex
=== images.length - 1;
}

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

startSlideshow();
</script>

</body>
</html>

Ǫ25
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>

You might also like