If else Condition Scholarship
Date: Mar. 6, 2021
Below is the code used for the third exercise in our Interactive Media Design course subject. I followed the instructions from the previous presentation and added the modifications required for this exercise.
Below is the code used for the third exercise in our Interactive Media Design course subject. I followed the instructions from the previous presentation and added the modifications required for this exercise.
<!DOCTYPE html>
<html>
<head>
<title>if else Scholarship</title>
<style>
h1 {
margin-left: 280px;
font-family: "Times New Roman";
}
p {
margin-left: 285px;
font-family: "Times New Roman";
}
div {
margin-bottom: 10 px;
}
label {
display: inline-block;
width: 120px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "Times New Roman";
}
form {
margin-left: 280px;
margin-right: 280px;
background: #94e4ff;
padding: 5px;
font-family: "Times New Roman";
</style>
</head>
<body>
<h1>Scholarship</h1>
<p> Please type in your grade below: </p>
<form>
<label for="name">Name: </label>
<input type="text" placeholder="Enter your Name" onfocus="this.placeholder=''" name="Name" id="name" required><br>
<label for="number">Grade: </label>
<input type="number" placeholder="Enter your Grade" onfocus="this.placeholder=''" name="Grade" id="number" required><br><br>
<input style="margin-left: 174px;" type="submit" onclick="submit_function()" value="Submit"> <br><br>
<input style="margin-left: 174px;" type="reset" onclick="reset_function()" value="Reset"> <br><br>
</form>
<script>
<!--
function submit_function(){
var str = document.getElementById("name").value;
var number = document.getElementById("number").value;
//
if (number >= 99)
{
document.write('<br> <u> <h1 style="text-align: center;">Congratulations! You are qualified for 100% Scholarship.</h1> </u>');
} else if (number < 99)
{
document.write('<br> <i> <h1 style="text-align: center;">Sorry... you are not qualified for 100% Scholarship.</h1> </i>');
}
}
function reset_funtion() {
document.getElementById("name").reset();
document.getElementById("number").reset();
}
//-->
</script>
</body>
</html>
<html>
<head>
<title>if else Scholarship</title>
<style>
h1 {
margin-left: 280px;
font-family: "Times New Roman";
}
p {
margin-left: 285px;
font-family: "Times New Roman";
}
div {
margin-bottom: 10 px;
}
label {
display: inline-block;
width: 120px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "Times New Roman";
}
form {
margin-left: 280px;
margin-right: 280px;
background: #94e4ff;
padding: 5px;
font-family: "Times New Roman";
</style>
</head>
<body>
<h1>Scholarship</h1>
<p> Please type in your grade below: </p>
<form>
<label for="name">Name: </label>
<input type="text" placeholder="Enter your Name" onfocus="this.placeholder=''" name="Name" id="name" required><br>
<label for="number">Grade: </label>
<input type="number" placeholder="Enter your Grade" onfocus="this.placeholder=''" name="Grade" id="number" required><br><br>
<input style="margin-left: 174px;" type="submit" onclick="submit_function()" value="Submit"> <br><br>
<input style="margin-left: 174px;" type="reset" onclick="reset_function()" value="Reset"> <br><br>
</form>
<script>
<!--
function submit_function(){
var str = document.getElementById("name").value;
var number = document.getElementById("number").value;
//
if (number >= 99)
{
document.write('<br> <u> <h1 style="text-align: center;">Congratulations! You are qualified for 100% Scholarship.</h1> </u>');
} else if (number < 99)
{
document.write('<br> <i> <h1 style="text-align: center;">Sorry... you are not qualified for 100% Scholarship.</h1> </i>');
}
}
function reset_funtion() {
document.getElementById("name").reset();
document.getElementById("number").reset();
}
//-->
</script>
</body>
</html>
And here are screenshots of the final output shown below after pasting the code on Google:
Here is an output of the code presented above:
Here is an output displaying the if condition number >= 99 after being submitted:
Here is an output displaying the if condition number < 99 after being submitted:
Here is an output when you click reset: