JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<html>
	<head>
		<style>
			hr {
			background-color: black;
			margin: 2px auto;
			width: 100%;
			height: 2px;
			}
	
			.container{
			width: 500px;
			padding: 15px;
			background-color: 	#D3D3D3;
			box-shadow: 10px 10px 5px 0px #8c878c;
			}
			body {
				background-color: 	#EEE8AA;
			}
			form  { display: table; }
			p     { display: table-row;  }
			label { display: table-cell; }
			input { display: table-cell; }
		</style>
	</head>
	<body>
		<form name="gradecal">
			<div class="container">
				<p>
					<label for="a">First Name: </label>
					<input type="text" name="fname"/>
				</p>
				<p>
					<label for="a">Last Name: </label>
					<input type="text" name="lname"/>
				</p>
				<p>
					<label for="a">Grade #1: </label>
					<input type="text" name="grd1"/>
				</p>
				<p>
					<label for="a">Grade #2: </label>
					<input type="text" name="grd2"/>
				</p>
				<p>
					<label for="a">Grade #3: </label>
					<input type="text" name="grd3"/>
				</p>
				<p>
					<label for="a">Grade #4: </label>
					<input type="text" name="grd4"/>
				</p>
				<p>
					<label for="a">Grade #5: </label>
					<input type="text" name="grd5"/>
				</p>
				<p>
					<input type="button" value="Submit" onclick="getGrades();" />
				</p>
			</div>
		</form>
		<script>
			function getGrades(){
      debugger;
			// initialize variables
				var fname = 0, lname = 0, grade1 = 0, grade2 = 0, grade3 = 0, grade4 = 0, grade5 = 0, average = 0;
				
			// assigning varables to textbox value
				firnam = String(document.gradecal.fname.value);
				lasnam = String(document.gradecal.lname.value);
				grade1 = Number(document.gradecal.grd1.value);
				grade2 = Number(document.gradecal.grd2.value);
				grade3 = Number(document.gradecal.grd3.value);
				grade4 = Number(document.gradecal.grd4.value);
				grade5 = Number(document.gradecal.grd5.value);
			
			// Calculate average
				average = (grade1+ grade2+ grade3+ grade4+ grade5) / 5;
			// if else to determine what grade falls...

JavaScript

/*
function getGrades(){
      debugger;
			// initialize variables
				var fname = 0, lname = 0, grade1 = 0, grade2 = 0, grade3 = 0, grade4 = 0, grade5 = 0, average = 0;
				
			// assigning varables to textbox value
				firnam = String(document.gradecal.fname.value);
				lasnam = String(document.gradecal.lname.value);
				grade1 = Number(document.gradecal.grd1.value);
				grade2 = Number(document.gradecal.grd2.value);
				grade3 = Number(document.gradecal.grd3.value);
				grade4 = Number(document.gradecal.grd4.value);
				grade5 = Number(document.gradecal.grd5.value);
			
			// Calculate average
				average = (grade1+ grade2+ grade3+ grade4+ grade5) / 5;
			// if else to determine what grade falls into percentage wise
				var perc = 0;
				if (average >= 90 && average <=100){
					perc = "100-99.9 %";
					document.write(perc);
				}
				else if (average >= 80 && average <=89.9){
					perc = "80-89.9 %";
					document.write(perc);
				}
				else if (average >= 70 && average <=79.9){
					perc = "70-79.9 %";
					document.write(perc);
				}
				else if (average >= 60 && average <=69.9){
					perc = "60-69.9 %";
					document.write(perc);
				}
				else {
					perc = "59.9 % or less";
					document.write(perc);
				}
			// switch to determine the letter grade
				var letter = 0;
				switch (true){
					case (average >= 90 && average <= 100):
						letter = "A";
						document.write(letter);
						break;
					case (average >= 80 && average <= 89.9):
						letter = "B";
						document.write(letter);
						break;
					case (average >= 70 && average <= 79.9):
						letter = "C";
						document.write(letter);
						break;	
					case (average >= 60 && average <= 69.9):
						letter = "D";
						document.write(letter);
						break;
					default:
						letter = "F";
						document.write(letter);
						break;
				}
				
			// display when submit is clicked
				document.write('<p>First Name: ' + firnam.toUpperCase());
				document.write('<br>Last Name: ' +...