Building a Fully Functional Interactive Calculator with Vanilla JavaScript

After recently wrapping up my Etch a Sketch project, I dove into a new challenge—creating a fully functional interactive calculator using nothing but vanilla JavaScript, HTML, and CSS. This project is part of my journey through The Odin Project Foundation Course, where I continue to deepen my understanding of web development concepts while working on fun and practical mini-projects.

In this post, I’ll walk you through how I built the calculator, share some of the core features, and discuss a few key lessons I learned along the way.

The Project

The goal of the project was to create a simple, interactive calculator that performs basic arithmetic operations: addition, subtraction, multiplication, and division. It was important that the app supported both on-screen button clicks and keyboard input for ease of use. Additionally, I wanted to implement a few features to make the user experience smooth, like division-by-zero error handling and the ability to clear the display with a simple keypress (C or CTRL+C).

Key Features:

  • Integer Calculations: Emulates calculations that computers would perform with integers, such as rounding off decimals.
  • Basic Arithmetic Operations: The calculator supports addition, subtraction, multiplication, and division.
  • Division by Zero Check: If a user attempts to divide by zero, the app gracefully handles the error by displaying a message.
  • Keyboard Support: You can use your keyboard to input numbers and operations just like on the on-screen buttons.
  • Clear Function: Pressing C or CTRL+C clears the current calculation.

Here's a sneak peek at what the calculator looks like:

App Preview

How It Works

At the core, the calculator uses vanilla JavaScript to handle all the logic, HTML5 for the structure, and CSS for styling and layout. I kept it simple yet functional, focusing on understanding how JavaScript can manipulate the DOM and how to handle user input effectively.

1. HTML Structure

I started by creating the basic HTML structure for the calculator. I started with the boilerplate HTML template. I then took a few components, header and footer, from my past projects to save time. I searched for the perfect icons using Tabler for the favicon and Simple Icons for the Github logo. The HTML is minimal, I left the heavy lifting for the JavaScript and CSS.

2. JavaScript Logic

The JavaScript part is where the magic happens! Here’s how it works:

  • Handling Button Clicks: When a user clicks on a number or operation, JavaScript captures the event and updates the display.
  • Keyboard Input: I added event listeners to the document to capture key presses. Now, users can perform calculations using their keyboard—pressing number keys, arithmetic symbols, and the Enter key to evaluate.
  • Calculation Logic: When the user hits Enter (or the equals button), the app evaluates the expression and displays the result.
  • Clear Function: The C button (or CTRL+C on the keyboard) clears the current calculation.
  • Mode Operations: I utilized a global variable mode that designates whether the calculator is performing an operation addition, subtraction, etc or in the default equals state. This allowed me to have simple operations because I only have to manage the state of two additional numerical values to perform calculations.
  • Element Creation: Instead of writing the code for the buttons in HTML, I created each of the buttons from an array in JavaScript. This allows for modularity, if I decide I want to add or remove buttons in the future.

I also added error handling for division by zero, which is a common edge case in any calculator app.

I'm still getting the hang of JavaScript. Something that I have come to like is the use of callback functions as parameters, allowing for smooth interactions like calling a function on each element in an array with array.forEach(callback).

3. CSS Styling

For styling, I kept things simple and clean with CSS. I used flexbox for the layout to ensure the buttons are evenly spaced and responsive across different screen sizes. I also gave the calculator a modern look with rounded buttons and an organized layout.

A very useful CSS attribute I utilized is box-sizing: border-box, which simplifies the design process by ensuring that width and height include padding and borders—simplifying the process of sizing elements.

Installation & Usage

If you’d like to try it out for yourself, you can easily click the link here or run the project locally. Here’s how:

Clone the repository:

git clone https://github.com/mkforde/web-calculator.git

Navigate to the project folder:

cd web-calculator

Open the index.html file in your browser.

open index.html

That’s it! No extra dependencies are needed. The calculator works right out of the box with just HTML, CSS, and JavaScript.

Key Takeaways

Building this calculator was a great exercise in applying core web development skills. Here are a few things I learned from the project:

  • Event Handling: Handling both mouse clicks and keyboard input was an interesting challenge. I learned how to use addEventListener for keyboard inputs and the difference between keyup and keypress.
  • Error Handling: Implementing a check for division by zero forced me to think about edge cases and how to gracefully handle errors in user input.
  • DOM Manipulation: I gained a deeper understanding of how to update and manipulate the DOM based on user input.

Future Improvements

I wanted to deliver a fully functional demo, though there are still features I’d like to implement:

  • Add support for decimals, including a dedicated decimal button and a responsive display that adjusts font-size to content.
  • Include a popup window with keybindings and project info.
  • Improve mobile responsiveness using flexbox (sorry, mobile users!).

Want to see how it's done? You can check out the source code on GitHub here: GitHub Repository.

If you're interested in checking out my previous projects, I also built an Etch a Sketch tool in a similar fashion. It was a super fun project that helped me practice JavaScript events, CSS styling.

Wrapping Up

This calculator project has been a great learning experience, reinforcing the foundational concepts of web development while creating a useful and fun tool. If you’re just getting started with JavaScript, I highly recommend trying something like this to solidify your skills and see the real-world applications of what you're learning.

This was my last project in the foundations course. Stay tuned for more projects as I continue my journey into Full Stack Development with The Odin Project!


If you’re interested in the Etch-a-Sketch project I mentioned earlier, you can check it out here: Etch-a-Sketch GitHub.