Marksheet Generator Website Project

I created this website project for Web Development Bootcamp hosted by TECVERSE

Features

1. The website takes the following inputs and generates a marksheet

• Name
• Roll Number
• Obtained marks out of 100 for 5 subjects (i.e, Maths, Science, Urdu, English, Computer)

2. The marksheet contains

• Name
• Roll Number
• Total Obtained Marks
• Percentage
• Overall Grade
• Remarks
• Table of the given marks and their individual grades

3. On opening the site the marksheet isn't visible and would appear only when the user presses "Generate Marsheet" button.
4. If the user enters the data correctly and the marksheet is generated the website will automatically scroll down to the newly generated marksheet.
5. Passing Remarks would be shown in green color and failing remarks in red color.
6. A beautiful User Interface. (yes, i did used Bootstrap 5.3.0-alpha1 for UI too)

Validations or Limitations

The website validates that

• All fields are filled in the way as they should be (i.e Name in text, and rest should be in numbers only)
• The input numbers should not be less than 0 and greater th0n 100
• No field is left empty
• As this was a mini project i only added 5 subjects names, i wanted to name the user to define how many subjects he wants to calculate marksheet for, subjects names and max marks too but due to time limit i couldn't :(

Updates

1. Clicking on Marksheet Generator or Marksheet banner will reload the page.
2. The failed subjects grade will be in red color.
3. The website will now resize all the contents on screens smaller than 600px.
4. Background image is now fixed and covers the whole site without stretching, before it was repeating itself on y-axisthat created a no too pleasent looking joint above the marksheet banner.
5. Now any text is acceptable as roll number.

About Dev

I'm just a learning developer you can connect with me on Discord:@furqanhunand Github.