Scribd
Upload
8 views

Web Programming Lab DA2

This document contains code snippets to perform various operations on income values like displaying them in a table, calculating total income, updating values, sorting values, and filtering into a higher income array. The operations are done using JavaScript and results are displayed in the web page.

Uploaded by

Mazz Maxx
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
8 views

Web Programming Lab DA2

This document contains code snippets to perform various operations on income values like displaying them in a table, calculating total income, updating values, sorting values, and filtering into a higher income array. The operations are done using JavaScript and results are displayed in the web page.

Uploaded by

Mazz Maxx
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/ 51

Web Programming Lab

Digital Assessment-2

Course Code: BCSE203E

Name: Ayush Gupta

Registration Number: 22BCE0927

Slot: L15+L16/L29+L30
 Exercise 11

1. Create a numeric indexed array using income values


show the output in new html document.

# Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Income Values</title>
</head>
<body>

<h2>Income Values</h2>

<div id="incomeTable"></div>

<script>
// Define the array of income values
var incomes = [30000, 45000, 60000, 55000, 70000];

// Function to generate HTML table from array


function generateHTMLTable(array) {
var html = '<table border="1">';
html += '<tr><th>Income</th></tr>';
for (var i = 0; i < array.length; i++) {
html += '<tr><td>' + array[i] + '</td></tr>';
}
html += '</table>';
return html;
}

// Generate HTML content


var incomeTableElement = document.getElementById("incomeTable");
incomeTableElement.innerHTML = generateHTMLTable(incomes);
</script>

</body>
</html>
 Output
2. Get income values of a family members and
display the total income using a popup window.

# Code
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Family Income Total</title>

<script>

function calculateTotal() {

// Get income values from input fields

var income1 = parseFloat(document.getElementById("income1").value);

var income2 = parseFloat(document.getElementById("income2").value);

var income3 = parseFloat(document.getElementById("income3").value);

var income4 = parseFloat(document.getElementById("income4").value);

// Calculate total income

var totalIncome = income1 + income2 + income3 + income4;


// Display total income in a popup window

alert("Total Family Income: $" + totalIncome.toFixed(2));

</script>

</head>

<body>

<h2>Enter Family Members' Income</h2>

<form>

<label for="income1">Income of Family Member 1:</label><br>

<input type="number" id="income1" name="income1" value=""><br><br>

<label for="income2">Income of Family Member 2:</label><br>

<input type="number" id="income2" name="income2" value=""><br><br>

<label for="income3">Income of Family Member 3:</label><br>

<input type="number" id="income3" name="income3" value=""><br><br>

<label for="income4">Income of Family Member 4:</label><br>

<input type="number" id="income4" name="income4" value=""><br><br>


<input type="button" value="Calculate Total Income"
onclick="calculateTotal()">

</form>

</body>

</html>

 Output
 With input values and final result
3. Update two income values due to yearly hike and
show the updated total income in a paragraph element
along with other member details.

# Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Family Income Details</title>
<script>
function calculateTotal() {
// Get values from input fields
var name1 = document.getElementById("name1").value;
var initialIncome1 = parseFloat(document.getElementById("income1").value);
var hike1 = parseFloat(document.getElementById("hike1").value);

var name2 = document.getElementById("name2").value;


var initialIncome2 = parseFloat(document.getElementById("income2").value);
var hike2 = parseFloat(document.getElementById("hike2").value);
// Calculate updated income values with yearly hike
var updatedIncome1 = initialIncome1 * (1 + hike1 / 100);
var updatedIncome2 = initialIncome2 * (1 + hike2 / 100);

// Calculate total income


var totalIncome = updatedIncome1 + updatedIncome2;

// Display details and total income


var detailsParagraph = document.getElementById("details");
detailsParagraph.innerHTML = "Family Member 1: " + name1 + ", Initial Income:
$" + initialIncome1.toFixed(2) + ", Updated Income: $" +
updatedIncome1.toFixed(2) + "<br>" +
"Family Member 2: " + name2 + ", Initial Income: $" +
initialIncome2.toFixed(2) + ", Updated Income: $" + updatedIncome2.toFixed(2) +
"<br>" +
"<strong>Total Family Income: $" + totalIncome.toFixed(2) +
"</strong>";
}
</script>
</head>
<body>

<h2>Enter Family Members' Income Details</h2>

<form>
<label for="name1">Name of Family Member 1:</label><br>
<input type="text" id="name1" name="name1" value=""><br><br>

<label for="income1">Initial Income of Family Member 1:</label><br>


<input type="number" id="income1" name="income1" value=""><br><br>

<label for="hike1">Yearly Hike Percentage for Family Member 1:</label><br>


<input type="number" id="hike1" name="hike1" value=""><br><br>

<label for="name2">Name of Family Member 2:</label><br>


<input type="text" id="name2" name="name2" value=""><br><br>

<label for="income2">Initial Income of Family Member 2:</label><br>


<input type="number" id="income2" name="income2" value=""><br><br>

<label for="hike2">Yearly Hike Percentage for Family Member 2:</label><br>


<input type="number" id="hike2" name="hike2" value=""><br><br>

<input type="button" value="Calculate Total Income" onclick="calculateTotal()">


</form>

<p id="details"></p>

</body>
</html>
 Output
 With input values and final result
4. Arrange the income values in ascending and
descending order.

# Code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Family Income Details</title>

<script>

function calculateTotal() {

// Get values from input fields

var name1 = document.getElementById("name1").value;

var initialIncome1 = parseFloat(document.getElementById("income1").value);

var hike1 = parseFloat(document.getElementById("hike1").value);

var name2 = document.getElementById("name2").value;

var initialIncome2 = parseFloat(document.getElementById("income2").value);


var hike2 = parseFloat(document.getElementById("hike2").value);

// Sort incomes in ascending order

var incomesAscending = [initialIncome1, initialIncome2].sort(function(a,


b){return a - b});

// Sort incomes in descending order

var incomesDescending = [initialIncome1, initialIncome2].sort(function(a,


b){return b - a});

// Calculate total income

var totalIncomeAscending = incomesAscending.reduce((acc, curr) => acc + curr,


0);

var totalIncomeDescending = incomesDescending.reduce((acc, curr) => acc +


curr, 0);

// Display details and total income

var detailsParagraph = document.getElementById("details");

detailsParagraph.innerHTML = "Family Member 1: " + name1 + ", Income: $" +


initialIncome1.toFixed(2) + "<br>" +

"Family Member 2: " + name2 + ", Income: $" +


initialIncome2.toFixed(2) + "<br>" +

"<strong>Total Family Income (Ascending Order): $" +


totalIncomeAscending.toFixed(2) + "</strong><br>" +
"<strong>Total Family Income (Descending Order): $" +
totalIncomeDescending.toFixed(2) + "</strong>";

</script>

</head>

<body>

<h2>Enter Family Members' Income Details</h2>

<form>

<label for="name1">Name of Family Member 1:</label><br>

<input type="text" id="name1" name="name1" value=""><br><br>

<label for="income1">Income of Family Member 1:</label><br>

<input type="number" id="income1" name="income1" value=""><br><br>

<label for="hike1">Yearly Hike Percentage for Family Member 1:</label><br>

<input type="number" id="hike1" name="hike1" value=""><br><br>

<label for="name2">Name of Family Member 2:</label><br>

<input type="text" id="name2" name="name2" value=""><br><br>


<label for="income2">Income of Family Member 2:</label><br>

<input type="number" id="income2" name="income2" value=""><br><br>

<label for="hike2">Yearly Hike Percentage for Family Member 2:</label><br>

<input type="number" id="hike2" name="hike2" value=""><br><br>

<input type="button" value="Calculate Total Income" onclick="calculateTotal()">

</form>

<p id="details"></p>

</body>

</html>
 Output
5. Create a higher income array by checking
the condition >50000

# Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Higher Income Array</title>
<script>
function createHigherIncomeArray() {
// Get income values from input fields
var income1 = parseFloat(document.getElementById("income1").value);
var income2 = parseFloat(document.getElementById("income2").value);
var income3 = parseFloat(document.getElementById("income3").value);
var income4 = parseFloat(document.getElementById("income4").value);

// Original income array


var originalArray = [income1, income2, income3, income4];
// Higher income array (> $50,000)
var higherIncomeArray = originalArray.filter(function(income) {
return income > 50000;
});

// Display higher income array


var higherIncomeParagraph = document.getElementById("higherIncome");
higherIncomeParagraph.innerHTML = "Higher Income Array (> $50,000): " +
higherIncomeArray.join(", ");
}
</script>
</head>
<body>

<h2>Enter Family Members' Income</h2>

<form>
<label for="income1">Income of Family Member 1:</label><br>
<input type="number" id="income1" name="income1" value=""><br><br>

<label for="income2">Income of Family Member 2:</label><br>


<input type="number" id="income2" name="income2" value=""><br><br>

<label for="income3">Income of Family Member 3:</label><br>


<input type="number" id="income3" name="income3" value=""><br><br>
<label for="income4">Income of Family Member 4:</label><br>
<input type="number" id="income4" name="income4" value=""><br><br>

<input type="button" value="Create Higher Income Array"


onclick="createHigherIncomeArray()">
</form>

<p id="higherIncome"></p>

</body>
</html>
 Output
6. Create a numeric indexed string valued array
using fruit names and display the fruits array
in html page as ordered list.

# Code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Fruits List</title>

</head>

<body>

<h2>Fruits List</h2>

<script>

// Create a numeric indexed array of fruit names

var fruits = ["Apple", "Banana", "Orange", "Mango", "Grapes"];


// Function to generate an ordered list from the array

function generateOrderedList(array) {

var listHTML = "<ol>";

for (var i = 0; i < array.length; i++) {

listHTML += "<li>" + array[i] + "</li>";

listHTML += "</ol>";

return listHTML;

// Get the HTML element where the list will be displayed

var fruitsListElement = document.createElement("div");

fruitsListElement.innerHTML = generateOrderedList(fruits);

document.body.appendChild(fruitsListElement);

</script>

</body>

</html>
 Output
7. Write a JavaScript that calculates the
squares and cubes of the numbers from 0 to
10 and outputs html text that displays the
resulting values in an html table format.

# Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Squares and Cubes</title>
</head>
<body>

<h2>Squares and Cubes of Numbers from 0 to 10</h2>

<div id="outputTable"></div>

<script>
// Function to calculate squares and cubes and generate HTML table
function generateTable() {
var tableHTML = "<table
border='1'><tr><th>Number</th><th>Square</th><th>Cube</th></tr>";

for (var i = 0; i <= 10; i++) {


var square = i * i;
var cube = i * i * i;
tableHTML += "<tr><td>" + i + "</td><td>" + square + "</td><td>" + cube +
"</td></tr>";
}

tableHTML += "</table>";
return tableHTML;
}

// Get the HTML element where the table will be displayed


var outputTableElement = document.getElementById("outputTable");
outputTableElement.innerHTML = generateTable();
</script>

</body>
</html>
 Output
8. Design a volunteer registration form for ABC
food bank website using HTML, CSS and apply
validation.

# Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volunteer Registration Form</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<div class="container">
<form id="volunteerForm" action="#" method="post">
<h2>Volunteer Registration Form</h2>
<div class="form-group">
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
<small>Format: 1234567890</small>
</div>
<div class="form-group">
<label for="message">Message (Optional):</label>
<textarea id="message" name="message" rows="4"></textarea>
</div>
<button type="submit">Submit</button>
</form>
</div>

<script src="script.js"></script>
</body>
</html>
 Output
 Exercise 12

1. Implement the following dynamic interactions on a web page using


HTML and JavaScript:
i. Create a 'click' event handler to toggle the background color of area
'A' between 'silver' and 'gold'.
ii. Implement a 'mouseover' event handler for area 'B' that cycles its
background color through "blue",
"lime", "red", "yellow", "green", and back to "blue" with each mouse
movement.
iii. Use 'mouseenter' and 'mouseleave' event handlers for area 'C' to
change its background color to "red"
when the mouse enters and to "green" when it leaves.
iv. Apply 'dblclick' event handlers for area 'D’ to modify its background
color to “pink

# Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Dynamic Interactions</title>
<style>
#areaA, #areaB, #areaC, #areaD {
width: 200px;
height: 100px;
margin-bottom: 10px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>

<div id="areaA" onclick="toggleBackground('areaA')">Area A</div>


<div id="areaB"
onmouseover="cycleBackgroundColor('areaB')">Area B</div>
<div id="areaC" onmouseenter="changeToRed('areaC')"
onmouseleave="changeToGreen('areaC')">Area C</div>
<div id="areaD" ondblclick="changeToPink('areaD')">Area D</div>
<script>
function toggleBackground(areaId) {
var area = document.getElementById(areaId);
if (area.style.backgroundColor === 'silver') {
area.style.backgroundColor = 'gold';
} else {
area.style.backgroundColor = 'silver';
}
}

function cycleBackgroundColor(areaId) {
var area = document.getElementById(areaId);
var colors = ["blue", "lime", "red", "yellow", "green"];
var currentIndex = colors.indexOf(area.style.backgroundColor);
var nextIndex = (currentIndex + 1) % colors.length;
area.style.backgroundColor = colors[nextIndex];
}

function changeToRed(areaId) {
var area = document.getElementById(areaId);
area.style.backgroundColor = 'red';
}

function changeToGreen(areaId) {
var area = document.getElementById(areaId);
area.style.backgroundColor = 'green';
}

function changeToPink(areaId) {
var area = document.getElementById(areaId);
area.style.backgroundColor = 'pink';
}
</script>

</body>
</html>
 Output
2. Create a simple calculator using html, css and
javascript that will do the arithmetic operations
using mouse clicks and appropriate event handlers.

# Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Simple Calculator</title>
<style>
.calculator {
width: 250px;
margin: 50px auto;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
button {
width: 50px;
height: 50px;
margin: 5px;
font-size: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>

<div class="calculator">
<input type="text" id="display" readonly>
<br>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('+')">+</button>
<br>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('-')">-</button>
<br>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('*')">*</button>
<br>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="clearDisplay()">C</button>
<button onclick="calculate()">=</button>
<br>
</div>

<script>
function appendToDisplay(value) {
document.getElementById("display").value += value;
}
function clearDisplay() {
document.getElementById("display").value = "";
}

function calculate() {
var expression = document.getElementById("display").value;
var result = eval(expression);
document.getElementById("display").value = result;
}
</script>

</body>
</html>
 Output
 Exercise 13

1. Create an online from for job application to a


software concern to get various details of the
applicant. After validating the details, display the
applicant response using tables and verify the
details. Also include option for updating the
details, if any entry is wrong.

# Code

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Job Application Form</title>

<style>

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

.container {

max-width: 600px;

margin: 50px auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

h2 {

text-align: center;

label {

display: block;

margin-bottom: 5px;

input[type="text"], input[type="email"], textarea {

width: 100%;

padding: 8px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;
}

button {

padding: 10px 20px;

background-color: #007bff;

color: #fff;

border: none;

border-radius: 5px;

cursor: pointer;

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

table, th, td {

border: 1px solid #ccc;

padding: 10px;

text-align: left;

th {

background-color: #f2f2f2;

.update-button {
background-color: #28a745;

.error {

color: red;

</style>

</head>

<body>

<div class="container">

<h2>Job Application Form</h2>

<form id="jobApplicationForm">

<label for="fullName">Full Name:</label>

<input type="text" id="fullName" name="fullName" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="phone">Phone:</label>

<input type="text" id="phone" name="phone" required>

<label for="resume">Resume:</label>

<textarea id="resume" name="resume" rows="4" required></textarea>

<button type="submit">Submit</button>

</form>

<div id="applicantDetails" style="display: none;">


<h2>Applicant Details</h2>

<table>

<tr><th>Field</th><th>Value</th></tr>

<tr><td>Full Name</td><td id="applicantFullName"></td></tr>

<tr><td>Email</td><td id="applicantEmail"></td></tr>

<tr><td>Phone</td><td id="applicantPhone"></td></tr>

<tr><td>Resume</td><td id="applicantResume"></td></tr>

</table>

<button class="update-button" onclick="showFormForUpdate()">Update


Details</button>

</div>

</div>

<script>

function submitForm(event) {

event.preventDefault();

// Get form values

var fullName = document.getElementById("fullName").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

var resume = document.getElementById("resume").value;


// Display applicant details

document.getElementById("applicantFullName").textContent = fullName;

document.getElementById("applicantEmail").textContent = email;

document.getElementById("applicantPhone").textContent = phone;

document.getElementById("applicantResume").textContent = resume;

// Show applicant details section

document.getElementById("jobApplicationForm").reset();

document.getElementById("applicantDetails").style.display = "block";

function showFormForUpdate() {

document.getElementById("applicantDetails").style.display = "none";

document.getElementById("jobApplicationForm").reset();

document.getElementById("jobApplicationForm").addEventListener("submit",
submitForm);

</script>

</body>

</html>
 Output
 Exercise 14

Create a form to get train reservation details of users.


Validate the age field and classify as child, adult or
senior citizen. In berth selection option, allow adults
for middle and upper. For senior citizen, permit only
lower berth. In any of the input filed wrong input is
given, again get the input values from the user. If the
user wants to reenter the data, provide an option
with reset button. When details are submitted,
display the filled details in a table form. Use external
javascript file for including javascript functions for
onmouseover, onvaluechange, and onmouseout.

# Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Train Reservation Form</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<div class="container">
<h2>Train Reservation Form</h2>
<form id="reservationForm" onsubmit="submitForm(event)">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
<label for="berth">Berth Selection:</label>
<select id="berth" name="berth" required>
<option value="lower">Lower</option>
<option value="middle">Middle</option>
<option value="upper">Upper</option>
</select>
<button type="submit">Submit</button>
<button type="button" onclick="resetForm()">Reset</button>
</form>
<div id="reservationDetails" style="display: none;">
<h2>Reservation Details</h2>
<table id="detailsTable">
<tr><th>Field</th><th>Value</th></tr>
</table>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

 Output

You might also like