Scribd
Upload
65 views36 pages

Css Answer Practical PDF

Hah

Uploaded by

Only For games
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
65 views36 pages

Css Answer Practical PDF

Hah

Uploaded by

Only For games
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/ 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