<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Container for all the elements -->
<div id="main-wrapper">
<h1>Average score Calculator</h1>
<div id="subjects">
<h2>Subjects</h2>
<div >
<h3>Math</h3>
</div>
<div >
<h3>English</h3>
</div>
<div >
<h3>Literature</h3>
</div>
<div >
<h3>Geography</h3>
</div>
<div>
<h3>History</h3>
</div>
<div >
<h3>Biology</h3>
</div>
<div>
<h3>Physic</h3>
</div>
<div>
<h3>Chemistry</h3>
</div>
</div>
<div id="score">
<h2>Scores</h2>
<input id="Math" type="number" placeholder="Type your score/Math"/>
<input id="English" type="number" placeholder="Type your score/English"/>
<input id="Literature" type="number" placeholder="Type your score/Literature" />
<input id="Geography" type="number" placeholder="Type your score/Gepgraphy" />
<input id="History" type="number" placeholder="Type your score/History" />
<input id="Biology" type="number" placeholder="Type your score/Biology" />
<input id="Physic" type="number" placeholder="Type your score/Physic" />
<input id="Chemistry" type="number" placeholder="Type your score/Chemistry" />
</div>
<div id="total">
<h3 id="text1">Your Average Score</h3>
<h3 id="resultFinal">0.0</h3>
</div>
<button onclick="calculate()">Calculate</button>
<script src="script.js"></script>
</body>
</html>
@font-face {
font-family: "Roboto Condensed";
src: url("/resources/fonts/RobotoCondensed-Regular.ttf");
}
@font-face {
font-family: "Roboto Condensed Bold";
src: url("/resources/fonts/RobotoCondensed-Bold.ttf");
}
@font-face {
font-family: "Roboto";
src: url("/resources/fonts/Roboto-Regular.ttf");
}
@font-face {
font-family: "Roboto Medium";
src: url("/resources/fonts/Roboto-Medium.ttf");
}
html {
box-sizing: border-box;
}
body {
font-family: "Roboto Condensed", sans-serif;
background-repeat: no-repeat;
height: 100%;
background-attachment: fixed;
background-image: url("https://png.pngtree.com/background/20210709/original/pngtree-cartoon-character-inspirational-college-entrance-examination-picture-image_941315.jpg");
color: #2F4858;
background-size: cover;
}
body,
html {
height: 100%;
display: grid;
}
h2,
h3 {
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
}
h1 {
text-align: center;
margin: 5% 0 3%;
font-size: 2.25em;
font-family: "Roboto", sans-serif;
}
h2 {
font-size: 1em;
padding-left: 10px;
font-size: 28px;
margin: 0;
}
h3 {
color: #ffffff;
margin: 7px 0;
border: solid;
background-color: cadetblue;
}
div {
margin: auto;
}
/* <div> element that contains all the calculator elements */
#main-wrapper {
width: 600px;
height:auto; ;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-top: 15px solid #0bab64;
border-radius: 20px;
background-color: rgba(256, 256, 256, 0.7);
background-image: url("https://img.freepik.com/free-photo/blue-office-stationery-with-copy-space_23-2148475340.jpg?w=2000");
background-size: cover;
}
/* <div> element that wraps around the label and input elements only */
#input-wrapper {
display: grid;
gap: 20px;
padding: 1em;
grid-template-columns: 110px 1fr;
}
/* <div> element that displays the results of the calculation, and is hidden by default */
#results-wrapper {
display: flex;
align-items: center;
flex-direction: column;
background-color: #0bab64;
visibility: hidden;
height: 0;
padding: 2% 4%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-image:url("https://img.freepik.com/premium-photo/top-view-bundle-100-dollar-bill-green-background-business-concept-with-copy-space_661495-12280.jpg");
background-size: cover;
}
/* <div> elements for the grey line */
div.line {
border-bottom: 2px solid #c8d2db;
width: 95%;
grid-column: 2/3;
}
input {
width: 90%;
border: 2px solid transparent;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 7px 5px 5px 15px;
box-sizing: border-box;
border-radius: 5px;
justify-self: start;
font-size: 16px;
}
input::placeholder {
color: lightsteelblue;
}
input:focus {
outline: none;
border: 2px solid #3bb78f;
}
label {
padding: 10px;
justify-self: start;
font-size: 20px;
}
button {
margin: 10px 0 5px 0;
text-transform: uppercase;
padding: 12px 20px;
border-radius: 55px;
border: none;
color: #ffffff;
font-size: 18px;
font-family: "Roboto Medium", sans-serif;
letter-spacing: 2px;
text-align: center;
grid-column: span 2;
background-color: #3bb78f;
margin-left: 195px;
transition: 3s;
height: 100px;
width: 200px;
}
button:hover {
cursor: pointer;
animation-name: colorchange;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes colorchange {
0% {
background-color: #3bb78f;
}
50% {
background-color: cornflowerblue;
}
100% {
background-color: #3bb78f;
}
}
button:focus {
outline: none;
}
/* <span> elements for the numbers and organization name in the results */
span {
font-weight: 700;
font-size: 1.2em;
}
/* Media queries for mobile view */
@media (max-width: 414px) {
#main-wrapper {
width: 750px;
}
#input-wrapper {
grid-template-columns: 90px 1fr;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.3em;
}
input {
height: 3em;
}
label {
font-size: 18px;
}
}
#subjects{
height: 340px;
width: 45%;
background-color: lightsteelblue;
text-align: center;
margin-left: 20px;
border: solid;
border-radius: 20px;
}
#score{
height: 340px;
width: 45%;
background-color: lightsteelblue;
text-align: center;
margin-left: 300px;
border: solid;
border-radius: 20px;
margin-top: -345px;
}
#total {
width: 35%;
height: 70px;
background-color: cadetblue;
text-align: center;
border-radius: 20px;
border: solid;
}
#resultFinal{
border: solid;
border-radius: 20px;
background-color: darkgrey;
border-color:cadetblue;
margin-top: -5px;
}
input {
border: solid;
border-color: gainsboro;
}
#text1{
border-color: cadetblue;
border-radius: 20px;
}
function calculate() {
const math1 = parseInt(document.getElementById("Math").value);
const english2 = parseInt(document.getElementById("English").value);
const literature3 = parseInt(document.getElementById("Literature").value);
const geography4 = parseInt(document.getElementById("Geography").value);
const history5 = parseInt(document.getElementById("History").value);
const biology6 = parseInt(document.getElementById("Biology").value);
const physic7 = parseInt(document.getElementById("Physic").value);
const chemistry8 = parseInt(document.getElementById("Chemistry").value);
if (math1 > 0 && english2 > 0 && literature3 > 0 && geography4 > 0 && history5 > 0 && biology6 > 0 && physic7 > 0 && chemistry8 > 0) {
const result1 = Math.abs((math1 + english2 + literature3 + geography4 + history5 + biology6 + physic7 + chemistry8) / 8);
const finalResult = document.getElementById("resultFinal");
finalResult.innerHTML = result1;
}
else {
alert("Please fill in all the score fields.");
}
}