Scribd
Upload
9 views

java doubts

CSS IMP QUESTIONS

Uploaded by

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

java doubts

CSS IMP QUESTIONS

Uploaded by

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

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 theuser moves his mouse away from
the link the status bar will display nothing.
<!DOCTYPE html>

<html>

<body>

<h3>Mouse Over the Link</h3>

<a

href="#"

onmouseover="window.status='MSBTE'; return true;"

onmouseout="window.status=''; return true;"

>

Hover over me!

</a>

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

<!DOCTYPE html>

<html>

<head>

<title>UserID and Aadhar No. Validation</title>

</head>

<body>

<h1>Form Validation</h1>

<form>

Name: <input type="text" id="userID" placeholder="Name"><br><br>

Aadhar No.: <input type="text" id="aadharNo" placeholder="Aadhar No. (12 digits)"><br><br>

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

</form>

<script>

function validateForm() {

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

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

var userIDPattern = /^[A-Z][A-Za-z0-9]{9}$/;

if (!userID.match(userIDPattern)) {

alert("UserID must be 10 characters, alphanumeric, and start with a

capital letter.");

return;

var aadharPattern = /^\d{4}\s\d{4}\s\d{4}$/;

if (!aadharNo.match(aadharPattern)) {

alert("Aadhar No. must be 12 digits in the format nnnn nnnn nnnn.");

return;

}
alert("Form submitted successfully!");

</script>

</body>

</html>

Q9. Aadhaar Number: 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)

<input type="text" id="txtAadhaar" />

<span id="lblError" class="error"></span>

<hr/>

<input type="button" id="btnSubmit" value="Submit" onclick="ValidateAadhaar()"/>

<script type="text/javascript">

function ValidateAadhaar() {

var aadhaar = document.getElementById("txtAadhaar").value;

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

lblError.innerHTML = "";

var expr = /^([0-9]{4}[0-9]{4}[0-9]{4}$)|([0-9]{4}\s[0-9]{4}\s[0-9]{4}$)|([0-9]{4}-[0-9]{4}-[0-9]{4}$)/;

if (!expr.test(aadhaar)) {

lblError.innerHTML = "Invalid Aadhaar Number";

</script>

Validating Aadhaar Number using Regular Expression in JavaScript

When the Submit Button is clicked, the ValidateAadhaar JavaScript function is executed.

Inside the ValidateAadhaar JavaScript function, the Aadhaar Number TextBox is referenced and its value is tested using
a Regular Expression.

The following Aadhaar Number formats will be termed as valid.

1. 12 digits without space. Ex: 123456789012

2. White space after every 4th digit. Ex: 1234 5678 9012

3. Hyphen (-) after every 4th digit. Ex: 1234-5678-9012


Finally, if the Aadhaar Number format is incorrect, then an HTML SPAN element with an error message is displayed.

<script type="text/javascript">

function ValidateAadhaar() {

var aadhaar = document.getElementById("txtAadhaar").value;

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

lblError.innerHTML = "";

var expr = /^([0-9]{4}[0-9]{4}[0-9]{4}$)|([0-9]{4}\s[0-9]{4}\s[0-9]{4}$)|([0-9]{4}-[0-9]{4}-[0-9]{4}$)/;

if (!expr.test(aadhaar)) {

lblError.innerHTML = "Invalid Aadhaar Number";

</script>

CSS Class

The following CSS class is used.

error – It will apply RED color to the error message.

<style type="text/css">

body { font-family: Arial; font-size: 10pt; }

.error { color: Red; }

</style>
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 [email protected]
and displays mail ID as message. (Ex. If user enters Rajni as name and Pathak as surname mailID will be
constructed.com) as rajni.pathak@msbte. -->

<!DOCTYPE html>

<html>

<body>

<h3>User Information</h3>

<label for="firstName">First Name:</label>

<input type="text" id="firstName" /><br /><br />

<label for="middleName">Middle Name:</label>

<input type="text" id="middleName" /><br /><br />

<label for="lastName">Last Name:</label>

<input type="text" id="lastName" /><br /><br />

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

<p id="emailMessage"></p>

<script>

function submitForm() {

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

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

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

var emailID = firstName.toLowerCase() + "." + lastName.toLowerCase() +

"@msbte.com";

document.getElementById("emailMessage").innerText =

"Your email ID: " + emailID;

document.getElementById("firstName").disabled = true;
document.getElementById("middleName").disabled = true;

document.getElementById("lastName").disabled = true;

document.getElementById("firstName").style.backgroundColor = "red";

document.getElementById("middleName").style.backgroundColor;

document.getElementById("firstName").style.color = "white";

document.getElementById("middleName").style.color = "white";

document.getElementById("lastName").style.color = "white";

</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.
<!DOCTYPE html>

<html>

<head>

<title>Simple Slideshow</title>

</head>

<body>

<h1>Image Slideshow</h1>

<div>

<img id="slideImage"

src="https://via.placeholder.com/600x400?text=Image+1" alt="Slideshow Image"

style="width: 600px; height: 400px;">

</div>

<div>

<button onclick="previousSlide()">Previous</button>

<button onclick="nextSlide()">Next</button>

</div>

<script>

const images = [

"IMG_20240605_165349_638.jpg",

"IMG_20240605_165349_676.jpg",

"https://www.gstatic.com/webp/gallery/1.png",

"https://www.gstatic.com/webp/gallery/4.png"

];

let current = 0;

function showSlide() {

document.getElementById("slideImage").src = images[current];

}
function nextSlide() {

current = (current + 1) % images.length;

showSlide();

function previousSlide() {

current = (current - 1 + images.length) % images.length;

showSlide();

showSlide();

</script>

</body>

</html>

You might also like