Scribd
Upload
20 views

Css Prac Material

Css practical

Uploaded by

raut.tanhaji1956
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Css Prac Material

Css practical

Uploaded by

raut.tanhaji1956
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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" onclick="createemail()">Create 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 onclick="openImage()">Display 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 onmouseover="showImage('dell')">Dell</li>
<li onmouseover="showImage('hp')">HP</li>
<li onmouseover="showImage('apple')">Apple</li>
<li onmouseover="showImage('lenovo')">Lenovo</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 onclick="calculate()">Calculate</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>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy