For this assignment you are to write an html page that contains a form with 4 in
ID: 3550818 • Letter: F
Question
For this assignment you are to write an html page that contains a form with 4 input boxes (total assignment points so far, total exam/quiz points so far, your assignment points so far and your exam/quiz points so far). You should have two buttons, one that will call a JavaScript function that will calculate your grade so far and display that value as a percentage. Your second button is a reset button that will clear all the fields.You must also put a disclaimer that this may not be the calculated final grade due to not enough information or programmer error.
For this assignment you are to write an html page that contains a form with 4 input boxes (total assignment points so far, total exam/quiz points so far, your assignment points so far and your exam/quiz points so far). You should have two buttons, one that will call a JavaScript function that will calculate your grade so far and display that value as a percentage. Your second button is a reset button that will clear all the fields.
You must also put a disclaimer that this may not be the calculated final grade due to not enough information or programmer error.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<style>
.jstButton_C {
margin: 0px;
margin-right: 0.9em;
border-bottom-left-radius: 4px;
border: 1px solid #1f3e5a;
display: inline-block;
color: #F0F0F0;
font-family: Arial;
font-size: 0.9em;
font-weight: bold;
padding: 0.2em;
padding-left: 2.0em;
padding-right: 2.0em;
cursor: pointer;
}
.jstButton_C:hover {
color: #FFFFFF;
}
.jstInput_C {
margin: 0px;
padding: 0.2em;
padding-left: 0.5em;
padding-right: 0.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.85em;
width: 15em;
text-align: left;
box-shadow: 0 0 1px #ccc;
border: 1px solid #ccc;
border-radius: 4px;
}
.jstInput_C:focus {
box-shadow: 0 0 5px #7ED34F;
outline: 0;
}
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function (){
});
$(document).on("click","#calculate",function(){
alert("This may not be the calculated final grade due to not enough information or programmer error");
var tap = $("#tap").val();
var tep = $("#tep").val();
var yap = $("#yap").val();
var yep = $("#yep").val();
if(tap =="" || tep =="" || yap =="" || yep =="")
{
alert("Input All Fields");
}
calculate(tap,tep,yap,yep);
});
//write your function here to calculate
function calculate(tap,tep,yap,yep){
//write login here
var grade = "Your grade";
$("#grade").text(grade);
}
$(document).on("click","#clear",function(){
alert("Clearing fields");
$(".jstInput_C").val("");
});
</script>
</head>
<body>
<div>Grade:<span id="grade"></span></div>
<div>
<h1>Calculate Grades</h1>
<input id="tap" type="text" class="jstInput_C" placeholder="totalassignpoints"/>
<br />
<input id="tep" type="text" class="jstInput_C" placeholder="total exam points" />
<br />
<input id="yap" type="text" class="jstInput_C" placeholder="yourassignpoints" />
<br />
<input id="yep" type="text" class="jstInput_C" placeholder="youquizpoints" />
<br />
<input type="button" id="clear" class="jstButton_C" value="clear"/>
<input type="button" id="calculate" class="jstButton_C" value="Calculate"/>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.