JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Don't use unnecessary tags and definitely don't use shit like <div id="header"> when you can use sematic tags like <header>. -->
<h1>Program 6 - Grading challenge - anon</h1>

<form id="myForm">

  <fieldset class="form-grid">
    <legend>Data Entry</legend>
    <label for="fNameBox">First name:</label><!-- Labels are for blind people and they allow you to click the text to focus the name box. -->
    <input id="fNameBox" type="text" required autofocus><!-- Required means the browser will validate if you filled something in there before it fires the onSubmit event. -->
    <label for="scoreBox">Score:</label>
    <input id="scoreBox" type="number" min="0" max="100" step="1" required title="Your score from 0 to 100"><!-- The browser will validate if the value is a number and is beteen 0 and 100. -->
  </fieldset>

  <fieldset>
    <legend>Form Actions</legend>
    <input type="reset"><!-- These buttons don't need an id because the form itself has an onReset and onSubmit event. -->
    <input type="submit" value="Generate report"><!-- Submit is also triggered when you hit return on one of the inputs. -->
  </fieldset>

  <fieldset>
    <legend>Data Output</legend>
    <output id="output"></output>
  </fieldset>

</form>

CSS

/* Tables are cancer, absolute sizes are cancer, grids are GOAT. */
.form-grid {
  display: grid;

  /* First column as wide as reasonable, second column grows indefinitely. */
  grid-template-columns: auto 1fr;
  align-items: center;
}

/* If your browser is shit, the CSS grid won't work or won't work properly, so display the labels on their own line as a fallback. */
.form-grid label {
  display: block;
}

JavaScript

// Separate the calculations from DOM manipulation.
function getReport(name, score) {
  let result;

  if (score >= 90) {
    result = "you currently have an A. Great work!";
  } else if (score >= 80 && score <= 89) {
    result = "you have a B, which is above average. Good job!";
  } else if (score >= 70 && score <= 79) {
    result = "you have a C, which is average. You could be doing better but at least you're passing.";
  } else if (score >= 60 && score <= 69) {
    result = "you have a D, which is below average and is failing. You need to improve your grade.";
  } else if (score >= 0 && score <= 59) {
    result = "you have a F, which is failing. You need to improve your grade or you will fail this course.";
  }

  return name + ', ' + result;
}

function changeText(event) {
  // The default action on a submit event is to send the form to the server, which in this case would reload the page. Don't.
  event.preventDefault();

  const firstName = document.getElementById("fNameBox").value;
  const score = parseInt(document.getElementById("scoreBox").value);

  document.getElementById("output").textContent = getReport(firstName, score);
}

// The default behaviour of a reset button is to reset all input fields, so only the output field has to be reset manually.
function clearText(event) {
  document.getElementById("output").textContent = "";
}

// Keep the HTML clean and instead attach events using javascript.
// DOMContentLoaded is run when the HTML has been loaded and parsed. You can safely use document.getElementById in here even if your script is in the <head>.
document.addEventListener("DOMContentLoaded", function(event) {
  const form = document.getElementById("myForm");
  form.addEventListener('submit', changeText);
  form.addEventListener('reset', clearText);
})