Skip to content
A Calculator with a beautiful UI using vanilla CSS and JavaScript
HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
README.md
calcjs.html
calculator-test.html
calculator.html

README.md

Js-Calculator

Brief Intro

I set out to accomplish this project in order to see if I could efficiently create a working product from a design. I wanted to use vanilla JS and CSS in order to complete the project. I also timed myself and it took me 18h to produce this repository.

The working final product of this project can be found here

The design I was trying (successfully I think) to mimick can be found here

The actual design of the Calculator is one of Jordan Symingtons graphics, his awesome work can be found here

Description

The calcjs file is the finished project. The other two HTML files are my two previous attempts within the time period. These two files handle the calculations without using a JavaScript Array. I tried to do this at the begining in order to create a way to display the current calculations as well as the previous ones the user has entered. This method however made the UI look quite messy after a 2 or 3 calculations. Because of this I thought it would look a lot cleaner to create a JS array and use that to provide one calculation at a time.

Improvements to be made

I want to create a variable where the previous answer is saved and the user can press a button to call on the previous answer and input it within an equation. This would save the user from trying to rememeber the previous answer to their previous calculation.

I would also like to create an APP out of this to deploy on both IOS and Android using React Native. I think the UI is beautiful enough for users to want to use it over the standard Calculator Applications. However I would also like to add additional functions to this Calculator so it can assume the role of a Scientific Calculator when required.

You can’t perform that action at this time.