Scribd
Upload
3 views

CSS IMP QUESTIONS

CSS IMP QUESTIONS

Uploaded by

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

CSS IMP QUESTIONS

CSS IMP QUESTIONS

Uploaded by

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

CSS IMP QUESTIONS

Q.1 Write a Java script to modify the status bar using on MouseOver and on MouseOut
with links. When the user moves his mouse over the link, it will display “MSBTE” in the
status bar. When the user moves his mouse away from the link the status bar will
display nothing.

<html>
<body>
<a href="#" onmouseover="window.status='MSBTE'; return true;"
onmouseout="window.status=''; return true;">Hover over me!</a>
</body>
</html>

Q.2 Write a javascript syntax to accessing elements of another child window.

<html>
<body>
<script>
// Assuming `childWindow` is a reference to the opened child window
let childElement = childWindow.document.getElementById("elementID");
</script>
</body>
</html>
Q.3 Design a webpage that displays a form that contains an input for user name and
password. User is prompted to enter the input user name and password and password
become value of the cookies. Write the javascript function for storing the cookies.

<html>
<body>
<form>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="button" onclick="storeCookie()">Submit</button>
</form>

<script>
function storeCookie() {
let password = document.getElementById("password").value;
document.cookie = "password=" + password;
alert("Cookie saved!");
}
</script>
</body>
</html>
Q.4 Write a javascript program to design HTML page with books information in
tabular format, use rollovers to display the discount information.

<html>
<body>
<table border="1">
<tr onmouseover="showDiscount(this)" onmouseout="hideDiscount(this)">
<td>Book 1</td><td id="discount1"></td>
</tr>
</table>

<script>
function showDiscount(row) {
row.cells[1].innerText = "10% off!";
}
function hideDiscount(row) {
row.cells[1].innerText = "";
}
</script>
</body>
</html>
Q.5 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>
<body>
<img id="slideshow" src="image1.jpg" width="300">
<button onclick="previousSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

<script>
let images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg",
"image6.jpg"];
let index = 0;

function nextSlide() {
index = (index + 1) % images.length;
document.getElementById("slideshow").src = images[index];
}

function previousSlide() {
index = (index - 1 + images.length) % images.length;
document.getElementById("slideshow").src = images[index];
}
</script>
</body>
</html>
Q.6 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.

<html>
<body>
<button onclick="openFrames()">Open Window</button>

<script>
function openFrames() {
let newWin = window.open("", "", "width=500,height=500");
newWin.document.write(`
<frameset cols="50%,50%">
<frame name="left">
<frame name="right">
</frameset>
<script>
parent.left.document.body.innerHTML = '<button
onclick="parent.right.document.body.innerHTML=\\"<img src=\\"image.jpg\\"
width=200>\\"">Click Here!</button>';
</script>
`);
}
</script>
</body>
</html>
Q.7 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

<html>
<body>
<script>
let name = "Sudha Narayana Murthy";
let parts = name.split(" ");
console.log("First Name:", parts[0]);
console.log("Middle Name:", parts[1]);
console.log("Last Name:", parts[2]);
</script>
</body>
</html>
Q. 8 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.

<html>
<body>
<form>
<input type="text" id="userID" placeholder="UserID (10 alphanumeric)">
<input type="text" id="aadhaar" placeholder="Aadhaar (nnnn nnnn nnnn)">
<button type="button" onclick="validate()">Submit</button>
</form>

<script>
function validate() {
let userID = /^[A-Z][A-Za-z0-9]{9}$/;
let aadhaar = /^\d{4} \d{4} \d{4}$/;

if (!userID.test(document.getElementById("userID").value)) {
alert("Invalid UserID!");
return;
}
if (!aadhaar.test(document.getElementById("aadhaar").value)) {
alert("Invalid Aadhaar!");
return;
}
alert("Validation Successful!");
}
</script>
</body>
</html>
Q.9 Write a webpage that accepts Username and adharcard as input texts. When the
user enters adhaarcard number ,the JavaScript validates card number and diplays
whether card number is valid or not. (Assume valid adhaar card format to be
nnnn.nnnn.nnnn or nnnn-nnnn-nnnn)

<html>
<body>
<form>
<input type="text" id="aadhaar" placeholder="Enter Aadhaar (nnnn.nnnn.nnnn or nnnn-
nnnn-nnnn)">
<button type="button" onclick="validateAadhaar()">Validate</button>
</form>

<script>
function validateAadhaar() {
let pattern = /^\d{4}[-.]\d{4}[-.]\d{4}$/;
let aadhaar = document.getElementById("aadhaar").value;

if (pattern.test(aadhaar)) {
alert("Aadhaar is valid!");
} else {
alert("Invalid Aadhaar format!");
}
}
</script>
</body>
</html>
Q.10 a) Write HTML Script that displays textboxes for accepting Name, middlename,
Surname of the user and a Submit button. Write proper JavaScript such that when the
user clicks on submit button i) all texboxes must get disabled and change the color to
“RED”. and with respective labels. 3 ii) Constructs the mailID as .@msbte.com and
displays mail ID as message. (Ex. If user enters Rajni as name and Pathak as surname
mailID will be constructed as rajni.pathak@msbte.com) .

<html>
<body>
<form>
<label>First Name: </label>
<input type="text" id="firstName"><br>
<label>Middle Name: </label>
<input type="text" id="middleName"><br>
<label>Surname: </label>
<input type="text" id="surname"><br>
<button type="button" onclick="generateEmail()">Submit</button>
</form>

<script>
function generateEmail() {
let firstName = document.getElementById("firstName").value.toLowerCase();
let surname = document.getElementById("surname").value.toLowerCase();
let email = `${firstName}.${surname}@msbte.com`;

alert(`Email: ${email}`);

// Disable inputs and change color


document.querySelectorAll("input").forEach(input => {
input.disabled = true;
input.style.color = "red";
});
}
</script></body></html>
Q. 11 ) Write a webpage that diplays a form that contains an input for Username and
password. User is prompted to enter the input and password and password becomes
value of the cookie. Write The JavaScript function for storing the cookie . It gets
executed when the password changes.

<html>
<body>
<form>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button type="button" onclick="storeCookie()">Submit</button>
</form>

<script>
function storeCookie() {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;

document.cookie = `username=${username};`;
document.cookie = `password=${password};`;

alert("Cookies saved!");
}
</script>
</body>
</html>
Q.12 Create a slideshow with the group of four images, also simulate the next and
previous transition between slides in your JavaScript.

<html>
<body>
<img id="slideshow" src="image1.jpg" width="300">
<button onclick="previousSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

<script>
let images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
let index = 0;

function nextSlide() {
index = (index + 1) % images.length;
document.getElementById("slideshow").src = images[index];
}

function previousSlide() {
index = (index - 1 + images.length) % images.length;
document.getElementById("slideshow").src = images[index];
}
</script>
</body>
</html>
Q.13

<html>
<body>
<script>
let students = [
{ name: "Sumit", marks: 80 },
{ name: "Kalpesh", marks: 77 },
{ name: "Amit", marks: 88 },
{ name: "Tejas", marks: 93 },
{ name: "Abhishek", marks: 65 }
];

let totalMarks = 0;
students.forEach(student => totalMarks += student.marks);
let average = totalMarks / students.length;

let grade;
if (average < 60) grade = "E";
else if (average < 70) grade = "D";
else if (average < 80) grade = "C";
else if (average < 90) grade = "B";
else grade = "A";
document.write(`Average Marks: ${average.toFixed(2)}<br>`);
document.write(`Grade: ${grade}`);
</script>
</body>
</html>
Q.14 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)

<html>
<body>
<form>
<input type="text" id="email" placeholder="Email">
<input type="text" id="aadhaar" placeholder="Aadhaar (dddd-dddd-dddd)">
<input type="text" id="phone" placeholder="Phone ((ddd)-(dddddddd))">
<button type="button" onclick="validate()">Validate</button>
</form>

<script>
function validate() {
let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
let aadhaarPattern = /^\d{4}-\d{4}-\d{4}$/;
let phonePattern = /^\(\d{3}\)-\(\d{8}\)$/;

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


let aadhaar = document.getElementById("aadhaar").value;
let phone = document.getElementById("phone").value;

if (!emailPattern.test(email)) alert("Invalid Email!");


else if (!aadhaarPattern.test(aadhaar)) alert("Invalid Aadhaar!");
else if (!phonePattern.test(phone)) alert("Invalid Phone!");
else alert("All inputs are valid!");
}
</script></body></html>
Q.15

<html>
<body>
<h3>SELECT BEVERAGE:</h3>
<input type="radio" name="beverage" onclick="showOptions('tea')"> TEA<br>
<input type="radio" name="beverage" onclick="showOptions('coffee')"> COFFEE<br>
<input type="radio" name="beverage" onclick="showOptions('softDrink')"> SOFT
DRINK<br><br>

<select id="dropdown"></select>
<script>
function showOptions(beverage) {
let dropdown = document.getElementById("dropdown");

if (beverage === "tea") {


dropdown.innerHTML = `<option>Green Tea</option>
<option>Milk Tea</option>
<option>Black Tea</option>`;

} else if (beverage === "coffee") {


dropdown.innerHTML = `<option>Cappuccino</option>
<option>Latte</option>
<option>Espresso</option>`;
} else if (beverage === "softDrink") {
dropdown.innerHTML = `<option>Maaza</option>
<option>Sprite</option>
<option>Coca-Cola</option>`;
}
}
</script>
</body>
</html>

You might also like