EXERCISE NUMBER 3
SCHOLARSHIP
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #CD5C5C;
}
legend {
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<p>Fulfill the details below:</p>
<fieldset>
<legend><b>SCHOLARSHIP APPLICATION RESULT</b></legend>
<div>
<label>ENTER YOUR NAME</label>
<input type="text" name="NAME:" id="fname" value=""/>
</div>
<div>
<label>ENTER YOUR COURSE:</label>
<select>
<option value="BMMA">BMMA</option>
<option value="AB COM">ABCOM</option>
<option value="FINE">FINE ARTS</option>
<option value="RADTECH">RADTECH</option>
</select>
</div>
<div>
<label>EMAIL</label>
<input type="email" name="EMAIL" value=""/>
</div>
<div>
<label>GRADE:</label>
<input type="number" name="GRADE:" id="grade" value=""/>
</div>
<button onclick="display()">display</button>
</fieldset>
<p id="demo"></p>
<p id="demo2"></p>
<script>
function display() {
var fname = document.getElementById("fname").value;
var grade = document.getElementById("grade").value;
var remarks = "";
document.getElementById("demo").innerHTML = "Name: " + fname + "<br>Grade: " + grade;
console.log(fname);
console.log(grade);
if (grade >= 90) {
console.log("100% scholar");
remarks = "<font-color=blue><u><emp>CONGRATULATIONS " + fname + " YOU ARE QUALIFIED FOR 100% SCHOLARSHIP!";
}
else if (grade >= 85 ) {
console.log("85% scholar");
remarks = "<font-color=green><u><emp>CONGRATULATIONS" + fname + " YOU ARE QUALIFIED FOR 80% SCHOLARSHIP!";
}
else if (grade >= 80) {
console.log("50% scholar");
remarks="<font-color=pink><u><emp>CONGRATULATIONS " + fname + " YOU ARE QUALIFIED FOR 50% SCHOLARSHIP!";
}
else
remarks = "<font-color=pink><u><emp>YOU FAILED " + fname + " I'M SORRY BUT YOU'RE NOT QUALIFIED!;"
document.getElementById("demo2").innerHTML= "REMARKS: "+ remarks ;
}
</script>
</body>
</html>
Comments
Post a Comment