css prac material

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event-Driven Form</title>
</head> <body>
<h2>Event-Driven Form</h2>
<form id="myForm" action="#">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<button type="submit" id="submitBtn">Submit</button> </form>
<p id="statusMessage"></p>
<script>
// Change event: Listen to changes in the input fields
const nameInput = document.getElementById('name');
nameInput.addEventListener('change', () => {
alert('Name changed to: ' + nameInput.value);
});
const emailInput = document.getElementById('email');
emailInput.addEventListener('change', () => {
alert('Email changed to: ' + emailInput.value);
});
// Focus and Blur events: Add and remove styles when focusing and leaving input fields
nameInput.addEventListener('focus', () => {
nameInput.style.backgroundColor = 'lightyellow';
});
nameInput.addEventListener('blur', () => {
nameInput.style.backgroundColor = '';
});
emailInput.addEventListener('focus', () => {
emailInput.style.backgroundColor = 'lightblue';
});
emailInput.addEventListener('blur', () => {
emailInput.style.backgroundColor = '';
});
// Mouseover event: Button hover effect
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('mouseover', () => {
submitBtn.style.backgroundColor = 'lightgreen';
});
submitBtn.addEventListener('mouseout', () => {
submitBtn.style.backgroundColor = '';
});
// Click event: Form submit
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
event.preventDefault(); // Prevent actual form submission for demo purposes
document.getElementById('statusMessage').textContent = 'Form submitted successfully!';
});
// Input event: Detect real-time typing
const messageInput = document.getElementById('message');
messageInput.addEventListener('input', () => {
console.log('User is typing: ' + messageInput.value);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Register">

</form>
<script>
document.getElementById("registrationForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
const name = document.getElementById("name").value;

const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
// Example: Processing form data

console.log("Name: " + name);
console.log("Email: " + email);
console.log("Password: " + password);
alert("Registration successful!");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script>
function createemail()
{
var firstname=document.myform.firstname.value;
var lastname=document.myform.lastname.value;
document.write(firstname+"."+lastname,"@msbte.com");
}
</script>
<form name="myform" method="post">
<label for="firstname">Firstname</label>
<input type="text" id="firstname">
<label for="lastname">Lastname</label>
<input type="text" id="lastname">
<button type="submit" Email</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Image Selector</title>
</head>
<body>
<h3>Select an image:</h3>
<select id="imageSelector">
<option value="">--Select an Image--</option>
<option value="C:\Users\ATHARVA\OneDrive\Pictures\asko\win6.jpg">Image 1</option>
<option value="C:\Users\ATHARVA\OneDrive\Pictures\asko\kashamir.jpg">Image 2</option>
<option value="C:\Users\ATHARVA\OneDrive\Pictures\asko\win4.avif">Image 3</option>
</select>
<button Image</button>
<script>
function openImage() {
var selector = document.getElementById("imageSelector");
var selectedImage = selector.value;
if (selectedImage) {
var newWindow = window.open("");
newWindow.document.write("<img src='" + selectedImage + "' alt='Selected Image'>");
} else {
alert("Please select an image.");
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Laptop Brands</title>
</head>
<body>
<h3>Laptop Brands</h3>
<ul>
<li > <li > <li > <li > </ul>
<h3>Image of the selected laptop:</h3>

<div id="imageBox">
<img id="laptopImage" src="https://i.dell.com/is/image/DellContent/content/dam/ss2/product-
images/dell-client-products/notebooks/g-series/g16-7630/media-gallery/white/notebook-g16-7630-nt-
white-gallery-
1.psd?fmt=pjpg&pscan=auto&scl=1&wid=3500&hei=2625&qlt=100,1&resMode=sharp2&size=350
0,2625&chrss=full&imwidth=5000" alt="Dell" width="300">
</div>
<script>
function showImage(brand) {
var image = document.getElementById("laptopImage");
if (brand === 'dell') {

image.src = 'https://i.dell.com/is/image/DellContent/content/dam/ss2/product-images/dell-
client-products/notebooks/g-series/g16-7630/media-gallery/white/notebook-g16-7630-nt-white-
gallery-
1.psd?fmt=pjpg&pscan=auto&scl=1&wid=3500&hei=2625&qlt=100,1&resMode=sharp2&size=350
0,2625&chrss=full&imwidth=5000';
image.alt = 'Dell';
} else if (brand === 'hp') {
image.src = 'https://images-cdn.ubuy.co.in/64ccb2559d908f42222b598a-hp-pavilion-13-3-
fhd-intel-core-i3.jpg';
image.alt = 'HP';
} else if (brand === 'apple') {
image.src =
'https://media.wired.com/photos/643d7e61cdba28f045ac3f59/master/pass/macbook_sec_GettyImages
-1368668740.jpg';
image.alt = 'Apple';
} else if (brand === 'lenovo') {
image.src = 'https://p4-
ofp.static.pub//fes/cms/2024/09/19/2w4nfcxmd0aczd2o8d45c1yy2xj194963753.png';
image.alt = 'Lenovo';
}
}
</script>
</body>
</html>
9th prac ans
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Intrinsic Functions Example</title>
</head>
<body>
<h2>JavaScript Intrinsic Functions: Square, Cube, and Factorial</h2>
<p>Enter a number:</p>
<input type="number" id="userInput" value="1">
<button >
<h3>Results:</h3>
<p>Square: <span id="squareResult"></span></p>
<p>Cube: <span id="cubeResult"></span></p>
<p>Factorial: <span id="factorialResult"></span></p>
<script>
// Function to calculate square, cube, and factorial using intrinsic JavaScript methods
function calculate() {
var num = parseInt(document.getElementById("userInput").value);
// Intrinsic functions
var square = Math.pow(num, 2); // Square
var cube = Math.pow(num, 3); // Cube
var factorial = getFactorial(num); // Factorial
// Display the results

document.getElementById("squareResult").innerText = square;
document.getElementById("cubeResult").innerText = cube;
document.getElementById("factorialResult").innerText = factorial;
}
// Function to calculate factorial using recursion

function getFactorial(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * getFactorial(n - 1);
}
}
</script>
</body>
</html>

css prac material

Uploaded by

Copyright:

Available Formats

css prac material

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

css prac material

Uploaded by

Copyright:

Available Formats

<!

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

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

// Example: Processing form data

<button Image</button>

<h3>Image of the selected laptop:</h3>

if (brand === 'dell') {

// Display the results

// Function to calculate factorial using recursion

You might also like