Skip to content

Commit 937a72b

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

1 file changed

Lines changed: 65 additions & 201 deletions

File tree

‎Task/student Market assignment.md‎

Lines changed: 65 additions & 201 deletions
Original file line numberDiff line numberDiff line change
@@ -1,206 +1,70 @@
1-
JavaScript Project Assignment: Student Marksheet
21

3-
Objective:
2+
Student Marksheet Project
43

5-
Create a Student Marksheet application using HTML, CSS, and JavaScript. The application should allow users to input student details, calculate total marks, percentage, and grade, and display the information in a tabular format.
4+
Description
65

7-
Requirements:
8-
1. HTML Form:
9-
• Inputs for student details:
10-
• Student Name
11-
• Roll Number
12-
• Marks in three subjects (e.g., Math, Science, English)
13-
• A submit button to calculate and display results.
14-
2. Table for Results:
15-
• Display:
16-
• Name
17-
• Roll Number
18-
• Marks for each subject
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+
8+
Features
9+
• Input student details: Name, Roll Number, and Marks for three subjects.
10+
• Calculate:
1911
• Total Marks
2012
• Percentage
21-
• Grade
22-
3. JavaScript Functionality:
23-
• Calculate Total Marks, Percentage, and Grade:
24-
• Grade rules:
25-
• 90% and above: A+
26-
• 80-89%: A
27-
• 70-79%: B
28-
• 60-69%: C
29-
• Below 60%: Fail
30-
• Validate inputs (e.g., no empty fields, marks should be numbers between 0 and 100).
31-
• Update the table dynamically with the calculated results.
32-
4. Styling (Optional):
33-
• Use CSS to make the form and table visually appealing.
34-
35-
Expected Output:
36-
37-
A functional web page where users can enter student details, view their calculated results, and see a list of all students added so far.
38-
39-
Code Template:
40-
41-
HTML:
42-
43-
<!DOCTYPE html>
44-
<html lang="en">
45-
<head>
46-
<meta charset="UTF-8">
47-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
48-
<title>Student Marksheet</title>
49-
<link rel="stylesheet" href="styles.css">
50-
</head>
51-
<body>
52-
<h1>Student Marksheet</h1>
53-
<form id="marksheetForm">
54-
<label for="name">Student Name:</label>
55-
<input type="text" id="name" required>
56-
57-
<label for="roll">Roll Number:</label>
58-
<input type="text" id="roll" required>
59-
60-
<label for="math">Math Marks:</label>
61-
<input type="number" id="math" min="0" max="100" required>
62-
63-
<label for="science">Science Marks:</label>
64-
<input type="number" id="science" min="0" max="100" required>
65-
66-
<label for="english">English Marks:</label>
67-
<input type="number" id="english" min="0" max="100" required>
68-
69-
<button type="submit">Add to Marksheet</button>
70-
</form>
71-
72-
<h2>Results</h2>
73-
<table id="resultsTable" border="1">
74-
<thead>
75-
<tr>
76-
<th>Name</th>
77-
<th>Roll Number</th>
78-
<th>Math</th>
79-
<th>Science</th>
80-
<th>English</th>
81-
<th>Total</th>
82-
<th>Percentage</th>
83-
<th>Grade</th>
84-
</tr>
85-
</thead>
86-
<tbody>
87-
<!-- Results will be dynamically added here -->
88-
</tbody>
89-
</table>
90-
91-
<script src="script.js"></script>
92-
</body>
93-
</html>
94-
95-
CSS:
96-
97-
body {
98-
font-family: Arial, sans-serif;
99-
margin: 20px;
100-
padding: 0;
101-
background-color: #f9f9f9;
102-
}
103-
104-
h1, h2 {
105-
text-align: center;
106-
}
107-
108-
form {
109-
display: flex;
110-
flex-direction: column;
111-
max-width: 400px;
112-
margin: 0 auto;
113-
gap: 10px;
114-
}
115-
116-
label {
117-
font-weight: bold;
118-
}
119-
120-
input {
121-
padding: 8px;
122-
font-size: 16px;
123-
}
124-
125-
button {
126-
padding: 10px;
127-
font-size: 16px;
128-
background-color: #007BFF;
129-
color: white;
130-
border: none;
131-
cursor: pointer;
132-
}
133-
134-
button:hover {
135-
background-color: #0056b3;
136-
}
137-
138-
table {
139-
width: 100%;
140-
margin-top: 20px;
141-
border-collapse: collapse;
142-
text-align: center;
143-
}
144-
145-
th, td {
146-
padding: 10px;
147-
border: 1px solid #ddd;
148-
}
149-
150-
th {
151-
background-color: #007BFF;
152-
color: white;
153-
}
154-
155-
JavaScript:
156-
157-
document.getElementById("marksheetForm").addEventListener("submit", function (e) {
158-
e.preventDefault();
159-
160-
// Get form values
161-
const name = document.getElementById("name").value;
162-
const roll = document.getElementById("roll").value;
163-
const math = parseInt(document.getElementById("math").value);
164-
const science = parseInt(document.getElementById("science").value);
165-
const english = parseInt(document.getElementById("english").value);
166-
167-
// Validate inputs
168-
if (isNaN(math) || isNaN(science) || isNaN(english) || math < 0 || science < 0 || english < 0) {
169-
alert("Please enter valid marks between 0 and 100.");
170-
return;
171-
}
172-
173-
// Calculate total, percentage, and grade
174-
const total = math + science + english;
175-
const percentage = (total / 300) * 100;
176-
let grade = "";
177-
178-
if (percentage >= 90) grade = "A+";
179-
else if (percentage >= 80) grade = "A";
180-
else if (percentage >= 70) grade = "B";
181-
else if (percentage >= 60) grade = "C";
182-
else grade = "Fail";
183-
184-
// Add row to the table
185-
const table = document.getElementById("resultsTable").getElementsByTagName("tbody")[0];
186-
const newRow = table.insertRow();
187-
188-
newRow.innerHTML = `
189-
<td>${name}</td>
190-
<td>${roll}</td>
191-
<td>${math}</td>
192-
<td>${science}</td>
193-
<td>${english}</td>
194-
<td>${total}</td>
195-
<td>${percentage.toFixed(2)}%</td>
196-
<td>${grade}</td>
197-
`;
198-
199-
// Clear form inputs
200-
document.getElementById("marksheetForm").reset();
201-
});
202-
203-
Enhancements (Optional):
204-
• Add sorting functionality for the table.
205-
• Allow deletion or editing of rows.
206-
• Store results in local storage to persist data across page reloads.
13+
• Grade (based on percentage).
14+
• Dynamically display results in a table.
15+
• Form validation for proper input values.
16+
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.
21+
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
34+
• 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+
42+
Grading Criteria
43+
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.

0 commit comments

Comments
 (0)