Untitled
unknown
plain_text
2 years ago
5.7 kB
13
Indexable
<!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...
Leave a Comment