Lesson 24
Interactive HTML + JavaScript
Final Project: Marks Calculator
Build a simple marks calculator that calculates the total and average.
What you should understand
Read the lesson carefully, study the example, then use the editor below to experiment with the code yourself.
Example Code
HTML + JavaScript example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
padding: 20px;
}
input {
display: block;
margin: 8px 0;
padding: 10px;
}
button {
padding: 10px 15px;
}
</style>
</head>
<body>
<h2>Marks Calculator</h2>
<input id="math" type="number" placeholder="Mathematics">
<input id="english" type="number" placeholder="English">
<input id="science" type="number" placeholder="Science">
<button onclick="calculate()">Calculate</button>
<h3 id="result"></h3>
<script>
function calculate() {
let math = Number(document.getElementById("math").value);
let english = Number(document.getElementById("english").value);
let science = Number(document.getElementById("science").value);
let total = math + english + science;
let average = total / 3;
document.getElementById("result").textContent =
"Total: " + total + " | Average: " + average.toFixed(2);
}
</script>
</body>
</html>
Output
See what your code produces.
Click "Run Example" to execute the example.
Quick Check
Test your understanding
Choose the best answer.
Which method can select an element by its ID?
Previous Lesson
← Mini Project: To-Do List
Course Complete
Congratulations! 🎉