Write the programme in HTML to create mark sheet of program me.
Answers
HTML:-
<p class="head">MARKSHEET</p>
<div class="left">
<ul class="ul">
<li>Name:</li>
<li>English:</li>
<li>Tamil:</li>
<li>Maths:</li>
<li>Science:</li>
<li>Social:</li>
<li>Total:</li>
<li>Average:</li>
</ul>
</div>
<div class="right">
<select id="selct" onclick="select()">
<option>Sanjay</option>
<option>Rani</option>
<option>Gautham</option>
<option>Anusha</option>
<option>Latha</option>
<option>Lakshmi</option>
<option>Ravi</option>
<option>Rajesh</option>
<option>Mounica</option>
<option>Chandra</option></select>
<div id="eng" class="value"></div>
<div id="tam" class="value"></div>
<div id="mat" class="value"></div>
<div id="sci" class="value"></div>
<div id="soc" class="value"></div>
<div id="tot" class="value"></div>
<div id="avg" class="value"></div>
</div>
CSS:-
.first{
height:30px;
width:100px;
}
.ul{
list-style-type:none;
}
.name,li{
margin-top:30px;
font-size:20px;
}
.head{
margin-left:150px;
font-size:30px
}
.right,.left{
height:500px;
width:200px;
float:left;
}
select{
margin-top:25px;
height:20px;
width:100px;
font-size:15px;
background-color:#f5cb4a
}
.value{
height:20px;
width:100px;
border:3px solid;
margin-top:30px;
text-align:center;
font-size:18px
}
body{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ66cx5TqWFgdc1utunFbeD1fRMfar3LO918Q0jYk24fjm3X9k3");
background-size:600px 600px;
background-repeat:no-repeat;
}
JS:-
function select(){
var n= document.getElementById("selct").value;
var array={Sanjay:{"English":79,"Tamil":90,"Maths":67,"Science":80,"Social":79},Rani:{"English":56,"Tamil":69,"Maths":88,"Science":85,"Social":74},Gautham:{"English":97,"Tamil":89,"Maths":91,"Science":88,"Social":94},Anusha:{"English":59,"Tamil":39,"Maths":47,"Science":61,"Social":74},Latha:{"English":44,"Tamil":47,"Maths":75,"Science":68,"Social":59},Lakshmi:{"English":78,"Tamil":35,"Maths":89,"Science":84,"Social":73},Ravi:{"English":57,"Tamil":93,"Maths":61,"Science":89,"Social":69},Rajesh:{"English":99,"Tamil":95,"Maths":90,"Science":90,"Social":89},Mounica:{"English":85,"Tamil":79,"Maths":87,"Science":50,"Social":69},Chandra:{"English":79,"Tamil":66,"Maths":97,"Science":90,"Social":99}}
var e=document.getElementById("eng").innerText=array[n]["English"];
var t=document.getElementById("tam").innerText=array[n]["Tamil"];
var m=document.getElementById("mat").innerText=array[n]["Maths"];
var s=document.getElementById("sci").innerText=array[n]["Science"];
var so=document.getElementById("soc").innerText=array[n]["Social"];
var total=document.getElementById("tot").innerText=Number(e+t+m+s+so);
document.getElementById("avg").innerText=total/5;
}
