TUTORIAL SIMPLE CALCULATOR

In this tutorial i'm going to show you how to make this very simple calculator

As you can see it's very simple and primitive but it works. And in this tutorial
i'm going to show you hw to make this or you can just scroll to the bottom to copy the code if you are lazy.

step 1

step 1

first you want to start with your html file and make sure to link the css file in the header and for a javascript file it's usually placed at the bottom of the html between the closing body tag and html tag.

step 2

step 2

Next we want to add a div in the body tag and in that div we put 2 p tags the second p tag we leave empty and in the first we put a input tag, a select tag with 4 options and followed by another input tag.

step 3

step 3

Then I add a class to my div and call it calculator you don't have to do this but it makes it easier to style. the one you do need are id's for your first input called "firstnum" a id for yur select named "operation" yet another id for your second select called "secondnum" lastly yu want an id in yur last p tag named result since our select is for our operation we are going to add our 4 operations to the options and those are
"+", "-", "*" and "/" so we can add, subtract, multiply, and divide.

step 4

step 4

Even though i wasn't going to talk about css i am going to show you this the ".calculator" is just so it's in the center of my screen but the p styling is the only one i would recommend it makes it look better but i'll leave the rest of the styling up to you.

step 5

step 5

now finally we can strat on out javascript we wanna start by setting our variables we wanna use document.getElementById() to get the info from our id's we made ealier and you wanna do this for each one.

step 6

step 6

Next we want to add something so that every time we change something in one of our inputs it automaticly updates for this we use .addEventListener and we use this to "listen" to things that change in our inputs we want to listen for a change of "input" for our numOne and numTwo and for a "change" in our selected operation also we want to use a .innerHTML to display "your result is: ?" as our result since we haven't calculated anything yet when we load our site. The reason that i don't just put this in the p tag itself is becouse if anything breaks in our .js file it wn't show up witch makes it easier for me to see if anything is wrong but you can just leave it like that.

step 7

step 7

The next step is to run a function every time an input is made so we add ", calculate" after our thing we are "listening" for to run a function named calculate every time and input is made next we of course wanna add that function and were going to get our values from our inputs we need to actually calculate a number for this we wanna make a new variable for firstNum and secondNum witch is equal to the parseFloat van de .value van firstNum and secondNum respectively this means we are taking the value from the input tag and turning it into a number if we don't use parseFloat it will nut be counted as a number but a a string witch we can't use to do any calculations.

step 8

step 8

now it's time to start our first type of operation and get a result what you want to d is make a if statement with a condition that your operation must be equal to "+" so that it will only run if we want to add 2 numbers and in that if statement you put result.innerHTML = "your result is: " + (firstNum + secondNum) witch will add our 2 numbers together and display the result in the bottom p tag.

step 9

step 9

nw you want to copy this if statement 3 times and in the first copy you replace the "+" with a "-" in the secnd copy replace them with a "*" and for the third copy "/".

step 10

step 10

you might notice that it now works but if you leave a input empty it gives NaN what you can do is add a or after your numOne and numTwo.value that says to use the value of your input or if there is nothing use a 0 instead yu do this by using this "|| 0" witch says or 0.

extra

extra

the especialy observant of you might have noticed that if you divide 0 by 0 you still get an error that's becouse it's not possible so we wanna do the same thing as our firstNum and secondNum but this time after our division and a ? istead of a 0 becouse 0/0 is not 0 it's NaN or a ? in our case. Another thing i did is i added a bit f code that replaces the word infinity with the symbol for ininity because i think it's better i'm not going to explain how but you can cpy it at the bottom of the page.