How To Build a Simple Calculator Using HTML, CSS & Javascript

Have you ever wanted to design a simple calculator using HTML, CSS and most of all Javascript to handle the calculations? In this tutorial I’ll guide you through designing yours with the best design you might have imagined.

Before we continue with this tutorial, I’d assume you have a basic knowledge of HTML, CSS and Javascript. Anyways, if you are new to any of these, you can as well download the full script at the end of this post and simply upload to your server to have a working and stunning looking calculator webpage.

Here’s what we’d be having at the end of this tutorial.

You can also check out the live demo by following the link below.

View Live Demo

Let’s start with the HTML code. You can create a file in your favorite text editor (Notepad, Notepad++, Sublime Text, Visual Studio code etc.). Then copy the below HTML code and save as “index.html”. The below code contains the buttons and inputs that houses the structure of the calculator.

[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%09%3Ctitle%3EA%20Simple%20Calculator%20With%20HTML%2C%20CSS%20%26%20Javascript%20-%20Oscarmini%20Calculator%3C%2Ftitle%3E%0A%09%3Cmeta%20name%3D%22description%22%20content%3D%22Here’s%20a%20demo%20of%20a%20simple%20calculator%20with%20a%20stunning%20interface%20built%20from%20scratch%20with%20CSS%2C%20Javascript%20and%20of%20course%20HTML%22%2F%3E%0A%3Clink%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%20href%3D%22style.css%22%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22script.js%22%3E%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%0A%3Cdiv%20class%3D%22container%22%3E%0A%09%3Cdiv%20class%3D%22calc-container%22%3E%0A%0A%09%09%3Ch1%3EOM%20Calc%3C%2Fh1%3E%0A%0A%09%09%3Cinput%20id%3D%22box%22%20value%3D%22%22%20type%3D%22text%22%20readonly%20placeholder%3D%220%22%3E%3Cbr%2F%3E%0A%0A%09%09%3Cdiv%20class%3D%22btn-container%22%3E%0A%09%09%3Cdiv%20class%3D%22row%22%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘1’)%22%3E%3Cstrong%3E1%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘2’)%22%3E%3Cstrong%3E2%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘3’)%22%3E%3Cstrong%3E3%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%20cbtn%22%20onclick%3D%22delback()%22%3E%3Cstrong%3E%E2%9F%B8%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%3C%2Fdiv%3E%0A%09%09%3Cdiv%20class%3D%22row%22%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘4’)%22%3E%3Cstrong%3E4%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘5’)%22%3E%3Cstrong%3E5%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘6’)%22%3E%3Cstrong%3E6%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘%2B’)%22%3E%3Cstrong%3E%2B%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%3C%2Fdiv%3E%0A%09%09%3Cdiv%20class%3D%22row%22%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘7’)%22%3E%3Cstrong%3E7%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘8’)%22%3E%3Cstrong%3E8%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘9’)%22%3E%3Cstrong%3E9%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘-‘)%22%3E%3Cstrong%3E-%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%3C%2Fdiv%3E%0A%09%09%3Cdiv%20class%3D%22row%22%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘.’)%22%3E%3Cstrong%3E.%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘0′)%22%3E%3Cstrong%3E0%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(’00’)%22%3E%3Cstrong%3E00%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘*’)%22%3E%3Cstrong%3E*%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%0A%09%09%3C%2Fdiv%3E%0A%09%09%3Cdiv%20class%3D%22row%22%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%20cbtn%22%20onclick%3D%22clearme()%22%3E%3Cstrong%3EC%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%20solvebtn%22%20onclick%3D%22solve()%22%3E%3Cstrong%3E%3D%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%09%09%3Cbutton%20class%3D%22btn%22%20onclick%3D%22shownum(‘%2F’)%22%3E%3Cstrong%3E%2F%3C%2Fstrong%3E%3C%2Fbutton%3E%0A%09%09%3C%2Fdiv%3E%09%0A%09%09%0A%09%09%3C%2Fdiv%3E%0A%0A%0A%09%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%09%3Cfooter%20id%3D%22footer%22%3EDesigned%20by%20%3Ca%20href%3D%22https%3A%2F%2Foscarmini.com%2F%22%20target%3D%22_blank%22%20style%3D%22color%3A%20%23ffbb4f%22%3EOscarmini%3C%2Fa%3E%3C%2Ffooter%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E” message=”HTML for Simple JS Calc” highlight=”” provider=”manual”/]

After you must have saved the above code in your choice directory or folder, it’s time to write the CSS to style our calculator into a beauty. This css file as you can see from the above code is already linked.

[pastacode lang=”css” manual=”h1%20%7Bcolor%3A%20%23fff%3B%7D%0A.container%7B%0A%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%7D%20%20%0A.calc-container%20%7B%0A%09%09padding%3A%2020px%3B%0A%09%09background%3A%20%23191717%3B%0A%09%09width%3A%20250px%3B%0A%09%09border-radius%3A%2020px%3B%0A%09%09box-shadow%3A%2010px%2010px%205px%20%23888888%3B%09%20%20%20%0A%09%09-moz-box-shadow%3A%2010px%2010px%205px%20%23888888%3B%0A%09%09-webkit-box-shadow%3A%2010px%2010px%205px%20%23888888%3B%0A%09%09margin%3A%2010px%20auto%3B%0A%20%20%20%20%20%20%20%20%7D%0A%23box%20%7B%0A%20%20%20%20%20%20%20%20width%3A100%25%3B%20%0A%20%20%20%20%20%20%20%20height%3A%2040px%3B%20%0A%20%20%20%20%20%20%20%20border%3A1px%20solid%20%23000%3B%20%0A%20%20%20%20%20%20%20%20background%3A%20%23ddded9%3B%20%0A%20%20%20%20%20%20%20%20font-size%3A%2030px%3B%20%0A%20%20%20%20%20%20%20%20text-align%3A%20right%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23f00%3B%0A%09%09margin%3A%200%20auto%3B%0A%09%0A%20%20%20%20%20%20%20%20%7D%20%0A.btn-container%20%7B%0A%09%09margin%3A%2010px%205px%3B%0A%09%09background%3A%20%23ffbb4f%3B%0A%7D%0A%0A.btn%20%7B%0A%09%09height%3A%2040px%3B%0A%09%09width%3A%2040px%3B%0A%20%20%20%20%20%20%20%20padding%3A%2010px%3B%20%0A%20%20%20%20%20%20%20%20background%3A%20%23291616%3B%20%0A%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%20%0A%09%09border%3A%20none%3B%0A%20%20%20%20%20%20%20%20margin%3A%208px%3B%20%0A%20%20%20%20%20%20%20%20font-size%3A%2015px%3B%20%20%20%20%0A%09%09box-shadow%3A%201px%201px%201px%20%23000%3B%0A%09%20%20%20%20-moz-box-shadow%3A%201px%201px%201px%20%23000%3B%0A%09%20%20%20%20-webkit-box-shadow%3A%201px%201px%201px%20%23000%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A.btn%3Ahover%20%7Bbackground-color%3A%20%23000%7D%0A%0A.btn%3Aactive%20%7B%0A%20%20background-color%3A%20%23000%3B%0A%20%20box-shadow%3A%200%205px%20%23666%3B%0A%20%20transform%3A%20translateY(2px)%3B%0A%7D%0A.solvebtn%20%7B%0A%09%09width%3A100px%3B%0A%09%09background%3A%20%23085d08%3B%0A%7D%0A.solvebtn%3Ahover%20%7Bbackground-color%3A%20%23013e01%3B%7D%0A%0A.solvebtn%3Aactive%20%7B%0A%20%20background-color%3A%20%23013e01%3B%0A%20%20box-shadow%3A%200%205px%20%23666%3B%0A%20%20transform%3A%20translateY(2px)%3B%0A%7D%0A.cbtn%20%7B%0A%09%09background%3A%20%23f00%3B%20%0A%7D%0A.cbtn%3Ahover%20%7Bbackground-color%3A%20%23b70505%7D%0A%0A.cbtn%3Aactive%20%7B%0A%20%20background-color%3A%20%23b70505%3B%0A%20%20box-shadow%3A%200%205px%20%23666%3B%0A%20%20transform%3A%20translateY(2px)%3B%0A%7D%0A%23footer%20%7B%0A%09%09position%3Afixed%3B%0A%09%20%20%20%09left%3A0px%3B%0A%09%20%20%20%09bottom%3A0px%3B%0A%09%20%20%20%09height%3A10px%3B%0A%09%20%20%20%09width%3A100%25%3B%0A%09%20%20%20%09background%3A%23000%3B%0A%09%09text-align%3A%20center%3B%0A%09%09margin%3A%200px%20auto%3B%0A%09%09padding%3A%2010px%3B%0A%09%09color%3A%20%23fff%3B%0A%09%09%7D%0A%23footer%20a%3Alink%20%7Bcolor%3A%20%23fff%3Btext-decoration%3A%20none%3B%7D%0A” message=”CSS for simple JS calculator” highlight=”” provider=”manual”/]

You have to save this codes as “style.css” and in the same directory as the “index.html” you saved earlier.

Now this is where the magic happens. We are going to use javascript to handle all the calculations. Below is the javascript code you need. Make sure it is saved as “script.js” in the exact same folder as the files above.

[pastacode lang=”javascript” manual=”%2F%2F%20Get%20the%20Variable%20from%20the%20input%20box%0Afunction%20screen(val)%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22box%22).value%3Dval%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%2F%2F%20Concatenating%20Values%0Afunction%20shownum(val)%20%20%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22box%22).value%2B%3Dval%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%2F%2F%20Performing%20the%20Calcuulation%0Afunction%20solve()%20%7B%20%0A%20%20%20%20try%20%20%20%20%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20screen(eval(document.getElementById(%22box%22).value))%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0A%20%20%20%20catch(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20screen(‘Error’)%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%2F%2F%20Clear%20the%20Input%20Screen%0Afunction%20clearme()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(%22box%22).value%20%3D%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0A%2F%2F%20Backspace%20Function%0Afunction%20delback()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20valueNeeded%20%3D%20document.getElementById(%22box%22).value%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20finalValueNeeded%20%3D%20valueNeeded.substr(0%2C%20valueNeeded.length-1)%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(%22box%22).value%3DfinalValueNeeded%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0A” message=”JavaScript for simple JS calculator” highlight=”” provider=”manual”/]

Once you have all these files saved in the same folder, it’s time to test out your work. Launch the “index.html” file in your favorite browser and test your stunning looking JS, HTML and CSS written calculator.

Wanna save yourself the stress of having to write and save these codes yourself? Well, I’ve got you covered. You can download the full script with the link below and simple upload to see how it works.

Download the full script below

Do let me know what you’d like to see in the future on this blog as regards, HTML, CSS and Javascript.