Back to all activities
Weekend · Technology
Code a calculator that runs in a web page — HTML, CSS, JS basics
One file. Six buttons. They build it. They save it. They open it tomorrow.
90 min ages 11–14
How to do it
Open a text editor (TextEdit, Notepad — anything plain). Together, write index.html with <button>+</button>, <button>-</button>, etc., a <input> for the number, and a <script> at the bottom that catches button clicks and updates the display. Save it. Double-click it. It opens in their browser. It works. They added +, -, *, /. Show them View Source — that's the whole thing. Now: add a CSS file. Make it pretty. They pick the colors. Save the file to their desktop. They open it tomorrow. They built that.
What you'll need
Calculator starter HTML printable
PrintableOpenA computer
Free