Create a webpage and write a program in java script to show the result of student attendance on weekly basis for xyz subject. A total of 5 classes can be conducted in a week. The document should contain a form with radio buttons that allows teacher to select status of absence or presence for 5 students of class. The page also allows selecting data and time for which attendance is to be marked. On submitting attendance for a particular day it should prompt a message for successful entry. The program should display the output as:Total number of classes attended out of total number of classes conducted for each student.%age of attendanceButtons should be enabled and disabled as per conditions.HTML Page <!DOCTYPE html><head> <title> M2-R5.1 Set 3 Question 3</title> </head><body> <h1>XYZ Subject Attendance</h1> <form id="attendanceForm"> <label for="dateTime">Select Date and Time:</label> <input type="datetime-local" id="dateTime" name="dateTime" required> <label>Student 1: <input type="radio" name="attendance1" value="present" required> Present <input type="radio" name="attendance1" value="absent" required> Absent </label> <label>Student 2: <input type="radio" name="attendance2" value="present" required> Present <input type="radio" name="attendance2" value="absent" required> Absent </label> <label>Student 3: <input type="radio" name="attendance3" value="present" required> Present <input type="radio" name="attendance3" value="absent" required> Absent </label> <label>Student 4: <input type="radio" name="attendance4" value="present" required> Present <input type="radio" name="attendance4" value="absent" required> Absent </label> <label>Student 5: <input type="radio" name="attendance5" value="present" required> Present <input type="radio" name="attendance5" value="absent" required> Absent </label> <button type="button" onclick="submitAttendance()">Submit Attendance</button> </form> <div id="output"> <h2>Attendance Summary</h2> <p>Total Classes Attended:</p> <ul id="totalClassesAttended"></ul> <p>Percentage of Attendance:</p> <ul id="attendancePercentage"></ul> </div> CSS Page <style> body { font-family: Arial, sans-serif; margin: 20px; } label { display: block; margin-bottom: 10px; } button { margin-top: 10px; padding: 5px 10px; cursor: pointer; } </style> JavaScript Page<script> const attendanceData = { student1: { attended: 0, total: 0 }, student2: { attended: 0, total: 0 }, student3: { attended: 0, total: 0 }, student4: { attended: 0, total: 0 }, student5: { attended: 0, total: 0 } }; function submitAttendance() { const dateTime = document.getElementById('dateTime').value; for (let i = 1; i <= 5; i++) { const attendanceStatus = document.querySelector(`input[name="attendance${i}"]:checked`); if (attendanceStatus) { const studentKey = `student${i}`; attendanceData[studentKey].total++; if (attendanceStatus.value === 'present') { attendanceData[studentKey].attended++; } } } alert('Attendance submitted successfully!'); updateAttendanceSummary(); } function updateAttendanceSummary() { const totalClassesAttendedList = document.getElementById('totalClassesAttended'); totalClassesAttendedList.innerHTML = ''; const attendancePercentageList = document.getElementById('attendancePercentage'); attendancePercentageList.innerHTML = ''; for (const student in attendanceData) { const listItem = document.createElement('li'); listItem.innerText = `${student}: ${attendanceData[student].attended} out of ${attendanceData[student].total}`; totalClassesAttendedList.appendChild(listItem); const percentage = (attendanceData[student].attended / attendanceData[student].total) * 100 || 0; const percentageListItem = document.createElement('li'); percentageListItem.innerText = `${student}: ${percentage.toFixed(2)}%`; attendancePercentageList.appendChild(percentageListItem); } } …
