Showing posts with label Marksheet Codes in Javascript with HTML and CSS. Show all posts
Showing posts with label Marksheet Codes in Javascript with HTML and CSS. Show all posts

Tuesday, 8 September 2015

Marksheet Codes in Javascript with HTML and CSS


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mark Sheet</title>
<link rel="stylesheet" href="domi.css" />

<script>
function myfunction(){
var a = document.form1.txtname.value;
document.getElementById("name").innerHTML=a;
var b = document.form1.txtfame.value;
document.getElementById("fname").innerHTML = b;
var c = document.form1.txtinstitute.value;
document.getElementById("inst_name").innerHTML = c;
var d = document.form1.txtbatch.value;
document.getElementById("batch").innerHTML = d;
var e = document.form1.txtaccount.value;
document.getElementById("account").innerHTML = e;
var f = document.form1.txtdesign.value;
document.getElementById("designing").innerHTML = f;
var g = document.form1.txtmath.value;
document.getElementById("math").innerHTML = g;
var h = document.form1.txtdevelop.value;
document.getElementById("develop").innerHTML = h;

var txt1 = eval(parseFloat(document.form1.txtaccount.value)+parseFloat(document.form1.txtdesign.value)+parseFloat(document.form1.txtmath.value)+parseFloat(document.form1.txtdevelop.value));
document.getElementById("total").innerHTML = txt1;

var txt2 =eval(parseFloat(txt1*100)/400);
document.getElementById("percent").innerHTML = txt2.toFixed(2)+"%";


switch(true)
{
case(txt2>=80):
document.getElementById("grade").innerHTML="A1";
break;
case(txt2>=70):
document.getElementById("grade").innerHTML="A";
break;
case(txt2>=60):
document.getElementById("grade").innerHTML="B";
break;
case(txt2>=50):
document.getElementById("grade").innerHTML="C";
break;
case(txt2>=40):
document.getElementById("grade").innerHTML="D";
break;
case(txt2<40):
document.getElementById("grade").innerHTML="Fail";
break;
}

}


</script>

</head>

<body>
<div id="container">

<div class="marksheet">
<h1>STUDENT MARKSHEET</h1>

<fieldset>
<legend>Student Information</legend>
<table id="tbl1">
<form name="form1">
<tr>
<td>Name:</td><td><input type="text" name="txtname" /> </td>
<td>&nbsp; &nbsp; Father Name:</td><td><input type="text" name="txtfame" /></td>
</tr>
<tr>
<td>Institute Name:</td><td><input type="text" name="txtinstitute" /></td>
<td>&nbsp; &nbsp; Batch:</td><td><input type="numb" name="txtbatch" /></td>
</tr>
</table>
</fieldset>
<br /><br />

<fieldset>
<legend>Suject Remarks</legend>
<table height="232" id="tbl2">
<tr>
<td width="140">Accounting</td><td><input type="text" name="txtaccount" maxlength="2" size="10" />
&nbsp; Out of 100</td>
</tr>
<tr>
<td width="140">Web Designin</td><td><input type="text" name="txtdesign" size="10" maxlength="2" />
&nbsp; Out of 100</td>
</tr>
<tr>
<td width="140">Mathematic</td><td><input type="text" name="txtmath" maxlength="2" size="10" />
&nbsp; Out of 100</td>
</tr>
<tr>
<td width="140">Web Development</td><td><input type="text" name="txtdevelop" maxlength="2"  size="10" />
&nbsp; Out of 100
</td>
</tr>
</table>
<div class="btn">
<button type="button" onclick="myfunction()">Submitt</button>
<button type="reset" name="reset">Reset</button>
</div>
</fieldset>
</form>


<div class="std_info">
<table border="1">
<tr>
<th colspan="2" width="240">Student Information</th>
</tr>
<tr>
<td width="135">Name:</td><td><FONT face="arial" id="name"></FONT></td>
</tr>
<tr>
<td width="135">Father Name:</td><td><font face="arial" id="fname"></font></td>
</tr>
<tr>
<td width="135">Institute Name:</td><td><font face="arial" id="inst_name"></font></td>
</tr>
<tr>
<td width="135">Batch:</td><td><font face="arial" id="batch"></font></td>
</tr>



<tr>
<th colspan="2" width="135">Subject Remarks</th>
</tr>
<tr>
<td width="135">Accounting:</td><td><font face="arial" id="account"></font></td>
</tr>
<tr>
<td  width="135">Web Designing:</td><td><font face="arial" id="designing"></font></td>
</tr>
<tr>
<td width="135">Mathematic:</td><td><font face="arial" id="math"></font></td>
</tr>
<tr>
<td width="135">Web Development:</td><td><font face="arial" id="develop"></font></td>
</tr>


<tr>
<th colspan="2" width="140">Subject Remarks</th>
</tr>
<tr>
<td width="135">Total:</td><td><font face="arial" id="total"></font></td>
</tr>
<tr>
<td width="135">Percentage:</td><td><font face="arial" id="percent"></font></td>
</tr>
<tr>
<td width="135">Grade:</td><td><font face="arial" id="grade"></font></td>
</tr>

</table>
</div>

</div><!--marksheet-->
</div><!--container-->
</body>
</html>