Skip to content

Commit b7a44f1

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

1 file changed

Lines changed: 206 additions & 0 deletions

File tree

‎Task/student Market assignment.md‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
JavaScript Project Assignment: Student Marksheet
2+
3+
Objective:
4+
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.
6+
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
19+
• Total Marks
20+
• 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.

0 commit comments

Comments
 (0)