Skip to content

Commit 43fd671

Browse files
Pankaj-StrPankaj-Str
authored
Update student Market assignment.md
1 parent 937a72b commit 43fd671

1 file changed

Lines changed: 111 additions & 58 deletions

File tree

‎Task/student Market assignment.md‎

Lines changed: 111 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,123 @@
1+
##Assignment: Advanced Student Marksheet Application
12

2-
Student Marksheet Project
3+
Objective
34

4-
Description
5+
Develop an advanced Student Marksheet Application using HTML, CSS, and JavaScript with extended features for data management and interactivity.
56

6-
This project is a simple web-based application for managing student marksheets. It allows users to input student details, calculate total marks, percentage, and grade, and display the results in a tabular format. The project is built using HTML, CSS, and JavaScript.
7+
Problem Statement
78

8-
Features
9-
• Input student details: Name, Roll Number, and Marks for three subjects.
10-
• Calculate:
9+
Design a feature-rich application that allows users to:
10+
1. Input student details (Name, Roll Number, and Marks in three subjects).
11+
2. Perform advanced calculations:
1112
• Total Marks
1213
• Percentage
13-
• Grade (based on percentage).
14-
• Dynamically display results in a table.
15-
• Form validation for proper input values.
14+
• Grade (based on a customizable grading scale).
15+
3. Manage data through dynamic functionalities:
16+
• Add, edit, and delete student records.
17+
• Sort student records by Name, Roll Number, or Percentage.
18+
• Filter records based on grades or a specific percentage range.
1619

17-
Technologies Used
18-
• HTML: For the structure of the application.
19-
• CSS: For styling the form and table.
20-
• JavaScript: For calculations and dynamic content management.
20+
Functional Requirements
2121

22-
Setup and Usage
23-
1. Clone or download the project:
24-
25-
git clone https://github.com/your-username/student-marksheet.git
26-
cd student-marksheet
27-
28-
29-
2. Open the project directory and launch the index.html file in any modern browser.
30-
31-
How It Works
32-
1. Fill out the form with student details:
33-
• Name
22+
Core Features
23+
1. Input Fields:
24+
• Student Name
25+
• Roll Number
26+
• Marks in three subjects (e.g., Math, Science, and English).
27+
2. Dynamic Calculations:
28+
• Total Marks: Sum of marks in the three subjects.
29+
• Percentage: (Total Marks / Maximum Marks) * 100.
30+
• Grade:
31+
• Implement a customizable grading system (e.g., A+, A, B, C, Fail).
32+
• Allow users to adjust grade thresholds (e.g., 90%+ = A+).
33+
3. Data Management:
34+
• Add new records dynamically to a table.
35+
• Edit existing records (e.g., update marks or student details).
36+
• Delete specific records.
37+
4. Table Interactivity:
38+
• Sort records dynamically based on:
39+
• Student Name (Alphabetically)
3440
• Roll Number
35-
• Marks for Math, Science, and English (0-100).
36-
2. Click the “Add to Marksheet” button.
37-
3. The application will:
38-
• Calculate the total marks and percentage.
39-
• Assign a grade based on the percentage.
40-
• Display the results in the table below the form.
41+
• Percentage (Highest to Lowest).
42+
• Filter records by:
43+
• Grade (e.g., Show only A+ students).
44+
• Percentage range (e.g., 70%-90%).
45+
46+
Advanced Features
47+
1. Search Functionality:
48+
• Enable users to search for specific students by Name or Roll Number.
49+
2. Data Persistence:
50+
• Save the student data in Local Storage so it persists across browser sessions.
51+
3. Bulk Upload:
52+
• Allow users to upload student data in bulk using a CSV file.
53+
• Validate and parse the data to add it to the table dynamically.
54+
4. Export Functionality:
55+
• Provide an option to export the student records as a CSV file.
56+
5. Responsive Design:
57+
• Ensure the application is fully responsive and works seamlessly across different screen sizes.
58+
59+
Technical Requirements
60+
61+
HTML
62+
• Create a structured form for student input.
63+
• Design a table to display the results with sortable and filterable columns.
64+
65+
CSS
66+
• Use advanced CSS features for a polished UI:
67+
• Hover effects for table rows.
68+
• Responsive layout with media queries.
69+
• Styled buttons and modals for editing records.
70+
71+
JavaScript
72+
• Use JavaScript to:
73+
• Perform calculations (Total, Percentage, Grade).
74+
• Manage data (Add, Edit, Delete, Sort, Filter).
75+
• Implement Local Storage for data persistence.
76+
• Handle file uploads and exports.
77+
78+
Assignment Deliverables
79+
1. A fully functional Student Marksheet Application with:
80+
• Add, edit, delete, sort, and filter functionalities.
81+
• Local Storage implementation.
82+
• CSV upload and export features.
83+
2. Code Structure:
84+
• Organize the code into separate files:
85+
• index.html: For the structure.
86+
• styles.css: For styling.
87+
• script.js: For JavaScript logic.
88+
3. Code Documentation:
89+
• Include comments in your code to explain the logic and functionality.
4190

4291
Grading Criteria
4392

44-
Percentage Range Grade
45-
90% and above A+
46-
80% - 89% A
47-
70% - 79% B
48-
60% - 69% C
49-
Below 60% Fail
50-
51-
Project Structure
52-
53-
student-marksheet/
54-
├── index.html # Main HTML file
55-
├── styles.css # Styling file
56-
├── script.js # JavaScript for functionality
57-
└── README.md # Project documentation
58-
59-
Future Enhancements
60-
• Add a feature to edit or delete student records.
61-
• Store data in local storage to persist information across sessions.
62-
• Add sorting and filtering options for the results table.
63-
64-
Contributing
65-
66-
Contributions are welcome! If you have suggestions or want to report issues, feel free to open an issue or submit a pull request.
67-
68-
License
69-
70-
This project is licensed under the MIT License.
93+
Task Marks
94+
Proper HTML structure 10
95+
Advanced CSS styling 15
96+
JavaScript for dynamic calculations 15
97+
Add, Edit, Delete functionality 20
98+
Sort and Filter functionalities 20
99+
Local Storage for data persistence 10
100+
File Upload and Export 10
101+
102+
Example Scenarios
103+
1. Scenario 1:
104+
• Add a student named “John Doe” with Roll Number “101” and marks: Math = 85, Science = 78, English = 92.
105+
• The application calculates Total Marks = 255, Percentage = 85%, Grade = A.
106+
2. Scenario 2:
107+
• Edit John Doe’s Science marks to 88.
108+
• Total Marks and Percentage are recalculated dynamically.
109+
3. Scenario 3:
110+
• Filter the table to display only students with a grade of “A+”.
111+
4. Scenario 4:
112+
• Upload a CSV file with student data.
113+
• Validate the data, calculate results, and display them in the table.
114+
5. Scenario 5:
115+
• Export the current table records as a CSV file.
116+
117+
Advanced Challenges (Optional)
118+
1. Add a Graphical Representation:
119+
• Use a JavaScript chart library (e.g., Chart.js) to display a bar chart showing the distribution of grades.
120+
2. Add Authentication:
121+
• Implement a basic login system to secure the application.
122+
3. Add Dark Mode:
123+
• Provide a toggle option for dark mode.

0 commit comments

Comments
 (0)