JavaScript Conditional Statement
JavaScript Conditional Statement
Write a JavaScript program to get marks from user and generate proper grade as given image below.
<!DOCTYPE html>
<html>
<head>
<title>Activity</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
margin-top: 20px;
width: 60%;
height: 100%;
padding-bottom: 20px;
background-color: lightgray;
border: 3px solid gray;
border-radius: 10px;
}
table{
width: 100%;
height: 100%;
}
td,th{
width: 150px;
font-size: 30px;
border: 2px solid gray;
padding-left: 10px;
}
tr{
height: 50px;
background-color: white;
}
h1{
text-align: center;
font-weight: bold;
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<div class="container">
<h1>☘ ☘ Result Sheet ☘ ☘</h1>
<table>
<tr>
<td style="font-weight: bold; color: blue;">Student Name:</td>
<td id="demo1"></td>
</tr>
<tr>
<td style="font-weight: bold; color: blue;">Father Name:</td>
<td id="demo2"></td>
</tr>
<tr>
<td style="font-weight: bold; color: blue;">Roll No:</td>
<td id="demo3"></td>
</tr>
<tr>
<td style="font-weight: bold; color: blue;">Obtained Marks:</td>
<td id="demo4"></td>
</tr>
<tr>
<td style="font-weight: bold; color: blue;">Grade:</td>
<td id="demo5"></td>
</tr>
</table>
<script type="text/javascript">
var name = prompt("Enter Student Name:");
var fname = prompt("Enter Father Name:");
var rollno = prompt("Enter Roll No:");
var marks = prompt("Enter Your Marks");
if(marks>90){
document.getElementById("demo5").innerHTML = 'A+';
// alert('A+');
}
else if(marks<91 && marks>75){
document.getElementById("demo5").innerHTML = 'A';
// alert('A');
}
else if(marks<76 && marks>70){
document.getElementById("demo5").innerHTML = 'A-';
// alert('A-');
}
else if(marks<71 && marks>67){
document.getElementById("demo5").innerHTML = 'B+';
// alert('B+');
}
else if(marks<68 && marks>62){
document.getElementById("demo5").innerHTML = 'B';
// alert('B');
}
else if(marks<63 && marks>60){
document.getElementById("demo5").innerHTML = 'B-';
// alert('B-');
}
else if(marks<61 && marks>58){
document.getElementById("demo5").innerHTML = 'C+';
// alert('C+');
}
else if(marks<59 && marks>55){
document.getElementById("demo5").innerHTML = 'C';
// alert('C');
}
else if(marks<56 && marks>51){
document.getElementById("demo5").innerHTML = 'C-';
// alert('C-');
}
else if(marks<52 && marks>50){
document.getElementById("demo5").innerHTML = 'D';
// alert('D');
}
else if(marks<49) {
document.getElementById("demo5").innerHTML = 'F';
// alert('F');
}
document.getElementById("demo1").innerHTML = name;
document.getElementById("demo2").innerHTML = fname;
document.getElementById("demo3").innerHTML = rollno;
document.getElementById("demo4").innerHTML = marks;
</script>
</div>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment