JavaScript Exercise: Student Grade System

📌 What You Are Building

You will build a simple application where a user enters student details and the system calculates grades automatically.

The app should:

Take student name and marks as input
Create student objects
Calculate grades using conditions
Store multiple students
Display results
Use classes, objects, inheritance, and static methods

🧱 Step 1: HTML Structure

Create input fields, a button, and output area


<input id="name" placeholder="Enter name">
<input id="marks" placeholder="Enter marks">
<button onclick="addStudent()">Add Student</button>
<div id="output"></div>

📦 Step 2: Variables

Store user input values


let name = document.getElementById("name").value;
let marks = document.getElementById("marks").value;

🏗 Step 3: Class

Create a Student class


class Student {
  constructor(name, marks) {
    this.name = name;
    this.marks = marks;
  }
}

⚙️ Step 4: Method

Add a method to calculate grade


getGrade() {
  if (this.marks >= 80) return "A";
  else if (this.marks >= 60) return "B";
  else if (this.marks >= 40) return "C";
  else return "Fail";
}

📚 Step 5: Array

Store multiple students


let students = [];

🔘 Step 6: Function

Add student to array


function addStudent() {
  let name = document.getElementById("name").value;
  let marks = Number(document.getElementById("marks").value);let student = new Student(name, marks); students.push(student);

displayStudents(); }

🔁 Step 7: Loop

Loop through students


for (let i = 0; i < students.length; i++) {
  console.log(students[i]);
}

🧩 Step 8: Objects

Create objects from class


let s1 = new Student("Ali", 75);
let s2 = new Student("Sara", 85);
students.push(s1);
students.push(s2);

🧬 Step 9: Inheritance

Create a child class using extends


class GraduateStudent extends Student {
  constructor(name, marks, thesisTitle) {
    super(name, marks);
    this.thesisTitle = thesisTitle;
  }
}

⚡ Step 10: Static

Add static method to track students


class Student {
  static count = 0;constructor(name, marks) { this.name = name; this.marks = marks; Student.count++; }

static getCount() { return Student.count; } }

🖥 Step 11: Display Output

Show results on screen


document.getElementById("output").innerHTML +=
  student.name + " got " + student.getGrade();

🎯 Final Complete Code (Reference Solution)

This is the full working example. Use it to compare with your own work after trying.


class Student {
  static count = 0;constructor(name, marks) { this.name = name; this.marks = marks; Student.count++; }

getGrade() { if (this.marks >= 80) return "A"; else if (this.marks >= 60) return "B"; else if (this.marks >= 40) return "C"; else return "Fail"; }

static getCount() { return Student.count; } }

class GraduateStudent extends Student { constructor(name, marks, thesisTitle) { super(name, marks); this.thesisTitle = thesisTitle; } }

let students = [];

function addStudent() { let name = document.getElementById("name").value; let marks = Number(document.getElementById("marks").value);

let student = new Student(name, marks); students.push(student);

displayStudents(); }

function displayStudents() { let output = document.getElementById("output"); output.innerHTML = "";

for (let i = 0; i < students.length; i++) { let s = students[i]; output.innerHTML += s.name + " got grade " + s.getGrade() + "
"; }

output.innerHTML += "
Total Students: " + Student.getCount(); }

🧠 JavaScript Exercise

Build Your Own Student Grade System