Untitled

<!DOCTYPE html>
<html>
<head>
<title>Mark Sheet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?
family=PT+Serif+Caption&family=Poppins:wght@100;200;300;400;500;600;700;800;900&displ
ay=swap');
body, html {
height:100%;
font-family 'Poppins', sans-serif;
font-size:17px;
margin:0px auto;
}
table {
width:100%;
border-collapse: collapse;
max-width:600px;
margin-bottom:30px!important;
margin-top:30px!important;
margin:0px auto;
}
table tr th {
font-weight:600;
}
table tr td, table tr th {
padding:7px 10px;
border: 1px solid #818181;
text-align:left;
width:300px;
font-size:14px;
font-weight:500;
}
input {
padding: 10px;
background:transparent;
height:20px;
width: 230px;
border: 1px solid #999999;
border-radius: 4px;
font-size:14px;
-outline:none;
}
mark {
font-size:26px;
font-weight:bold;
color:#FF5722;
}
p{
font-size:14px;
}
h1, h2, p {
padding:0px;
margin:0px;
text-align:center;
}
address {
font-size:13px;
text-align:center;
}
h1 {
margin-top:20px;
font-size:35px;
font-weight:800;
}
h2 {
margin-top:10px;
font-size:18px;
}
.fname {
font-family 'PT Serif Caption', serif;
border-bottom: 2px dotted black;
margin-bottom:10px;
}
.fname b{
border-bottom: 3px solid #f2f8eb;
padding-right:5px;
}
.student tr {
border: none;
padding: 5px 0px;
display: flex;
}
.student th, .student td{
border:none;
}
.student th{
width:80px;
padding-bottom: 0px;
}
.student td{
border-bottom: 2px dotted black;
padding:0px;
}
.student td span{
position: relative;
top: 6px;
}
.col-blue{font-size:16px;color:#2196F3;}
.col-green{font-size:16px;color:green;}
.col-red{ font-size:16px;color:red; }
</style>
</head>
<body>
<div style="max-width:550px;margin:0px auto;">
<h1>SRM university </h1>
<p>(Recognized By Yash Dhokiya <b>codiming.com</b>)</p>
<address>
Mumbai,Maharashtra
</address>
<h2>My Mark Sheet</h2>
<table class="student">
<tr><th>Name : </th><td colspan="3"><span>Yash Dhokiya</span></td></tr>
<tr><th>Class : </th><td><span>Semester i</span></td><th>Section : </
th><td><span>A</span></td></tr>
<tr><th>Roll No. : </th><td colspan="3"><span>101</span></td></tr>
</table>
<table class="table">
<tr>
<th>Subject</th>
<th>Marks</th>
<th>Grade</th>
</tr>
<tr>
<td>CS-01:problem Solving Methodology and Programming in C</td>
<td><input type="number" placeholder="Enter Marks..." class="marks"/></td>
<td class="grade"></td>
</tr>
<tr>
<td>CS-02: Networking & Internet Environment</td>
<td><input type="number" placeholder="Enter Marks..." class="marks"/></td>
<td class="grade"></td>
</tr>
<tr>
<td>CS-03: Computer Fundamentals and Emerging Technologies</td>
<td><input type="number" placeholder="Enter Marks..." class="marks"/></td>
<td class="grade"></td>
</tr>
<tr>
<td>CS-04: Practical Based on CS-01 & CS-02</td>
<td><input type="number" placeholder="Enter Marks..." class="marks"/></td>
<td class="grade"></td>
</tr>
<tr>
<td>CS-05: Critical Thinking and Problem Solving</td>
<td><input type="number" placeholder="Enter Marks..." class="marks"/></td>
<td class="grade"></td>
</tr>
<tr>
<td>CS-06: Mathematical and Statistical Foundation of Computer Science</td>
<td><input type="number" placeholder="Enter Marks..." class="marks"/></td>
<td class="grade"></td>
</tr>
</table>
<table>
<tr>
<td>Total Marks :</td>
<td id="totalmarks"></td>
</tr>
<tr>
<td>Perentage :</td>
<td id="percentage"></td>
</tr>
<tr>
<td>Final Grade :</td>
<td id="finalgrade"></td>
</tr>
</table>
</div>
<script>
document.addEventListener('keyup', function (event) {
var totalmarks
=
0;
var x
=
document.getElementsByClassName("marks");
for(var i
=
0; i<x.length; i++){
if(x[i].value!='') {
if(parseFloat(x[i].value)>90)
{
document.getElementsByClassName("grade")[i].innerHTML='<mark class="col-
green">Grade A</mark>';
}
else if(parseFloat(x[i].value)>80)
{
document.getElementsByClassName("grade")[i].innerHTML='<mark class="col-
blue">Grade B</mark>';
}
else if(parseFloat(x[i].value)>70)
{
document.getElementsByClassName("grade")[i].innerHTML='<mark class="col-
blue">Grade C</mark>';
}
else if(parseFloat(x[i].value)>60)
{
document.getElementsByClassName("grade")[i].innerHTML='<mark class="col-
blue">Grade D</mark>';
}
else if(parseFloat(x[i].value)>50)
{
document.getElementsByClassName("grade")[i].innerHTML='<mark class="col-
blue">Grade E</mark>';
}
else if(parseFloat(x[i].value)>40)
{
document.getElementsByClassName("grade")[i].innerHTML='<mark class="col-
blue">Grade F</mark>';
}
else
{
document.getElementsByClassName("grade")[i].innerHTML='<mark class="col-red">Fail</
mark>';
}
totalmarks += parseFloat(x[i].value);
}
}
document.getElementById('totalmarks').innerHTML='<mark>'+totalmarks +' / 500</mark>';
var percentage
=
parseFloat(totalmarks)/5;
document.getElementById('percentage').innerHTML='<mark>'+percentage +' %</mark>';
if(parseFloat(percentage)>90)
{
document.getElementById("finalgrade").innerHTML='<mark class="col-green">Grade A</
mark>';
}
else if(parseFloat(percentage)>80)
{
document.getElementById("finalgrade").innerHTML='<mark class="col-blue">Grade B</
mark>';
}
else if(parseFloat(percentage)>70)
{
document.getElementById("finalgrade").innerHTML='<mark class="col-blue">Grade C</
mark>';
}
else if(parseFloat(percentage)>60)
{
document.getElementById("finalgrade").innerHTML='<mark class="col-blue">Grade D</
mark>';
}
else if(parseFloat(percentage)>50)
{
document.getElementById("finalgrade").innerHTML='<mark class="col-blue">Grade E</
mark>';
}
else if(parseFloat(percentage)>40)
{
document.getElementById("finalgrade").innerHTML='<mark class="col-blue">Grade F</
mark>';
}
else
{
document.getElementById("finalgrade").innerHTML='<mark class="col-red">Fail</mark>';
}
});
</script>
</body>
</html>
Editor is loading...