Scribd
Upload
12 views5 pages

CALC

Uploaded by

sfschristiqn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views5 pages

CALC

Uploaded by

sfschristiqn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE>

<html>

<head>

<title>Grade Calculator</title>

<style>

body {

background-color: white;
}

ul {
list-style-type: none;
margin: 0;
outline-style: solid;
outline-color: #183F0D;
overflow: hidden;
background-color: white;
outline-width: 5px;
}

.title {
display: block;
color: #17350F;
text-align:center;
text-decoration: none;
font-family: Century Gothic;
font-size: 26px;
padding: 0px;
margin: 6px;
font-weight: bold;
}

.img {

text-align: left;
float: left;
margin-left: 5px;
margin-right: 10px;

form {
background-color: rgba(16, 73, 32, 0.3);
display: inline-block;
font-family: Helvetica;
width: 400px;
margin: 0px;
padding: 0px;
height: 300px;
border-top: 7px solid rgb(16, 73, 32);
border-bottom: 7px solid rgb(16, 73, 32);
border-left: 7px solid rgb(16, 73, 32);
border-right: 7px solid rgb(16, 73, 32);
border-radius: 7px;
}

input[type=text] {
color: black;
background-color: white;
border-style: none;
border: 1px solid white;
padding: 20px 40px;
margin: 5px 0;
}

input[type=button] {
color: #F2F2F2;
padding: 10px;
width: 25%;
border-style: solid;
background-color: #085721;
border: 1px solid #121212;
font-family: Arial;

h1 {
font-family: Verdana;
color: rgb(16, 73, 32);
text-align: center;
}

h2 {
font-family: Times New Roman;
color: white;
}

#avg {
text-align: center;
font-family: Helvetica;
color: #F2F2F2;
}

#resultHeader {
text-align: center;
font-family: Helvetica;
color: #F2F2F2;
}

#result {
text-align: center;
font-family: Helvetica;
font-size: 30px;
color: #F2F2F2;
}
</style>

<script>

function calcGrade() {

var firstName = (document.info.firstName.value);

var lastName = (document.info.lastName.value);

var lrn = (document.info.learnNum.value);

var eng = parseInt(document.info.eng.value);

var math = parseInt(document.info.math.value);

var sci = parseInt(document.info.sci.value);

var avg = (eng + math + sci) / 3;

var grading;

if (avg >= 95) {

grading = "an Expert! Keep it up!";

} else if (avg >= 88 && avg <= 94) {

grading = "Proficient, great job and keep studying


hard!";

} else if (avg >= 82 && avg <= 87) {

grading = "Competent, you're doing really well!";

} else if (avg >= 78 && avg <= 81) {

grading = "a Beginner, you can do it! I believe in


you!";

} else {

grading = "in need of help, contact us if you need


assistance in your studies.";

if (isNaN(eng) || isNaN(math) || isNaN(sci)) {


alert("Please enter your total averages");

return;

document.getElementById("avg").innerText = "Average:" + " " + avg;

document.getElementById("result").innerText = "Hello," + " " +


firstName + " " + lastName + ".\n" + " " + "Your LRN:" + " " + lrn + " " + "\nYour
general average is" + " " + avg + "\nYou're" + " " + grading;

</script>

<script>

function clearButton() {
document.getElementById("firstName").value = "";

document.getElementById("lastName").value = "";

document.getElementById("learnNum").value = "";

document.getElementById("eng").value = "";

document.getElementById("math").value = "";

document.getElementById("sci").value = "";

document.getElementById("avg").innerText = "";

document.getElementById("result").innerText = "";
}

</script>

</head>

<body>

<ul>

<li><p class="img"><img src="LOGO.png" width="60" height="60"


></li>
<li><p class="olca"> Our Lady of Caysasay Academy</li>

</ul>

<h1>TUTORIAL CENTER</h1>

<center>

<form name="info">

<h2> Information </h2>


<input type="text" id="firstName" name="firstName"
size="30" placeholder="First Name...">

<br/>

<input type="text" id="lastName" name="lastName" size="30"


placeholder="Last Name...">

<br/>

<input type="text" id="learnNum" name="learnNum" size="30"


placeholder="Learners Reference Number...">

</form>
<br/> <br/> <br/>
<form>

<h2> Calculation </h2>

<input type="text" id="eng" name="eng" size="30"


placeholder="English Grade...">

<br/>

<input type="text" id="math" name="math" size="30"


placeholder="Math Grade...">

<br/>

<input type="text" id="sci" name="sci" size="30"


placeholder="Science Grade...">

<br/><br/> <br/>
<br/> <br/>
<input type="button" value="CALCULATE"
onClick="calcGrade()">

<input type="button" value="CLEAR" onClick="clearButton()">

</form>

</center>
<br/> <br/> <br/><br/>
<h2 id="resultHeader">RESULT</h2>

<br/>

<p id="avg"></p>

<br/>

<p id="result"></p>

</body>

</html>

You might also like