Simple on-screen calculator using JavaScript, HTML, and CSS. Built for The Odin Project.
This is a simple calculator that performs basic math operations on a pair of numbers, with 3-digit precision.
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
- Javascript
As we've been warned, getting useful variables from user input, was the hardest part of this project. My solution is to store a single number by building a string from the input, than turn that string to number as a second argument for calculations, when clicking an operator button. The first argument is a previous result, or a 0.
- Create functions for basic math calculations;
- Create operate() function that calls a calculation function;
- Create basic html calculator with display, digits, operators and "clear" buttons;
- Create function to populate display when clicking on numbers;
- Make calculator work: store input numbers and operator, perform calculations and update display with result;
- Add ability to string together several operations;
- Round results with long decimals;
- Display error message on division by zero;
- Extra credit: Add "." button;
- Extra credit: Add "backspace" button;
- Extra credit: Make calculator pretty;
- Extra credit: Add keyboard support;
- Minireset - A tiny modern CSS reset.
- Box Shadows A fun and useful tool for playing around with box shadows.
- Colors from Paraiso theme
- Frontend Mentor Calculator challenge - The calculator's design is heavily inspired by this FEM design.