Marks and Percentage Calculator

A responsive and user-friendly web application designed to help students calculate their total marks and percentage across multiple subjects, and generate a grade based on the percentage, offering a seamless experience for students to track their academic performance.

🌟 Features

• Dynamic Subject Input: Easily add or remove subject fields to accommodate various academic structures.
• Real-time Calculation: Instant computation of total marks, percentage and grade.
• Grade Assignment: Automatic grade allocation based on percentage, along with encouraging remarks.
• Dynamic Results: Results are displayed in real-time with animation, including marks, percentage, and grade.
• Responsive Design: Used CSS Flexbox and Grid, to make it fully optimized for various screen sizes and devices.
• Input Validation & Error Handling: Ensures valid marks entry within the 0-100 range.
• Interactive UI: Smooth animations and transitions for better user experience.

🧰 Technologies Used

• HTML5: For structuring the core layout and content.
• CSS3 (Tailwind CSS): For styling and layout with utility-first CSS framework, including Flexbox and Grid for responsive and visually appealing design
• JavaScript (ES6+): For handling the dynamic calculations, form validation, interactive elements, and result presentation.
• Font Awesome Icons: For adding icons to the elements.

💡 What I Learned

• Implemented dynamic input fields and validations.
• Mastered using JavaScript to dynamically update and calculate data from multiple inputs.
• Improved understanding of Tailwind CSS for responsive and flexible layouts.
• Enhanced JavaScript skills for handling form submissions and real-time calculations.

🚀 Live Demo

Check out the live demo: Marks and Percentage Calculator

📸 Screenshots

🛠️ Installation

To run this project locally:

1. Clone the repository:

git clone https://github.com/VinayNoogler000/Marks-Percentage-Calculator.git

2. Navigate to the project directory:

cd Marks-Percentage-Calculator

3. Open index.html in your browser.

💡 Usage

1. Enter marks for each subject, ranging (0-100).
2. Click "Calculate" to see the result (total marks, percentage, and grade).
3. Use "Add Subject" to include more subjects.
4. Use "Delete Icon" to delete subjects.
5. "Reset" clears all inputs and results.

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. If you would like to improve the functionality, design, or add new features, feel free to:

1. Fork the Project.
2. Create your Feature Branch (git checkout -b feature/AmazingFeature).
3. Commit your Changes (git commit -m 'Add some AmazingFeature').
4. Push to the Branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

🐛 Bug Reporting

Found a bug? Please open an issue with a clear description and steps to reproduce. Your input helps make this project better for everyone!

🙏 Acknowledgments

• Tailwind CSS for the utility-first CSS framework.
• Font Awesome for the icons used in the project.

📝 License

Distributed under the MIT License. See LICENSE for more information.

👨‍💻 Developer & Owner

Vinay Tambey

• Email: Send Email to Vinay
• LinkedIn: Vinay Tambey
• GitHub: @VinayNoogler000
• Twitter/X: @VinayNoogler000

Let's connect and collaborate! I'm always open to new opportunities in frontend web development.

📊 Project Status

This project is, currently, not in development by the Owner, but we're always looking to add new features and improvements!

Hashtags

#webdevelopment #javascript #html #css #tailwindcss #frontend #studenttools #education #calculator #opensource

⭐️ If you found this project helpful, please consider giving it a star!