I need help with my JavaScript, when the user clicks the button i want to prompt the user to enter a score (0-100) then return a grade based on that score (e.g- 100-80=A, 79-60=B ... <30=F) By the way please explain how and why each step is done because i'm quite dumb, thanks.
<!DOCTYPE html>
<html>
<head>
<title>Marks to Grade Conversion</title>
<style>
h1 {font-family:serif; font-size:36px; color:#ff0000; text-align:center}
h2 {font-family:sans-serif; font-size:24px; color:#000000; text-align:center}
body {background-color:#FFCC00}
</style>
</head>
<body>
<h2>Faculty of Computer science</h2><br>
<h1>End of year module test results Mark to Grade utility</h1><br><br>
<h2>Click the button to enter the Mark and display the Grade</h2><br>
<h2><button style="font-size:24px; height:50px; width:300px"; onClick="ConvertMark()"> Click to enter the mark </button></h2><br>
<h1 id="display grade here"></h1></b></td>
pretty basic. write your function, get input, convert, display result
function ConvertMark(){
let display = document.getElementById('display')
let grade = prompt("Enter grade: ")
let alpha = "";
if (grade >= 90)alpha = 'A'
else if(grade >= 80)alpha = 'B'
else if(grade >= 70)alpha = 'C'
else if(grade >=60)alpha = 'D'
else alpha = 'F'
display.innerHTML = alpha
}h1 {font-family:serif; font-size:36px; color:#ff0000; text-align:center}
h2 {font-family:sans-serif; font-size:24px; color:#000000; text-align:center}
body {background-color:#FFCC00}
<h2>Faculty of Computer science</h2><br>
<h1>End of year module test results Mark to Grade utility</h1><br><br>
<h2>Click the button to enter the Mark and display the Grade</h2><br>
<h2><button style="font-size:24px; height:50px; width:300px"; onClick="ConvertMark()"> Click to enter the mark </button></h2><br>
<h1 id="display"></h1>