Gradebook App

The Project

Grade management application developed with JavaScript, which calculates class averages, assigns letter grades, and automatically determines student promotion or failure.

Source Code

script.js

function getAverage(scores) {
  let sum = 0;

  for (const score of scores) {
    sum += score;
  }

  return sum / scores.length;
}

function getGrade(score) {
  if (score === 100) {
    return "A++";
  } else if (score >= 90) {
    return "A";
  } else if (score >= 80) {
    return "B";
  } else if (score >= 70) {
    return "C";
  } else if (score >= 60) {
    return "D";
  } else {
    return "F";
  }
}

function hasPassingGrade(score) {
  return getGrade(score) !== "F";
}

function studentMsg(totalScores, studentScore) {

  let classAverage = getAverage(totalScores);
  let studentVote = getGrade(studentScore);
  let passed = hasPassingGrade(studentScore);
  
  if (passed) {
    return "Class average: " + classAverage + ". Your grade: " + studentVote + ". You passed the course.";

  }
  else {
    return "Class average: " + classAverage + ". Your grade: " + studentVote + ". You failed the course.";

  }

}
console.log(studentMsg([92, 88, 12, 77, 57, 100, 67, 38, 97, 89], 37));

The Practical Utility Revelation

In this short project I understood how useful JavaScript can be and how it can simplify life, in this case for a teacher who needs to understand the average and have immediate feedback on promotion or failure.

The UI Necessity Insight

I recognize how necessary a UI to accompany a tool like this actually is. A teacher can't start typing various grades into console.log - they need a dedicated, pleasant and immediately understandable UI.

As Steve Krug states in "Don't Make Me Think": the interface must be self-explanatory, without any necessary explanation of how it works. The interface must speak for itself.

What I Learned

Modular Functions:

• getAverage() - average calculation with for...of loop
• getGrade() - numerical score to letter grade conversion
• hasPassingGrade() - boolean check for promotion
• studentMsg() - compositive function that combines everything

Programming Patterns:

• Separation of concerns - each function has a specific task
• Code reusability - functions calling each other
• String concatenation for formatted output
• Multiple conditions with else if for classification

Reflection

This project solidified my understanding that JavaScript is powerful but needs an interface. The logic works perfectly, but without an intuitive UI it remains inaccessible to end users.

It was the first time I clearly saw the gap between functionality and usability, a gap that as a future UX Engineer I'll always have to keep in mind.

---

Next Project: Learn Basic JavaScript by Building a Role Playing Game
Finally we start integrating with HTML and CSS!