Marksheet Generator Website Project
I created this website project for Web Development Bootcamp hosted by TECVERSE
Features
- 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)
- The marksheet contains
- Name
- Roll Number
- Total Obtained Marks
- Percentage
- Overall Grade
- Remarks
- Table of the given marks and their individual grades
- On opening the site the marksheet isn't visible and would appear only when the user presses "Generate Marsheet" button.
- If the user enters the data correctly and the marksheet is generated the website will automatically scroll down to the newly generated marksheet.
- Passing Remarks would be shown in green color and failing remarks in red color.
- 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
- Clicking on Marksheet Generator or Marksheet banner will reload the page.
- The failed subjects grade will be in red color.
- The website will now resize all the contents on screens smaller than 600px.
- 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.
- Now any text is acceptable as roll number.
About Dev
I'm just a learning developer you can connect with me on Instagram, Linkedin and Github.