0% found this document useful (0 votes)
34 views

Css Answer Practical PDF

Hah

Uploaded by

Only For games
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
34 views

Css Answer Practical PDF

Hah

Uploaded by

Only For games
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

1] Develop a program for as we enter the firstname and lastname , email is automatically generated.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Email Auto-Generator</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background-color: #f4f4f9;

.container {

background: #fff;

padding: 20px 30px;

border-radius: 10px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

width: 100%;

max-width: 400px;

.container h2 {
text-align: center;

margin-bottom: 20px;

color: #333;

.form-group {

margin-bottom: 15px;

.form-group label {

display: block;

font-weight: bold;

margin-bottom: 5px;

color: #555;

.form-group input {

width: 100%;

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 14px;

color: #333;

.form-group input:focus {

border-color: #007bff;

outline: none;

box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);


}

.email-output {

margin-top: 20px;

padding: 10px;

background: #f0f8ff;

border: 1px solid #007bff;

border-radius: 5px;

color: #007bff;

font-weight: bold;

text-align: center;

</style>

</head>

<body>

<div class="container">

<h2>Email Auto-Generator</h2>

<div class="form-group">

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

<input type="text" id="firstname" placeholder="Enter your first name"


oninput="generateEmail()">

</div>

<div class="form-group">

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

<input type="text" id="lastname" placeholder="Enter your last name"


oninput="generateEmail()">

</div>

<div class="email-output" id="emailDisplay">Your email will appear here</div>

</div>
<script>

function generateEmail() {

const firstName = document.getElementById('firstname').value.trim().toLowerCase();

const lastName = document.getElementById('lastname').value.trim().toLowerCase();

// Ensure both names are entered before showing an email

if (firstName && lastName) {

document.getElementById('emailDisplay').innerText =
`${firstName}.${lastName}@example.com`;

} else {

document.getElementById('emailDisplay').innerText = 'Your email will appear here';

</script>

</body>

</html>

2] Write a JavaScript program to change the value of


an element that the user cannot change (a read-only
element)
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Update Read-Only Element</title>

<style>

body {
font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background-color: #f0f4f8;

.container {

background: #ffffff;

padding: 20px 30px;

border-radius: 10px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

width: 100%;

max-width: 400px;

.container h2 {

text-align: center;

margin-bottom: 20px;

color: #333;

.form-group {

margin-bottom: 15px;

}
.form-group label {

display: block;

font-weight: bold;

margin-bottom: 5px;

color: #555;

.form-group input {

width: 100%;

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 14px;

color: #333;

.form-group input[readonly] {

background-color: #f9f9f9;

color: #777;

cursor: not-allowed;

.btn {

display: block;

width: 100%;

padding: 10px;

margin-top: 10px;

background-color: #007bff;

color: white;
border: none;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

.btn:hover {

background-color: #0056b3;

</style>

</head>

<body>

<div class="container">

<h2>Update Read-Only Field</h2>

<div class="form-group">

<label for="inputField">Read-Only Field:</label>

<input type="text" id="inputField" value="Initial Value" readonly>

</div>

<button class="btn" onclick="updateValue()">Change Value</button>

</div>

<script>

function updateValue() {

const inputField = document.getElementById('inputField');

inputField.value = "Updated Value";

</script>

</body>

</html>
3] Write a code to find out whether the year is leap
year or not.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Leap Year Checker</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background-color: #f0f4f8;

.container {

background: #ffffff;

padding: 20px 30px;

border-radius: 10px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

width: 100%;

max-width: 400px;

text-align: center;
}

.container h2 {

color: #333;

margin-bottom: 20px;

.form-group {

margin-bottom: 15px;

.form-group input {

width: 100%;

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 14px;

color: #333;

.form-group input:focus {

border-color: #007bff;

outline: none;

box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);

.btn {

display: block;

width: 100%;
padding: 10px;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

.btn:hover {

background-color: #0056b3;

.result {

margin-top: 20px;

font-size: 18px;

font-weight: bold;

.result.leap {

color: #28a745;

.result.not-leap {

color: #dc3545;

</style>

</head>

<body>
<div class="container">

<h2>Leap Year Checker</h2>

<div class="form-group">

<input type="number" id="yearInput" placeholder="Enter a year">

</div>

<button class="btn" onclick="checkLeapYear()">Check Leap Year</button>

<div class="result" id="result"></div>

</div>

<script>

function checkLeapYear() {

const year = parseInt(document.getElementById('yearInput').value);

const resultDiv = document.getElementById('result');

if (isNaN(year) || year <= 0) {

resultDiv.textContent = "Please enter a valid year!";

resultDiv.className = "result not-leap";

return;

if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {

resultDiv.textContent = `${year} is a Leap Year!`;

resultDiv.className = "result leap";

} else {

resultDiv.textContent = `${year} is NOT a Leap Year!`;

resultDiv.className = "result not-leap";

</script>
</body>

</html>

4] Write a JavaScript program to print the Fibonacci


series till 10 number.
<!DOCTYPE html>

<html>

<head>

<title>Fibonacci Series</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: lightblue;

.container {

text-align: center;

background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 8px gray;

.btn {
padding: 10px 20px;

background: blue;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

margin-top: 10px;

.btn:hover {

background: darkblue;

.result {

margin-top: 15px;

font-size: 18px;

color: black;

</style>

</head>

<body>

<div class="container">

<h2 style="color: darkblue;">Fibonacci Series</h2>

<button class="btn" onclick="generateFibonacci()">Show Fibonacci</button>

<div class="result" id="result"></div>

</div>

<script>
function generateFibonacci() {

let numbers = [0, 1]; // Start the series

for (let i = 2; i < 10; i++) { // Generate up to 10 numbers

numbers.push(numbers[i - 1] + numbers[i - 2]);

document.getElementById('result').innerText = "Fibonacci: " + numbers.join(", ");

</script>

</body>

</html>

5] Write a program to demonstrate the use of


onchange event.
<!DOCTYPE html>

<html>

<head>

<title>onchange Event Example</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: lightgray;

.container {
text-align: center;

background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 8px gray;

select {

padding: 10px;

font-size: 16px;

border: 2px solid black;

border-radius: 5px;

background: lightyellow;

color: black;

cursor: pointer;

.result {

margin-top: 15px;

font-size: 18px;

color: darkgreen;

</style>

</head>

<body>

<div class="container">

<h2 style="color: darkblue;">onchange Event Example</h2>

<label for="options" style="font-size: 16px;">Choose an option:</label>

<br><br>
<select id="options" onchange="showMessage()">

<option value="Select">-- Select an option --</option>

<option value="Option 1">Option 1</option>

<option value="Option 2">Option 2</option>

<option value="Option 3">Option 3</option>

</select>

<div class="result" id="result">Your selected option will appear here.</div>

</div>

<script>

function showMessage() {

const dropdown = document.getElementById('options');

const selectedValue = dropdown.value;

const resultBox = document.getElementById('result');

if (selectedValue === "Select") {

resultBox.textContent = "Please select a valid option!";

resultBox.style.color = "red";

} else {

resultBox.textContent = `You selected: ${selectedValue}`;

resultBox.style.color = "darkgreen";

</script>

</body>

</html>
6] Write a program to disable and enabled text field.
<!DOCTYPE html>

<html>

<head>

<title>Enable/Disable Text Field</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: lightcoral;

.container {

text-align: center;

background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 8px gray;

input[type="text"] {

padding: 10px;

font-size: 16px;

border: 2px solid gray;

border-radius: 5px;
width: 200px;

margin-bottom: 10px;

input[type="text"]:disabled {

background-color: lightgray;

color: darkgray;

cursor: not-allowed;

.btn {

padding: 10px 20px;

background: green;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

.btn:hover {

background: darkgreen;

</style>

</head>

<body>

<div class="container">

<h2 style="color: darkblue;">Enable/Disable Text Field</h2>

<input type="text" id="textField" placeholder="Type something..." disabled>


<br>

<button class="btn" onclick="toggleTextField()">Enable/Disable</button>

</div>

<script>

function toggleTextField() {

const textField = document.getElementById('textField');

textField.disabled = !textField.disabled; // Toggle the disabled property

</script>

</body>

</html>

7] Write a program to demonstrate the use of scrollBy


() and scrollTo().
<!DOCTYPE html>

<html>

<head>

<title>scrollBy() and scrollTo() Example</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: lightblue;

margin: 0;
}

.container {

text-align: center;

.scroll-box {

width: 300px;

height: 200px;

overflow: auto;

border: 2px solid darkblue;

background: white;

padding: 10px;

.content {

height: 600px;

width: 100%;

background: linear-gradient(to bottom, lightgreen, yellow, orange, pink);

text-align: center;

font-size: 18px;

line-height: 2;

.btn {

padding: 10px 15px;

margin: 10px 5px;

background: darkblue;

color: white;
border: none;

border-radius: 5px;

cursor: pointer;

.btn:hover {

background: navy;

</style>

</head>

<body>

<div class="container">

<h2>scrollBy() and scrollTo() Example</h2>

<div class="scroll-box" id="scrollBox">

<div class="content">

Scrollable Content <br>

Keep scrolling to see more! <br>

This box demonstrates scrolling functionality using scrollBy() and scrollTo().

</div>

</div>

<button class="btn" onclick="scrollByAmount()">Scroll Down (By 50px)</button>

<button class="btn" onclick="scrollToTop()">Scroll To Top</button>

</div>

<script>

function scrollByAmount() {

const box = document.getElementById('scrollBox');

box.scrollBy(0, 50); // Scroll down by 50px

}
function scrollToTop() {

const box = document.getElementById('scrollBox');

box.scrollTo(0, 0); // Scroll to the top

</script>

</body>

</html>

8]Write a JavaScript program for Changing Attribute


Values Dynamically.
<!DOCTYPE html>

<html>

<head>

<title>Change Attribute Values Dynamically</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: lightgreen;

margin: 0;

.container {

text-align: center;
background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 8px gray;

img {

width: 300px;

height: auto;

margin: 20px 0;

border: 2px solid black;

border-radius: 5px;

.btn {

padding: 10px 15px;

margin: 5px;

background: darkgreen;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

.btn:hover {

background: green;

</style>

</head>
<body>

<div class="container">

<h2>Change Attribute Values Dynamically</h2>

<img id="dynamicImage" src="https://via.placeholder.com/300" alt="Default Image">

<br>

<button class="btn" onclick="changeToImage1()">Show Image 1</button>

<button class="btn" onclick="changeToImage2()">Show Image 2</button>

</div>

<script>

function changeToImage1() {

const img = document.getElementById('dynamicImage');

img.src = "https://via.placeholder.com/300/FF5733/FFFFFF?text=Image+1";

img.alt = "Image 1";

function changeToImage2() {

const img = document.getElementById('dynamicImage');

img.src = "https://via.placeholder.com/300/33C3FF/FFFFFF?text=Image+2";

img.alt = "Image 2";

</script>

</body>

</html>

9] Write a program to count the number of vowels into the string.

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Count Vowels in String</title>

<style>

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: lightblue;

margin: 0;

.container {

text-align: center;

background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 8px gray;

width: 400px;

input[type="text"] {

padding: 10px;

font-size: 16px;

width: 70%;

border: 2px solid #aaa;

border-radius: 5px;
margin-bottom: 15px;

.btn {

padding: 10px 20px;

background-color: green;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

.btn:hover {

background-color: darkgreen;

.result {

margin-top: 15px;

font-size: 18px;

color: darkgreen;

</style>

</head>

<body>

<div class="container">

<h2>Count Vowels in String</h2>

<input type="text" id="inputString" placeholder="Enter a string">

<br>
<button class="btn" onclick="countVowels()">Count Vowels</button>

<div class="result" id="result"></div>

</div>

<script>

function countVowels() {

let inputString = document.getElementById('inputString').value;

let vowels = "aeiouAEIOU";

let count = 0;

// Loop through each character of the input string

for (let i = 0; i < inputString.length; i++) {

if (vowels.indexOf(inputString[i]) !== -1) {

count++;

// Display the result

document.getElementById('result').innerText = `Number of vowels: ${count}`;

</script>

</body>

</html>

10]Write a program to create and delete the cookie.


<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Cookie Operations</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

padding: 20px;

background-color: #f4f4f4;

button {

padding: 10px 20px;

margin: 10px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;

button:hover {

background-color: #45a049;

#cookieStatus {

margin-top: 20px;

</style>

</head>
<body>

<h2>Cookie Operations</h2>

<button onclick="createCookie()">Create Cookie</button>

<button onclick="deleteCookie()">Delete Cookie</button>

<div id="cookieStatus">No cookie found.</div>

<script>

// Function to create a cookie

function createCookie() {

document.cookie = "user=JohnDoe; max-age=3600"; // Cookie will last for 1 hour

document.getElementById("cookieStatus").textContent = "Cookie Created: user=JohnDoe";

// Function to delete a cookie

function deleteCookie() {

document.cookie = "user=; max-age=0"; // Delete the cookie

document.getElementById("cookieStatus").textContent = "Cookie Deleted";

</script>

</body>

</html>

11] WAP to pull down menu.

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Pull Down Menu</title>

<style>

/* Style the navigation bar */

.navbar {

background-color: #333;

/* Style for menu items */

.navbar a {

color: white;

padding: 14px 20px;

text-decoration: none;

display: inline-block;

/* Style for the dropdown container */

.dropdown {

position: relative;

display: inline-block;

/* Hide the dropdown content by default */

.dropdown-content {

display: none;

position: absolute;
background-color: #333;

min-width: 160px;

/* Show dropdown when hovering */

.dropdown:hover .dropdown-content {

display: block;

/* Style for dropdown items */

.dropdown-content a {

color: white;

padding: 12px 16px;

text-decoration: none;

display: block;

/* Change color on hover */

.dropdown-content a:hover {

background-color: #ddd;

color: black;

</style>

</head>

<body>

<div class="navbar">

<a href="#">Home</a>

<a href="#">About</a>
<!-- Dropdown menu -->

<div class="dropdown">

<a href="#">More</a>

<div class="dropdown-content">

<a href="#">Contact</a>

<a href="#">Blog</a>

<a href="#">Portfolio</a>

</div>

</div>

</div>

</body>

</html>

12] Write a JavaScript program for evaluating


checkbox selection.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Checkbox Selection</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

padding: 20px;
background-color: #f4f4f4;

button {

padding: 10px 20px;

margin: 10px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;

#result {

margin-top: 20px;

</style>

</head>

<body>

<h2>Choose your options</h2>

<input type="checkbox" id="option1"> Option 1<br>

<input type="checkbox" id="option2"> Option 2<br>

<input type="checkbox" id="option3"> Option 3<br>

<button onclick="checkSelection()">Check Selection</button>

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

function checkSelection() {

let result = "You selected: ";

if (document.getElementById('option1').checked) {

result += "Option 1, ";

if (document.getElementById('option2').checked) {

result += "Option 2, ";

if (document.getElementById('option3').checked) {

result += "Option 3, ";

// Remove last comma and space, if any

if (result.endsWith(', ')) {

result = result.slice(0, -2);

// Show result

if (result === "You selected:") {

result = "No options selected.";

document.getElementById('result').textContent = result;

</script>

</body>

</html>
13] WAP to check whether the given string is palindrome is not.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Palindrome Checker</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

padding: 20px;

background-color: #f4f4f4;

input, button {

padding: 10px;

margin: 10px;

#result {

margin-top: 20px;

</style>

</head>

<body>

<h2>Check if a String is Palindrome</h2>

<input type="text" id="inputString" placeholder="Enter a string">


<button onclick="checkPalindrome()">Check</button>

<div id="result"></div>

<script>

function checkPalindrome() {

let str = document.getElementById('inputString').value; // Get the input string

let reversedStr = str.split('').reverse().join(''); // Reverse the string

// Check if the string is equal to its reversed version

if (str === reversedStr) {

document.getElementById('result').textContent = str + " is a palindrome!";

} else {

document.getElementById('result').textContent = str + " is not a palindrome!";

</script>

</body>

</html>

You might also like