CGPA calculator by HTML, CSS, JS

Lear how to create a front-end design of CGPA calculator

CGPA calculator by HTML, CSS, JS

Basically, CGPA is the percentage of individual semesters divided by the total number of semesters. So, this is a frontend-based project using HTML, CSS, and JavaScript.

STRUCTURE:
HTML: It’s a simple HTML structure made by giving 8 input boxes defined as numbers, which are basically the SGPA of each semester. After entering all the inputs, we create a button that calculates the CGPA and shows it in the <h2> tag format.
CSS: The project has simple CSS styling that anyone can access. First, styling is given to the body, input boxes, form container, and lastly, the button.
JavaScript: This is the logic part of the CGPA calculator. Here, it takes values from the user, calculates, and checks them. I use a for loop to take all the user inputs and then convert the string values into floats. After converting, it checks if it's a valid number. Then it adds the SGPA numbers and stores them in a variable. Here's a line of JavaScript:
const cgpa = count > 0 ? (sum / count).toFixed(2) : 0;
This means it will round to two decimal places (max = 10).

DESIGN:
The whole background color is aqua. The background of the form container is rgb(21, 51, 51). The container color is white, and the inner text corresponds to each semester number. The button color is green, and the inner text is also green. When you click on the "Calculate" button, the CGPA score will pop up under the button but within the form container.

If you want to know the simple logic of the CGPA calculator, you can go to this link:
Blog link ---->https://cgpa-calculator-by-c.hashnode.dev/cgpa-calculator-by-c
GitHub code ---->https://github.com/Tanaygit646/cgpa-calculator-frontend