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:

  1. Total number of classes attended out of total number of classes conducted for each student.
  2. %age of attendance
  3. Buttons should be enabled and disabled as per conditions.



<!DOCTYPE html>


     <title> M2-R5.1 Set 3 Question 3</title>



    <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>Student 2:

            <input type=”radio” name=”attendance2″ value=”present” required> Present

            <input type=”radio” name=”attendance2″ value=”absent” required> Absent


        <label>Student 3:

            <input type=”radio” name=”attendance3″ value=”present” required> Present

            <input type=”radio” name=”attendance3″ value=”absent” required> Absent


        <label>Student 4:

            <input type=”radio” name=”attendance4″ value=”present” required> Present

            <input type=”radio” name=”attendance4″ value=”absent” required> Absent


        <label>Student 5:

            <input type=”radio” name=”attendance5″ value=”present” required> Present

            <input type=”radio” name=”attendance5″ value=”absent” required> Absent


        <button type=”button” onclick=”submitAttendance()”>Submit Attendance</button>


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



CSS Page



        body {

            font-family: Arial, sans-serif;

            margin: 20px;


        label {

            display: block;

            margin-bottom: 10px;


        button {

            margin-top: 10px;

            padding: 5px 10px;

            cursor: pointer;




JavaScript Page


        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}`;


                      if (attendanceStatus.value === ‘present’) {





            alert(‘Attendance submitted successfully!’);



        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}`;


                const percentage = (attendanceData[student].attended / attendanceData[student].total) * 100 || 0;

                const percentageListItem = document.createElement(‘li’);

                percentageListItem.innerText = `${student}: ${percentage.toFixed(2)}%`;