Elm Tutorial part 6 -- Calculator

Key Takeaways

hi guys welcome to the album tutorial part 6 this will be our final video as always I'm tenser from the tensor programming blog today we're going to create a calculator using Elm the reason we're going to create a calculating using Elm is because it's a very good program to showcase Elm strengths as a functional language now note we do have a style sheet here this is a style sheet I created beforehand you can download that from the github if you want to follow along okay so let's get started first we need to install the packages alright for this program all we need is the core so we just installed the core library now let's make our imports so these are the imports that we're importing into our project as you can see we're exposing HTML because we need to make some HTML elements we're using HTML attributes because we're going to manipulate that HTML we're using the HTML dot app because it makes things easier we're using HTML events because we need on-click events for our buttons and we're importing the string library so that we can manipulate strings now I've divided our program into three different parts this is because we're not going to be using a subscription part in this program let's start with our main function so here's our main function as you can see we're using the beginner program one second as you can see we're using the beginner program function that is only because we have a model of view and an update we're not using subscriptions so let's start with our model so first we're going to make a type alias of calculator inside the type alias of calculator we're going to have a record and that record is going to contain all the different functions that we're going to use to actually change things in our calculator so we're gonna have add subtract multiply and divide as you can see here's our add function it's taking in two floats and outputting a float here's our completed record we have add minus x and divide and all of them taking two floats and output a float the reason we're using floats for this type here is because we want to be able to add decimals our selves and we want to be able to deal with decimals inside of our calculator so let's actually write the calculator function our calculator function of course is going to be of type calculator inside of our calculator function we're going to have four anonymous functions each one is going to correspond to one of the operators here so as you can see our ad anonymous function just takes in two variables and then adds them together and returns them and there we are that is our calculator function with add subtract multiply and divide as you can see our calculator function just contains four anonymous functions each one bounded to a field of the calculator and we're going to be able to invoke these functions through our update so now let's write our initialized model first of course we need to write a type alias for of the model type so this is our type alias for our model inside of it we're going to have a display which is our display when we put stuff into our calculator this is where things are going to output we're going to have our function which is essentially one of these operators so we're going to pass one of these operators in and it's going to fulfill this field we're going to have a save value now our save value is basically the value that we enter in first so when you use a calculator for example if you're adding you three plus two you click the button 3 and then you click the plus sign and then you click the - well we need someplace to save that 3 value so this is basically how we're doing it we're going to put it into this field of the model our append value is basically a flag append is basically going to let us add more numbers to a number so for example we can have multi digit numbers and we can have decimal numbers if append is true and if it's false then we can only have single digit numbers etc etc etc we're going to do this for two specific reasons one so that if we hit the decimal sign when this field is blank it will actually show zero point whatever and then the other one is so that we can actually deal with zero so that if you type in zero and then you type in numbers after it it will not append those numbers to zero so let's build the initialization for the model RNA function is going to be a model type of course so here's our initialization model as you can see we're gonna make our display empty so it's an empty string my function is just an empty anonymous function our saved value is going to be zero and our append is going to be set to true by default now we need to make a function that allows us to convert the strings of the display into a float value this function is going to be called parsefloat it's going to take in a string and output a float now we're going to use this result dot with default because it allows us to set a default and the default is going to be zero so here we go we're converting the string to float and the input is going to be the value that we're converting to a float now the reason why we use this result with default is if we enter in say a plus or a minus or any other operator they will not throw this off instead it'll just count those as zero now to deal with our actual operators we need to make an operator function our operation function is going to take in the model it's going to take in one of our anonymous operation functions and it's going to output a model as you can see all we're doing is we're assigning the operator to our function in our model here we are changing the save value by parsing it from the model dot display so we're taking in the model dot display if there is one where partner is putting it through the parsefloat function and then we're giving it to save value field and then we're changing the append flag to false so that you can't add more numbers to this so those are our two helper functions now we're gonna get started with our update so here's our type message it's a union type it has none meaning if we input thing this is how it's going to handle it it has divided four divided times four times minus four minus ad for ad equal to get us the result of whatever operation that we put in there we have a decimal message which is going to allow us to deal with if you hit the decimal button on the calculator we have a zero message which allows us to deal with if you hit the zero button on the calculator and we have a number int message now this is going to allow us to render the number buttons for the calculator really easily as well as call these number buttons we also have a clear message which is going to allow us to deal with the Clear button on our calculator so let's write our actual update function as always our update is going to take in a message and a model and output a model our first case nun is just going to leave the model alone our second case is going to set the model equal to our init model the reason we want to do this is we want to basically reset the state of our entire calculator by hitting the Clear button our third case is going to take in an integer and it's going to call a function called update display that we will right after this and it's going to pass the model and number into it this is basically going to let us deal with our number keys on our calculator the next case is going to deal with decimals it's going to pass the model into a decimal function that we have yet to write our next case zero is going to pass the model into a zero function our next case divided is going to pass the model into the operation function that we wrote up here and it's going to pass calculator dot divided into the operation function as well and that's going to go for all of our operation cases now as you can see here we have all of our operators here divided times add and minus the only difference between these messages is which operator they're invoking and then we finally have another case for our equal and our equal case is going to send our model through an equal function so let's write our update display function to deal with this case here our update display is gonna take in a model and an integer and it's gonna output a model so here's our update display function update display functions taking model and number and if the append is true then we're going to pass the number into our model display or rather we're going to concatenate it onto the end of our model display so say for example our display is already showing one or two or a three and we input five then we're going to create 35 this number is converted to a string before it's passed our concatenated to the model display if model dot append is false the model is going to change the display to the number that we're putting in here as a string and append is going to be set to true so that we can then add more numbers to it afterwards now notice I'm using these pipe operators you can just wrap a number in parentheses and type to string before it if you want all this is doing is making things neater I like it that way but it's up to you whether or not you want to use them so the next function we're going to write is the equal function it's going to take in a model and it's going to output the model so here is our equal now our equal wants us to output what we've put into the calculator so for example if we have one plus two times six and we hit the equal button then we want to resolve all of these so what we're doing is we're going to create a calculate function which is going to allow us to apply the operators to whatever we have so first what's happening is if model append is true we're gonna take the display and we're gonna run calculate on the model we're gonna change the save value to our model display and we're gonna change a pen to false otherwise if a pen is already false then the model is just going to equal the calculate model and a pen is going to be set to false again so let's write our calculate function to better understand what's going on here so our calculate function is going to take in the model and output a string so our calculate function takes in the model then it finds the model function so the function that is being used by the model at the current moment then it takes the model last value and it applies that function to the last value and the model dot display which is whatever's in the display and then it converts all of this into a string so now we're going to write our zero function this is going to take in a model and output a model so here's how our zero function works it checks to see if our model display is empty or model dot append is false and if that's if that statement is true then it assigns the display to the string of a zero and it sets append to false if that statement is false however then it assigns display to model dot display concatenated with a zero so what this is allowing us to do is it's either allowing us to write 0 as a single digit number or it's allowing us to add 0 to the end of multiple numbers so for example if we put in a 5 first and we want to write 5,000 then we can hit 0 three more times and it'll write 5,000 now let's write our decimal function decimals taking in a model and outputting a model here's our decimal function it's going to check if the string is not empty so if the display is not empty and model append is true then or is not true rather then we can hit the decimal point and what will happen is it will pass the model display through appended decimal if all of this is not true then it will display a 0 and this is wrong it should display a zero with a decimal at the end so there we go it will display a zero with a decimal end and change a pen to true this way we can make decimals so we could do a zero point one three five six seven just by hitting the point instead of having to hit zero point whatever so now we have to write in a pen decimal function this is going to take a string and output a string now this function is of course appending our decimal to our number so if we already have a decimal in the display string then we're just going to display that string otherwise if there is no decimal then we're going to append that decimal to the end of the string so that's it for our model we have all the functions that we need to have a working calculator now let's create our view so the first thing for our view we need to make two functions we need to make one function to handle our small buttons and we need to make another function to handle our large buttons so we're going to make a function called calculator button which is going to take in a message in a string and output HTML message this is going to create a button element and as you can see the button element is going to have a class of button and it's going to have an on-click of the message that's being passed in here and then inside of the actual button element we're going to have a span element and inside that pan element we're going to have a text of the button text that's being passed to this operator so for example for our button one it's going to have one as the button text and on click it's going to allow us to invoke the number one message so now I'm going to copy that function I'm going to slightly change it for our wide button the only difference for this button is we're going to have a class of button Y so now we need to import our stylesheet so here's our style sheet function and we're using a wet in binding to create an HTML node with these two lists inside of it it's just going to be a node of tag type with the attributes inside the first list and then the child list as our second list let's write our view function our view function is going to in take a model and it's gonna output HTML and a message alright so here's what we have first we have one two three four divs the first div is going to be called calculator so it's going to surround everything and inside of it we're gonna link our style sheet then we're gonna have a div class of row a div class of Collin Excel 12 a div class of display and a div class of display text whoops which shows the text as a in the HTML text message then we're going to have a div class of buttons and inside this div class we're gonna have our buttons so here's what our Clear button will look like it's going to invoke the calculator wide button function and it's going to pass the message clear and then a string of clear into it here's what our numbers will look like as you can see we're passing the number seven message into this and then the string of number of seven into it four eight and nine it's the same idea for our divide message we're just going to pass the divided message in here and then we're gonna pass the string that looks like divide so now we just need to repeat this for the rest of our buttons so now we have all of our numbers in here and we have our divide times - and clear buttons now we just need our zero button we need our decimal button we need our equal button and we need our add button now here's our completed view we have all of our different messages being passed into here and we have all of these strings that go with those message being passed in here as well let's check and see what errors were having for our calculate function it was simply a Miss typed variable here for our update display function it had to do with our pipe because we had our pipe it was sending the model dot display plus plus to string into our our plus plus number into two string rather than just sending number into two string now it looks like everything else is complete so here's our calculator now let's see if it works so one plus three is indeed we can append numbers we can clear things if we hit the decimal it places a zero in front of it we can multiply things together we can divide things and we can subtract things it looks like everything is working out here I'm going to show you how to build this project so we run Elm - make on calculator Elm and we want our output to be HTML specifically we want it to be index ID HTML so here's our HTML file and inside of it we have the core of elm as well as our actual built elm project anyway guys I hope you enjoyed this tutorial feel free to subscribe to our channel feel free to like comment and if you didn't like anything feel free to throw up a dislike I'm currently going to probably end up doing a go-to toriel after this I have a vote going on on Twitter if you guys have any language that you'd like to see next feel free to comment hope you guys have a good day