/odin-calculator

An on-screen calculator built with Javascript, HTML, and CSS.

Primary LanguageJavaScript

Simple Onscreen Calculator

Live Demo: https://tsoibet.github.io/odin-calculator/

This is a simple calculator with mouse and keyboard supports.

It can perform the four basic math operations - addition, subtraction, multiplication and division. The results are accurate to two decimal places.

User Interface

Screen Shot 2022-04-09 at 14 45 31

Tech Stack

  • HTML
  • CSS (including Flexbox)
  • Javascript (Vanilla)

Difficulties and What I learned

  1. The calculator was first implemented with very limited functionality, and extra functions, such as the dot button and the backspace button, were added later one by one. Although at first adding a new button did not seem diificult to me, it always turned out to be bugs on the display panel. I needed to pay extra attention on how one element can affect the others.

  2. When I was trying to make an colour change effect on the buttons, I found out it is more complicated to make it change when it is pressed (by keyboard) than when it is hovered or clicked (by mouse). During the process I realized the importance of carefully naming each element and grouping the elements in classes.

This project is an assignment of The Odin Project.