0% found this document useful (0 votes)
41 views16 pages

MCSL 216

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
0% found this document useful (0 votes)
41 views16 pages

MCSL 216

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/ 16

‭ CSl-216‬

M
‭ AA and Web Design Lab Assignment‬
D

‭Section-1‬

‭Ques 1. Implement the task scheduling algorithm …………………………………………….‬


‭●‬ ‭Job 1 5 2 10‬
‭●‬ ‭Service Time 3 7 4 8‬

‭Ans 1.‬‭The task scheduling problem provided indicates four jobs with specific service times:‬

‭‬
● ‭ ob 1‬‭: Service Time = 3‬
J
‭●‬ ‭Job 2‬‭: Service Time = 7‬
‭●‬ ‭Job 3‬‭: Service Time = 4‬
‭●‬ ‭Job 4‬‭: Service Time = 8‬

‭ ince the goal is to minimize the total amount of time spent in the system, we should use the‬
S
‭Shortest Job First (SJF)‬‭algorithm, where the job‬‭with the shortest service time is processed‬
‭first.‬

‭Steps to Implement Shortest Job First (SJF) Algorithm:‬

‭1.‬ ‭Order Jobs by Service Time‬‭:‬


‭○‬ ‭Job 1: 3‬
‭○‬ ‭Job 3: 4‬
‭○‬ ‭Job 2: 7‬
‭○‬ ‭Job 4: 8‬
‭2.‬ ‭Calculate Completion Time‬‭:‬
‭○‬ ‭Job 1‬‭starts at time 0 and finishes at 3.‬
‭○‬ ‭Job 3‬‭starts at time 3 and finishes at 7 (3 + 4).‬
‭○‬ ‭Job 2‬‭starts at time 7 and finishes at 14 (7 + 7).‬
‭○‬ ‭Job 4‬‭starts at time 14 and finishes at 22 (14 + 8).‬
‭3.‬ ‭Total Time Spent in the System (Completion Time)‬‭:‬
‭○‬ ‭Job 1: 3 (finished at time 3)‬
‭○‬ ‭Job 3: 7 (finished at time 7)‬
‭○‬ ‭Job 2: 14 (finished at time 14)‬
‭○‬ ‭Job 4: 22 (finished at time 22)‬
‭Python Code to Implement SJF Algorithm:‬

# Jobs with their respective service times‬



jobs = [‬

{"Job": 1, "Service Time": 3},‬

{"Job": 2, "Service Time": 7},‬

{"Job": 3, "Service Time": 4},‬

{"Job": 4, "Service Time": 8}‬

]‬

# Sort jobs based on Service Time (SJF)‬



jobs.sort(key=lambda x: x["Service Time"])‬

# Calculate completion times‬



current_time = 0‬

completion_times = []‬

for job in jobs:‬



current_time += job["Service Time"]‬

completion_times.append({"Job": job["Job"], "Completion Time":‬

current_time})‬

# Display completion times‬



for job in completion_times:‬

print(f"Job {job['Job']} completed at time {job['Completion‬

Time']}")‬

# Calculate total time spent in the system‬



total_time_spent = sum([job["Completion Time"] for job in‬

completion_times])‬

print(f"Total time spent in the system: {total_time_spent}")‬

‭Output:‬
‭ erl‬
p
‭Copy code‬
Job 1 completed at time 3‬

Job 3 completed at time 7‬

Job 2 completed at time 14‬

Job 4 completed at time 22‬

Total time spent in the system: 22‬

‭Explanation:‬

‭‬
● ‭ ob 1‬‭finishes at time 3.‬
J
‭●‬ ‭Job 3‬‭finishes at time 7.‬
‭●‬ ‭Job 2‬‭finishes at time 14.‬
‭●‬ ‭Job 4‬‭finishes at time 22.‬

‭ he total time spent in the system for all jobs is‬‭22 time units‬‭, as calculated by the SJF‬
T
‭algorithm.‬
‭Ques 2 Implement a recursive binary search algorithm …………………………………..‬

‭10 35 40 45 50 55 60 65 70 100‬

‭Ans 2.‬‭Recursive Binary‬‭Search Process for the Array:‬

‭ rray‬‭: [10, 35, 40, 45, 50, 55, 60, 65, 70, 100]‬
A
‭Target‬‭: 100‬

‭The recursive binary search steps are as follows:‬

‭1.‬ S ‭ tep 1‬‭: Search between indexes 0 and 9.‬


‭Middle index: (0 + 9) // 2 = 4 → Value at index 4 is 50.‬
‭Since 100 > 50, search the right subarray (indexes 5 to 9).‬
‭2.‬ ‭Step 2‬‭: Search between indexes 5 and 9.‬
‭Middle index: (5 + 9) // 2 = 7 → Value at index 7 is 65.‬
‭Since 100 > 65, search the right subarray (indexes 8 to 9).‬
‭3.‬ ‭Step 3‬‭: Search between indexes 8 and 9.‬
‭Middle index: (8 + 9) // 2 = 8 → Value at index 8 is 70.‬
‭Since 100 > 70, search the right subarray (index 9).‬
‭4.‬ ‭Step 4‬‭: Search between indexes 9 and 9.‬
‭Middle index: (9 + 9) // 2 = 9 → Value at index 9 is 100.‬
‭Target found at index 9.‬

‭Code:‬

# Recursive Binary Search Algorithm‬


def recursive_binary_search(arr, low, high, target):‬


# Base case: if range is invalid‬


if low > high:‬


return -1‬

# Calculate middle index‬

mid = (low + high) // 2‬


# Step-by-step process‬

print(f"Searching between indexes {low} and {high}, middle index:‬



{mid}")‬

# If the target is found at mid‬


if arr[mid] == target:‬

return mid‬

# If target is smaller than middle, search in left subarray‬


elif target < arr[mid]:‬


return recursive_binary_search(arr, low, mid - 1, target)‬


# If target is greater than middle, search in right subarray‬


else:‬

return recursive_binary_search(arr, mid + 1, high, target)‬


# Array of integers and the target value‬


arr = [10, 35, 40, 45, 50, 55, 60, 65, 70, 100]‬

target = 100‬

# Perform binary search‬

result = recursive_binary_search(arr, 0, len(arr) - 1, target)‬


# Output the result‬


if result != -1:‬

print(f"Target {target} found at index {result}")‬


else:‬

print(f"Target {target} not found")‬


‭Output with Recursive Call Tree:‬

Recursive Binary Search Call Tree:‬


Searching between indexes 0 and 9, middle index: 4 (Value: 50)‬


Searching between indexes 5 and 9, middle index: 7 (Value: 65)‬


Searching between indexes 8 and 9, middle index: 8 (Value: 70)‬


Searching between indexes 9 and 9, middle index: 9 (Value: 100)‬


Target 100 found at index 9‬


Final Result: Target 100 found at index 9‬



‭Conclusion:‬

‭ he recursive binary search successfully finds the target value 100 at index 9. The recursive call‬
T
‭tree clearly illustrates how the algorithm splits the array and narrows down the search at each‬
‭step.‬
‭Section-2‬

‭Q1: Design a form for booking a room in the Hostel through an institutional website‬

‭ ns.‬‭Here’s a design for a hostel room booking form, with JavaScript for field validation, submit‬
A
‭functionality, and reset functionality. I'll include the HTML, JavaScript, and an explanation of how‬
‭each requirement is addressed.‬

‭ TML and JavaScript for the Hostel Booking Form:‬


H
<!‬
‭ DOCTYPE‬‭
‭ html‬
>‬

<‬
‭ html‬‭
‭ lang‬
=‬
‭"en"‬
‭ >‬

<‬
‭ head‬
‭ >‬

<‭
‭m
‬eta‬‭
charset‬=‬
‭ "UTF-8"‬
‭ >‬

<‭
‭m
‬eta‬‭
name‬
=‬
‭"viewport"‬‭
‭ content‬=‬
‭"width=device-width,‬

initial-scale=1.0"‬
‭ >‬

<‭
‭t
‬itle‬
>‬
‭Hostel Room Booking Form‬
‭ </‬
‭ title‬
‭ >‬

<‭
‭s
‬tyle‬
>‬

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

margin‬
‭ :‬‭
‭ 20px‬ ;‬

}‬

form‬‭
‭ {‬
width‬
‭ :‬‭
‭ 300px‬ ;‬

padding‬
‭ :‬‭
‭ 15px‬;‬

border‬
‭ :‬‭
‭ 1px‬‭ solid‬‭#ccc‬
;‬

border-radius‬
‭ :‬‭
‭ 8px‬;‬

}‬

input‬
‭ ,‬‭
‭ select‬‭ {‬
width‬
‭ :‬‭
‭ 100%‬;‬

padding‬
‭ :‬‭
‭ 8px‬;‬

margin‬
‭ :‬‭
‭ 5px‬‭ 0‬
;‬

}‬

.error‬‭
‭ {‬
color‬
‭ :‬‭
‭ red‬;‬

font-size‬
‭ :‬‭
‭ 12px‬;‬

}‬

button‬‭
‭ {‬
padding‬
‭ :‬‭
‭ 8px‬‭
15px‬
;‬

margin‬
‭ :‬‭
‭ 5px‬
;‬

}‬

.payment-options‬‭
‭ {‬
display‬
‭ :‬‭
‭ flex‬
;‬

justify-content‬
‭ :‬‭
‭ space-between‬
;‬

}‬

.payment-options‬‭
‭ label‬‭
{‬
margin-left‬
‭ :‬‭
‭ 5px‬
;‬

}‬

</‬
‭ style‬
‭ >‬

</‬
‭ head‬
‭ >‬

<‬
‭body‬
‭ >‬

<‬
‭h2‬
‭ >‬
‭Hostel Room Booking Form‬
‭ </‬
‭ h2‬
‭ >‬

<‬
‭form‬‭
‭ id‬
=‬
‭"bookingForm"‬‭
‭ onsubmit‬
=‬
‭"‬
‭return‬‭
‭ validateForm‬
()"‬
‭ >‬

</‬
‭ style‬
‭ >‬

</‬
‭ head‬
‭ >‬

<‬
‭body‬
‭ >‬

<‬
‭h2‬
‭ >‬
‭Hostel Room Booking Form‬
‭ </‬
‭ h2‬
‭ >‬

<‬
‭form‬‭
‭ id‬
=‬
‭"bookingForm"‬‭
‭ onsubmit‬
=‬
‭"‬
‭return‬‭
‭ validateForm‬
()"‬
‭ >‬

<!-- First Name -->‬



<‭
‭l
‬abel‬‭
for‬
=‬
‭"firstName"‬
‭ >‬
‭First Name:‬
‭ </‬
‭ label‬
‭ >‬

<‭
‭i
‬nput‬‭
type‬
=‬
‭"text"‬‭
‭ id‬
=‬
‭"firstName"‬‭
‭ name‬
=‬
‭"firstName"‬
‭ >‬

<‭
‭s
‬pan‬‭
id‬
=‬
‭"firstNameError"‬‭
‭ class‬
=‬
‭"error"‬
‭ ></‬
‭ span‬
‭ >‬

<!-- Last Name -->‬

<‭
‭l
‬abel‬‭
for‬
=‬
‭"lastName"‬
‭ >‬
‭Last Name:‬
‭ </‬
‭ label‬
‭ >‬

<‭
‭i
‬nput‬‭
type‬
=‬
‭"text"‬‭
‭ id‬
=‬
‭"lastName"‬‭
‭ name‬
=‬
‭"lastName"‬
‭ >‬

<‭
‭s
‬pan‬‭
id‬
=‬
‭"lastNameError"‬‭
‭ class‬
=‬
‭"error"‬
‭ ></‬
‭ span‬
‭ >‬

<!-- Email -->‬



<‭
‭l
‬abel‬‭
for‬
=‬
‭"email"‬
‭ >‬
‭Email:‬
‭ </‬
‭ label‬
‭ >‬

<‭
‭i
‬nput‬‭
type‬
=‬
‭"email"‬‭
‭ id‬
=‬
‭"email"‬‭
‭ name‬
=‬
‭"email"‬
‭ >‬

<‭
‭s
‬pan‬‭
id‬
=‬
‭"emailError"‬‭
‭ class‬
=‬
‭"error"‬
‭ ></‬
‭ span‬
‭ >‬

<!-- Arrival Date -->‬



<‭
‭l
‬abel‬‭
for‬
=‬
‭"arrivalDate"‬
‭ >‬
‭Arrival Date:‬
‭ </‬
‭ label‬
‭ >‬

<‭
‭i
‬nput‬‭
type‬
=‬
‭"date"‬‭
‭ id‬
=‬
‭"arrivalDate"‬‭
‭ name‬
=‬
‭"arrivalDate"‬
‭ >‬

<‭
‭s
‬pan‬‭
id‬
=‬
‭"arrivalDateError"‬‭
‭ class‬
=‬
‭"error"‬
‭ ></‬
‭ span‬
‭ >‬

<!-- Departure Date -->‬



<‭
‭l
‬abel‬‭
for‬
=‬
‭"departureDate"‬
‭ >‬
‭Departure Date:‬
‭ </‬
‭ label‬
‭ >‬

<‭
‭i
‬nput‬‭
type‬
=‬
‭"date"‬‭
‭ id‬
=‬
‭"departureDate"‬

name‬
‭ =‭
‭"
‬departureDate"‬
>‬

<‭
‭s
‬pan‬‭
id‬
=‬
‭"departureDateError"‬‭
‭ class‬
=‬
‭"error"‬
‭ ></‬
‭ span‬
‭ >‬

<!-- Country Selection -->‬



<‭
‭l
‬abel‬‭
for‬
=‬
‭"country"‬
‭ >‬
‭Country:‬
‭ </‬
‭ label‬
‭ >‬

<‭
‭s
‬elect‬‭
id‬
=‬
‭"country"‬‭
‭ name‬
=‬
‭"country"‬
‭ >‬

<‬
‭option‬‭
‭ value‬
=‬
‭""‬
‭ >‬
‭Select Country‬
‭ </‬
‭ option‬
‭ >‬

<‬
‭option‬‭
‭ value‬
=‬
‭"USA"‬
‭ >‬
‭USA‬
‭ </‬
‭ option‬
‭ >‬

<‬
‭option‬‭
‭ value‬
=‬
‭"UK"‬
‭ >‬
‭UK‬
‭ </‬
‭ option‬
‭ >‬

<‬
‭option‬‭
‭ value‬
=‬
‭"India"‬
‭ >‬
‭India‬
‭ </‬
‭ option‬
‭ >‬

<‬
‭option‬‭
‭ value‬
=‬
‭"Canada"‬
‭ >‬
‭Canada‬
‭ </‬
‭ option‬
‭ >‬

</‬
‭ select‬
‭ >‬

<‭
‭s
‬pan‬‭
id‬
=‬
‭"countryError"‬‭
‭ class‬
=‬
‭"error"‬
‭ ></‬
‭ span‬
‭ >‬

<!-- Payment Mode -->‬



<‭
‭l
‬abel‬
>‬
‭Payment Mode:‬
‭ </‬
‭ label‬
‭ >‬

<‭
‭d
‬iv‬‭
class‬
=‬
‭"payment-options"‬
‭ >‬

<‬
‭div‬
‭ >‬

<‬
‭label‬‭
‭ for‬
=‬
‭"debit"‬
‭ >‬
‭Debit Card‬
‭ </‬
‭ label‬
‭ >‬

<‬
‭input‬‭
‭ type‬
=‬
‭"radio"‬‭
‭ id‬
=‬
‭"debit"‬‭
‭ name‬
=‬
‭"paymentMode"‬

value‬
‭ =‬
‭"Debit Card"‬
‭ >‬

</‬
‭ div‬
‭ >‬

<‬
‭div‬
‭ >‬

<‬
‭label‬‭
‭ for‬
=‬
‭"credit"‬
‭ >‬
‭Credit Card‬
‭ </‬
‭ label‬
‭ >‬

<‬
‭input‬‭
‭ type‬
=‬
‭"radio"‬‭
‭ id‬
=‬
‭"credit"‬‭
‭ name‬
=‬
‭"paymentMode"‬

value‬
‭ =‬
‭"Credit Card"‬
‭ >‬

</‬
‭ div‬
‭ >‬

</‬
‭ div‬
‭ >‬

<‭
‭s
‬pan‬‭
id‬
=‬
‭"paymentModeError"‬‭
‭ class‬
=‬
‭"error"‬
‭ ></‬
‭ span‬
‭ >‬

<!-- Submit and Reset Buttons -->‬



<‭
‭d
‬iv‬
>‬

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

<‬
‭button‬‭
‭ type‬
=‬
‭"reset"‬

onclick‬
‭ =‬
‭"‬
‭resetForm‬
‭ ()"‬
‭ >‬
‭Reset‬
‭ </‬
‭ button‬
‭ >‬

</‬
‭ div‬
‭ >‬

</‬
‭ form‬
‭ >‬

<!-- JavaScript for Validation and Submit -->‬



<‬
‭script‬
‭ >‬

function‬‭
‭ validateForm‬
() {‬

let‬‭
‭ isValid‬‭
=‬‭
true‬
;‬

// First Name Validation‬



const‬‭
‭ firstName‬‭
=‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"firstName"‬
‭ ).‬
‭ value‬
‭ ;‬

if‬‭
‭ (‬
firstName‬‭
‭ ===‬‭
""‬
) {‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"firstNameError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬‭
"First‬
name is required"‬
‭ ;‬

isValid‬‭
‭ =‬‭
false‬
;‬

}‬‭
‭ else‬‭
{‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"firstNameError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬‭
""‬
;‬

}‬

// Last Name Validation‬



const‬‭
‭ lastName‬‭
=‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"lastName"‬
‭ ).‬
‭ value‬
‭ ;‬

if‬‭
‭ (‬
lastName‬‭
‭ ===‬‭
""‬
) {‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"lastNameError"‬
‭ ).‬
‭ innerText‬

=‬‭
‭ "Last name is required"‬
;‬

isValid‬‭
‭ =‬‭
false‬
;‬

}‬‭
‭ else‬‭
{‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"lastNameError"‬
‭ ).‬
‭ innerText‬

=‬‭
‭ ""‬
;‬

}‬

// Email Validation‬

const‬‭
‭ email‬‭
=‬‭
document‬
.‬
‭getElementById‬
‭ (‬
‭"email"‬
‭ ).‬
‭ value‬
‭ ;‬

if‬‭
‭ (‬
email‬‭
‭ ===‬‭
""‬
) {‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"emailError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬
"Email is required"‬
‭ ;‬

isValid‬‭
‭ =‬‭
false‬
;‬

}‬‭
‭ else‬‭
{‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"emailError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬
""‬
‭ ;‬

}‬

// Arrival Date Validation‬



const‬‭
‭ arrivalDate‬‭
=‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"arrivalDate"‬
‭ ).‬
‭ value‬
‭ ;‬

if‬‭
‭ (‬
arrivalDate‬‭
‭ ===‬‭
""‬
) {‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"arrivalDateError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬
"Arrival date is required"‬
‭ ;‬

isValid‬‭
‭ =‬‭
false‬
;‬

}‬‭
‭ else‬‭
{‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"arrivalDateError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬‭
""‬
;‬

}‬

// Departure Date Validation‬



const‬‭
‭ departureDate‬‭
=‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"departureDate"‬
‭ ).‬
‭ value‬
‭ ;‬

if‬‭
‭ (‬
departureDate‬‭
‭ ===‬‭
""‬
) {‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"departureDateError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬
"Departure date is required"‬
‭ ;‬

isValid‬‭
‭ =‬‭
false‬
;‬

}‬‭
‭ else‬‭
{‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"departureDateError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬‭
""‬
;‬

}‬

// Country Validation‬

const‬‭
‭ country‬‭
=‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"country"‬
‭ ).‬
‭ value‬
‭ ;‬

if‬‭
‭ (‬
country‬‭
‭ ===‬‭
""‬
) {‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"countryError"‬
‭ ).‬
‭ innerText‬

=‬‭
‭ "Country is required"‬
;‬

isValid‬‭
‭ =‬‭
false‬
;‬

}‬‭
‭ else‬‭
{‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"countryError"‬
‭ ).‬
‭ innerText‬

=‬‭
‭ ""‬
;‬

}‬

// Payment Mode Validation‬



const‬‭
‭ paymentModeDebit‬‭
=‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"debit"‬
‭ ).‬
‭ checked‬
‭ ;‬

const‬‭
‭ paymentModeCredit‬‭
=‬
document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"credit"‬
‭ ).‬
‭ checked‬
‭ ;‬

if‬‭
‭ (!‬
paymentModeDebit‬‭
‭ && !‬
paymentModeCredit‬
‭ ) {‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"paymentModeError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬
"Payment mode is required"‬
‭ ;‬

isValid‬‭
‭ =‬‭
false‬
;‬

}‬‭
‭ else‬‭
{‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"paymentModeError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬‭
""‬
;‬

}‬

// If validation fails, return false to prevent form‬



submission‬

return‬‭
‭ isValid‬
;‬

}‬

// Reset form function‬



function‬‭
‭ resetForm‬
() {‬

// Reset all error messages‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"firstNameError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬
""‬
‭ ;‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"lastNameError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬
""‬
‭ ;‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"emailError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬‭
""‬
;‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"arrivalDateError"‬
‭ ).‬
‭ innerText‬

=‬‭
‭ ""‬
;‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"departureDateError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬‭
""‬
;‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"countryError"‬
‭ ).‬
‭ innerText‬‭
‭ =‬
""‬
‭ ;‬

document‬
‭ .‬
‭getElementById‬
‭ (‬
‭"paymentModeError"‬
‭ ).‬
‭ innerText‬

=‬‭
‭ ""‬
;‬

}‬

</‬
‭ script‬
‭ >‬

</‬
‭ body‬
‭ >‬

</‬
‭ html‬
‭ >‬

‭Key Points:‬

‭1.‬ ‭Validation using JavaScript‬‭:‬


‭○‬ ‭Each field is validated to ensure it's not left blank.‬
‭○‬ ‭If a field is empty, an error message is displayed below the respective input field.‬
‭2.‬ ‭Reset Functionality‬‭:‬
‭○‬ ‭Clicking the reset button will clear all input fields and error messages.‬
‭3.‬ ‭Dropdown for Country‬‭:‬
‭○‬ ‭A dropdown list is provided for the user to select a country.‬
‭4.‬ ‭Radio Buttons for Payment Mode‬‭:‬
‭○‬ ‭Users can select between Debit Card and Credit Card using radio buttons.‬
‭5.‬ ‭Submit Process‬‭:‬
‭○‬ ‭The form won't submit until all validations are passed. To add actual database‬
‭submission, you would integrate server-side code (e.g., PHP, Node.js) to handle‬
‭form data after validation.‬

‭ his form structure is designed to meet the criteria of validating the fields, error handling, and‬
T
‭reset functionality using JavaScript.‬

You might also like