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>
