javascript switch case sample 3 Determine if grade is qualified for Scholarship
<!DOCTYPE html>
<html>
<head>
<title>Form Elements and Conditional Statements </title>
<style> //format and styles
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 200px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
p{
display: inline-block;
width: 1000px;
}
</style>
</head>
<body>
<h1>Determine Scholarship Grants </h1>
<p>Enter your details : </p>
<fieldset>
<label>Enter your name </label>
<input type="text" onfocus="this.value=''" name="fname" id="fname" value="" /> <br> <!-- create input text box for name -->
<label>Enter your average grade </label>
<input type="number" onfocus="this.value=''" name="grade" id="grade" value="" /> <br> <!-- create input text box for grade -->
<input type=button onclick="display()" name="display" id="display" value="display"> </button> <!--button will call display function in javascript -->
</fieldset>
<p id="demo"></p> <!--paragraph where name and grade will display -->
<p id="demo2"></p> <!--paragraph where remarks will display -->
<script> //the script can be placed at the head or body
function display()
{
fname=document.getElementById("fname").value; //get the input name in the textbox fname
grade=document.getElementById("grade").value; //get the input grade in the textbox age
switch(Number(grade))
{
case 1.0:
{
remarks = "<font color=blue> <u><emp> Congratulations you are qualifed for 100% Scholarship" +grade;
break;
}
case 1.25: //if age is 12 and below children group
document.write("Very Good!");
remarks = "<font color=orange> <u><emp> Congratulations you are qualifed for 75% Scholarship" +grade;
break;
case 1.5: //if age is 12 and below children group
remarks = "<font color=green> <u><emp> Congratulations you are qualifed for 50% Scholarship" ;
break;
case 1.75: //if age is 12 and below children group
remarks = "<font color=violet> <u><emp> Congratulations you are qualifed for 25% Scholarship" ;
break;
default :
remarks = " <font color=red> <i> Sorry you are not qualified for Scholarship" ;
}
document.write( "<style= color:'blue'; > " +"Name" + fname +"<br> Grade " +grade +" Remarks " +remarks);
}
</script>
</body>
</html>
=========================================
Comments
Post a Comment