How to create a dynamic report card using HTML, CSS and JavaScript ?

How to create a dynamic report card using HTML, CSS and JavaScript ?

Last Updated : 30 Jul, 2024

We have to build a website where you can upload your student data like their name and marks in different subjects. And after uploading it will insert the student data in the table as well as, it will show the total marks, average, and pass/fail status. The implementation is done by using HTML and JavaScript.

Approach:

At first, we have to create some rows and columns for name and subject scores. Again subject scores will be further divided into four columns. There are four subject names that will be displayed. Users are allowed to enter the details with a click button to "Add To Table".
There will be another table Student Data with four columns Name, Total, Average, Pass Or Fail.
For every entered data, one row will add to the score table, showing the student's total score, average and pass or fail status. If the average score is greater than 70 then the status is "pass" otherwise the status is "fail".
If we enter other data it will store in the table.

Example: This example describes the above-explained approach.

HTML

<!DOCTYPE html>
<html>

<body bgcolor="lightblue">
    <center>
    <table border="1" cellspacing="5" bgcolor="white">
        <caption><b>Input Marks</b></caption>
        <tr>
            <th rowspan="2">Name</th>
            <th colspan="4">Score</th>

        </tr>
        <tr>
            <th>Hindi</th>
            <th>English</th>
            <th>Math</th>
            <th>C Programming</th>
        </tr>
        <tr>
            <td><input type="text" id="aname"></td>
            <td><input type="text" id="am"></td>
            <td><input type="text" id="aj"></td>
            <td><input type="text" id="ad"></td>
            <td><input type="text" id="an"></td>
        </tr>
        <tr>
            <th colspan="5" height="30">
            <input type="submit" value="Add To Table" onclick="Sub()"></th>
        </tr>    
    </table>
    <br>
    <table border="1" cellspacing="5" bgcolor="white" 
           height="100" width="500" cellpadding="5" id="TableScore">
        <caption><b>Student Data</b></caption>
        <tr>
            <th width="180">Name</th>
            <th>Total</th>
            <th>Average</th>
            <th>Pass Or Fail</th>
        </tr>
        
    </table>
    </center>
    <script type="text/javascript">
        function Sub(){
            let n, k, r, e, v, sum, avg;
            n=(document.getElementById('aname').value);
            k=parseFloat(document.getElementById('am').value);
            r=parseFloat(document.getElementById('aj').value);
            e=parseFloat(document.getElementById('ad').value);
            v=parseFloat(document.getElementById('an').value);
            // Calculating Total
            sum=k+r+e+v;
            avg=sum/4;
            // Display on Student Data
            let newTable = document.getElementById('TableScore');
            let row = newTable.insertRow(-1);
            let cell1 = row.insertCell(0);
            let cell2 = row.insertCell(0);
            let cell3 = row.insertCell(0);
            let cell4 = row.insertCell(0);

            cell4.innerHTML= n;
            cell3.innerHTML=sum;
            cell2.innerHTML = avg;

            if(avg>=70){
                cell1.innerHTML="<font color=green>Pass</font>";
            }else{
                cell1.innerHTML="<font color=red>Fail</font>";
            }
        }
    </script>
</body>
</html>

Output:

How to create a dynamic report card using HTML, CSS and JavaScript ?

S

sounetraghosal2000

Improve

Article Tags :

Similar Reads

How to create A Dynamic Calendar in HTML CSS & JavaScript?

In this article, we will see how we can create A Dynamic Calendar with the help of HTML, CSS & JavaScript. We will be designing and implementing a straightforward yet effective dynamic calendar, offering seamless month navigation and quick access to the current month. With a visually appealing d

How to create a Color Generator using HTML CSS and JavaScript ?

In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color

Dynamic Resume Creator using HTML CSS and JavaScript

Creating a well-structured and professional resume can be time-consuming and difficult for many job seekers. Challenges like formatting, organizing details, and making the resume stand out are common. To solve this issue, a Resume Creator project was developed to simplify the process by offering an

How to Create a Portfolio Website using HTML CSS and JavaScript ?

A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that

Create a Responsive Admin Dashboard using HTML CSS and JavaScript

An Admin Panel typically has several sections that enable the administrator to manage and control various activities on a website. The layout usually consists of a header and a sidebarnavigation bar, which allows the admin to easily navigate between the various sections of the panel. In the header,