Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

Lab-JS

The document contains a series of HTML and JavaScript projects, including a digital clock, message display form, background color changer, image slideshow, greetings designer, and resume generator. Each project includes the HTML structure, CSS styling, and JavaScript functionality to achieve the desired outcome. The projects are designed to help users practice and enhance their web development skills.

Uploaded by

lovob18076
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Lab-JS

The document contains a series of HTML and JavaScript projects, including a digital clock, message display form, background color changer, image slideshow, greetings designer, and resume generator. Each project includes the HTML structure, CSS styling, and JavaScript functionality to achieve the desired outcome. The projects are designed to help users practice and enhance their web development skills.

Uploaded by

lovob18076
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

ADITYA RAJ

24MCA0201
JavaScript Practice Questions
1. Design a web page which display digital clock as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<style>
#clock {
font-size: 24px;
font-family: Arial, sans-serif;
color: #333;
background-color: yellow;
padding: 15px;
border-radius: 10px;
text-align: center;
display: inline-block;
margin-top: 20px;
}
body {
font-family: Arial, sans-serif;
margin-top: 50px;
}
</style>
</head>
<body>
<h1>Digital Clock</h1>
<div id="clock"></div>
<script>
function updateClock() {
const now = new Date();
let hours = now.getHours();
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const amPm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12 || 12;
const timeString = `${hours}:${minutes}:${seconds} ${amPm}`;
document.getElementById('clock').textContent = timeString;
}
updateClock();
setInterval(updateClock, 1000);
</script>
</body>
</html>

2. Design form which contains text box and button. Once you click the
button the message is displayed in the header tag, the text message
whatever entered by the user in the textbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Message</title>
<style>
#output {
margin-top: 10px;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<form action="" method="post" onsubmit="displayMessage(event)">
<label for="txt">Write Text:</label>
<input type="text" id="txt" name="txt" placeholder="Enter your
message here"><br><br>
<button type="submit">Submit</button>
</form>
<div id="output"></div>
<script>
function displayMessage(event) {
event.preventDefault();
const userInput = document.getElementById('txt').value;
const output = document.getElementById('output');
if (userInput.trim() !== "") {
output.textContent = `Your message: ${userInput}`;
output.style.color = "green";
} else {
output.textContent = "Please enter a message!";
output.style.color = "red";
}
}
</script>
</body>
</html>

3. Design a web page which contains three buttons with labelled as red,
blue and green. On clicking the button, the respective color should
display as background color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Colours</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
height: 100vh;
}
button {
margin: 10px;
padding: 15px 30px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.red {
background-color: white;
color: red;
}
.blue {
background-color: whitesmoke;
color: blue;
}
.green {
background-color: wheat;
color: green;
}
</style>
</head>
<body>
<div>
<button class="red" onclick="changeBgColour('red')">Red</button>
<button class="blue" onclick="changeBgColour('blue')">Blue</button>
<button class="green"
onclick="changeBgColour('green')">Green</button>
</div>

<script>
function changeBgColour(color)
{
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>

4. Design a HTML page to generate an image slide show using JavaScript.


First input all the images (minimum of 5 images) you want to add to the
slideshow. Add a button to start the slideshow. Repeatedly starting from
the first to last, display each image for 5 seconds and then display the
next image. Add two buttons to view the previous and next image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slideshow</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
}

.slideshow-container {
max-width: 600px;
margin: 50px auto;
position: relative;
}

img {
width: 100%;
border-radius: 10px;
display: none;
}

img.active {
display: block;
}

.controls {
margin-top: 20px;
}

button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Image Slideshow</h1>
<button onclick="startSlideshow()">Start Slideshow</button>
<div class="slideshow-container">
<img src="2_1.jpg" alt="Image 1" class="active">
<img src="2_2.jpg" alt="Image 2">
<img src="2_3.jpg" alt="Image 3">
<img src="sad.png" alt="Image 4">
<img src="smile.jpg" alt="Image 5">
</div>

<div class="controls">
<button onclick="prevImage()"><<</button>
<button onclick="nextImage()">>></button>
</div>

<script>
const images = document.querySelectorAll('.slideshow-container
img');
let currentIndex = 0;
let slideshowInterval;

function showImage(index) {
images.forEach((img, i) => {
img.classList.toggle('active', i === index);
});
}

function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}

function prevImage() {
currentIndex = (currentIndex - 1 + images.length) %
images.length;
showImage(currentIndex);
}

function startSlideshow() {
clearInterval(slideshowInterval);
slideshowInterval = setInterval(nextImage, 5000);
}
</script>
</body>
</html>
5. Develop an Online Greetings Designer using JavaScript and CSS.
a. Add options to
i. change the image
ii. Position the image (left, background, right)
iii. Edit text
iv. Change font size
v. Change font color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greetings Designer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
width: 600px;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.controls {
display: flex;
flex-direction: column;
gap: 10px;
}
.greeting-card {
width: 100%;
height: 300px;
margin-top: 20px;
border: 1px solid #ccc;
position: relative;
overflow: hidden;
text-align: center;
background-size: cover;
background-position: center;
}
.greeting-text {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: black;
}
input, select, button {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007BFF;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>Greetings Designer</h2>
<div class="controls">
<label for="imageSelector">Change Image:</label>
<select id="imageSelector">
<option value="" id="changeImage1">Image 1</option>
<option value="" id="changeImage2">Image 2</option>
<option value="" id="changeImage3">Image 3</option>
</select>

<label for="imagePosition">Position Image:</label>


<select id="imagePosition">
<option value="center">Center</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>

<label for="greetingText">Edit Text:</label>


<input type="text" id="greetingText" placeholder="Enter your
message" value="Hello World!">

<label for="fontSize">Change Font Size:</label>


<input type="number" id="fontSize" min="12" max="72"
value="24">

<label for="fontColor">Change Font Color:</label>


<input type="color" id="fontColor" value="#000000">

<button onclick="updateGreetingCard()">Update Greeting</button>


</div>

<div class="greeting-card" id="greetingCard">


<div class="greeting-text" id="greetingTextDisplay">Hello
World!</div>
</div>
</div>

<script>
function updateGreetingCard()
{
const imageSelector = document.getElementById('imageSelector');
const imagePosition = document.getElementById('imagePosition');
const greetingText = document.getElementById('greetingText');
const fontSize = document.getElementById('fontSize');
const fontColor = document.getElementById('fontColor');
const greetingCard = document.getElementById('greetingCard');
const greetingTextDisplay =
document.getElementById('greetingTextDisplay');

greetingCard.style.backgroundImage =
`url('${imageSelector.value}')`;
greetingCard.style.backgroundPosition = imagePosition.value;

greetingTextDisplay.textContent = greetingText.value;

greetingTextDisplay.style.fontSize = `${fontSize.value}px`;
greetingTextDisplay.style.color = fontColor.value;
}
</script>
</body>
</html>

6. Design an online Resume Generator using HTML and Javascript. Design a


HTML page where the user can input his personal, academic and
experience details. Using JavaScript generate the formatted resume.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume Generator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f9;
}
h1 {
text-align: center;
}
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: #5cb85c;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
.resume {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.resume h2 {
margin-top: 0;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
</style>
</head>
<body>
<h1>Resume Generator</h1>
<form id="resumeForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" 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" required>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea id="address" name="address" rows="2"
required></textarea>
</div>
<div class="form-group">
<label for="education">Academic Details:</label>
<textarea id="education" name="education" rows="3"
required></textarea>
</div>
<div class="form-group">
<label for="experience">Experience Details:</label>
<textarea id="experience" name="experience" rows="3"
required></textarea>
</div>
<button type="button" onclick="generateResume()">Generate
Resume</button>
</form>

<div id="resume" class="resume" style="display:none;"></div>

<script>
function generateResume() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
const address = document.getElementById('address').value;
const education = document.getElementById('education').value;
const experience = document.getElementById('experience').value;

const resumeDiv = document.getElementById('resume');


resumeDiv.style.display = 'block';
resumeDiv.innerHTML = `
<h2>${name}</h2>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Phone:</strong> ${phone}</p>
<p><strong>Address:</strong> ${address}</p>
<h3>Academic Details</h3>
<p>${education.replace(/\n/g, '<br>')}</p>
<h3>Experience Details</h3>
<p>${experience.replace(/\n/g, '<br>')}</p>
`;
}
</script>
</body>
</html>

7. A parking garage charges a $2.00 minimum fee to park for up to three


hours. The garage charges an additional $0.50 per hour for each hour or
part thereof in excess of three hours. The maximum charge for any given
24-hour period is $10.00. Assume that no car parks for longer than 24
hours at a time. Write a script that calculates and displays the parking
charges for each customer who parked a car in this garage yesterday.
You should input from the user the hours parked for each customer. The
program should display the charge for the current customer and should
calculate and display the running total of yesterday's receipts. The
program should use the function calculate-Charges to determine the
charge for each customer. Use a text input field to obtain the input from
the user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parking Charges</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
width: 400px;
}
input {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Parking Charges</h2>
<input type="number" id="hoursParked" placeholder="Enter hours
parked" min="0">
<button onclick="calculateCharges()">Calculate Charge</button>
<div class="result" id="result"></div>
<div class="result" id="totalReceipts"></div>
</div>

<script>
let totalReceipts = 0;

function calculateCharges() {
const hours =
parseFloat(document.getElementById('hoursParked').value);
const resultDiv = document.getElementById('result');
const totalReceiptsDiv =
document.getElementById('totalReceipts');

if (isNaN(hours) || hours < 0) {


resultDiv.textContent = 'Please enter a valid number of
hours.';
resultDiv.style.color = 'red';
return;
}

const charge = calculateCharge(hours);


totalReceipts += charge;

resultDiv.textContent = `Charge for current customer:


$${charge.toFixed(2)}`;
resultDiv.style.color = 'green';

totalReceiptsDiv.textContent = `Total receipts:


$${totalReceipts.toFixed(2)}`;
}
function calculateCharge(hours) {
if (hours <= 3) {
return 2.00;
} else if (hours > 3 && hours <= 24) {
const additionalHours = Math.ceil(hours - 3);
const additionalCharge = additionalHours * 0.50;
return Math.min(2.00 + additionalCharge, 10.00);
} else {
return 10.00;
}
}
</script>
</body>
</html>
8. Create a script that uses regular expressions to validate credit card
numbers. Major credit card numbers must be in the following formats:
a. American Express—Numbers start with 34 or 37 and consist of 15
digits.
b. Diners Club—Numbers begin with 300 through 305, or 36 and 38
and consists of 14 digits
c. Discover—Numbers begin with 6011 or 65 and consist of 16 digits.
d. JCB—Numbers beginning with 2131 or 1800 consist of 15 digits,
while numbers beginning with 35 consist of 16 digits.
e. MasterCard—Numbers start with the numbers 51 through 55 and
consist of 16 digits.
f. Visa—Numbers start with a 4; new cards consist of 16 digits and
old cards consist of 13 digits.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credit Card Validator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 400px;
width: auto;
text-align: center;
}
input {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 15px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Validate Credit Card</h1>
<label for="credit_card">Card Type:</label>
<select id="credit_card">
<option value="American Express">American Express</option>
<option value="Diners Club">Diners Club</option>
<option value="Discover">Discover</option>
<option value="JCB">JCB</option>
<option value="MasterCard">MasterCard</option>
<option value="Visa">Visa</option>
</select><br>
<label for="cardNumber">Number:</label>
<input type="text" id="cardNumber" placeholder="Enter Credit Card
Number">
<button onclick="validateCard()">Validate</button>
<div class="result" id="result"></div>
</div>

<script>
function validateCard() {
const cardNumber =
document.getElementById("cardNumber").value.trim();
const cardType = document.getElementById("credit_card").value;
const result = document.getElementById("result");

const patterns = {
"American Express": /^3[47][0-9]{13}$/,
"Diners Club": /^3(?:0[0-5]|[68])[0-9]{11}$/,
"Discover": /^6011[0-9]{12}|65[0-9]{14}$/,
"JCB": /^(?:2131|1800)[0-9]{11}$|^35[0-9]{14}$/,
"MasterCard": /^5[1-5][0-9]{14}$/,
"Visa": /^4(?:[0-9]{12}|[0-9]{15})$/
};
if (patterns[cardType].test(cardNumber)) {
result.textContent = `Valid: ${cardType}`;
result.style.color = "green";
} else {
result.textContent = "Invalid credit card number";
result.style.color = "red";
}
}
</script>
</body>
</html>

9. A company wants to transmit data over the telephone, but it is


concerned that its phones may be tapped. All of its data is transmitted as
four-digit integers. It has asked you to write a program that will encrypt
its data so that the data may be transmitted more securely. Your script
should read a four-digit integer entered by the user in a prompt dialog
and encrypt it as follows: Replace each digit by (the sum of that digit plus
7) modulus 10. Then swap the first digit with the third, and swap the
second digit with the fourth. Then output HTML text that displays the
encrypted integer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Encryption</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}
input {
width: calc(100% - 20px);
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Encrypt Data</h2>
<input type="text" id="inputNumber" placeholder="Enter 4-digit
number">
<button onclick="encryptData()">Encrypt</button>
<div class="result" id="result"></div>
</div>

<script>
function encryptData() {
const input = document.getElementById('inputNumber').value;
const resultDiv = document.getElementById('result');

if (!/^[0-9]{4}$/.test(input)) {
resultDiv.textContent = 'Please enter a valid 4-digit
number.';
resultDiv.style.color = 'red';
return;
}
let digits = input.split('').map(Number);

digits = digits.map(digit => (digit + 7) % 10);

[digits[0], digits[2]] = [digits[2], digits[0]];


[digits[1], digits[3]] = [digits[3], digits[1]];

const encryptedNumber = digits.join('');

resultDiv.innerHTML = `The encrypted number is:


<strong>${encryptedNumber}</strong><br>` + `Click Refresh (or Reload) to
run this script again.`;
resultDiv.style.color = 'green';
}
</script>
</body>
</html>
10.BSNL has designed a grievance registration form in HTML with name of
customer, address, telecom circle, email and grievance nature in a list
box containing huge bills for limited mobile usage, roaming charges and
frequent service disruption and submit button.
a. Write a Javascript DOM event to be enabled when the user
submits the form and display the complaint details in a tabular
format.
b. If no grievance is selected, then invoke another DOM event to
display “No grievances”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BSNL Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f9f9f9;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 400px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input, select, button {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
button {
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.no-grievance {
color: red;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>BSNL Form</h2>
<form id="grievanceForm">
<div class="form-group">
<label for="name">Name of Customer:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
</div>
<div class="form-group">
<label for="circle">Telecom Circle:</label>
<input type="text" id="circle" name="circle" 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="grievance">Grievance Nature:</label>
<select id="grievance" name="grievance">
<option value="">-- Select Grievance --</option>
<option value="Huge bills for limited mobile
usage">Huge bills for limited mobile usage</option>
<option value="Roaming charges">Roaming
charges</option>
<option value="Frequent service disruption">Frequent
service disruption</option>
</select>
</div>
<button type="submit">Submit</button>
</form>
<div class="result" id="result"></div>
</div>

<script>
document.getElementById('grievanceForm').addEventListener('submit',
function(event) {
event.preventDefault();

const name = document.getElementById('name').value;


const address = document.getElementById('address').value;
const circle = document.getElementById('circle').value;
const email = document.getElementById('email').value;
const grievance = document.getElementById('grievance').value;
const result = document.getElementById('result');
result.innerHTML = '';

if (!grievance) {
const noGrievanceMessage = document.createElement('div');
noGrievanceMessage.className = 'no-grievance';
noGrievanceMessage.textContent = 'No grievances';
result.appendChild(noGrievanceMessage);
return;
}

const table = document.createElement('table');


const headerRow = table.insertRow();
headerRow.innerHTML = '<th>Field</th><th>Details</th>';
const fields = {
'Name of Customer': name,
'Address': address,
'Telecom Circle': circle,
'Email': email,
'Grievance Nature': grievance
};
for (const [key, value] of Object.entries(fields)) {
const row = table.insertRow();
row.innerHTML = `<td>${key}</td><td>${value}</td>`;
}
result.appendChild(table);
});
</script>
</body>
</html>

You might also like