# Challenge: Four Function Calculator **URL:** \ **Category:** Arcade\ **Tags:** game\ **Created:** [August 12, 2020, 6:54pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091 "2020-08-12T18:54:39Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [August 12, 2020, 6:54pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/1 "2020-08-12T18:54:39Z")
@Dreadmask197 got me to thinking. When learning a new language, a typical exercise is to create a four-function calculator. I thought it might be an interesting exercise to build one in MakeCode Arcade. So, I’ve created a skeleton: > **[Four Function Calculator](https://arcade.makecode.com/13218-86635-31791-16106)** > > Made with ❤️ in Microsoft MakeCode Arcade. The challenge now is to write the event handler for the **A** button. It’s a four-function calculator, so you don’t need to worry about order of operations or anything like that. Just collect digits and assemble them into numbers (that’s your first challenge; I can think of a couple of ways to accomplish that) and then deal with the operators as they are selected. Use the `outputSprite` (the duck) to `say` your output. This isn’t an easy challenge! You shouldn’t need to switch into JavaScript, although you’re welcome to do so if that’s easier for you. This project uses both my Grids extension[1] and the _excellent_ Sprite Data extension[2] from the MakeCode team. I’ll post a completed solution later…and maybe some hints along the way. Have fun! * * * [1] [Grid extension](https://forum.makecode.com/t/grid-extension/282) [2] [https://arcade.makecode.com/pkg/microsoft/arcade-sprite-data](https://arcade.makecode.com/pkg/microsoft/arcade-sprite-data) [See all of my MakeCode Arcade games and extensions here!](https://sites.google.com/site/akulcsarsite/makecode/makecode-arcade) ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [August 12, 2020, 8:57pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/2 "2020-08-12T20:57:35Z")
@AlexK thank you for the challenge and this got me thinking about the Simon Says game you made using Functions with parameters. Can you give a simple example of using functions with parameters to get a better understanding of how to apply to a game like Simon Says or possibly this challenge! Thank you as always! ---
**Author:** ![techahoynyc](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/techahoynyc/32/1023_2.png) [@techahoynyc](https://forum.makecode.com/u/techahoynyc)\ **Post date:** [August 12, 2020, 9:52pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/3 "2020-08-12T21:52:19Z")
Think I got it - only single digit operation at the moment. > **[Four Function Calculator](https://arcade.makecode.com/44577-70077-18146-24236)** > > Made with ❤️ in Microsoft MakeCode Arcade. Nice challenge! I tried to use as few blocks/variables as I could. ---
**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\ **Post date:** [August 12, 2020, 11:23pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/4 "2020-08-12T23:23:54Z")
Woah AlexK! This is great. I usually get bored and just thought of a calculator. Challenges are just the best though. Thanks @AlexK ---
**Author:** ![LcAtonal](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/lcatonal/32/16800_2.png) [@LcAtonal](https://forum.makecode.com/u/LcAtonal)\ **Post date:** [August 13, 2020, 3:35am UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/5 "2020-08-13T03:35:30Z")
I was thinking something like this ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [August 13, 2020, 9:27pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/6 "2020-08-13T21:27:24Z")
Great question, @rymc88 ! We write functions for a few reasons. Two reasons come to my mind right away: - We find that we’re writing the same code over and over again. - We know the basic steps of an algorithm and want to use functions to represent those steps. When we’re first learning to program, we typically write functions because of that first reason. Chapter Eight of my book is called “Better than right-click-duplicate”[1] because functions definitely are better than right-click-duplicate in MakeCode when you can use them! 🙂 So, let’s take a look at how I built the skeleton for the calculator. If you’d like to follow along, then open this project: > **[4fn Calc Start](https://arcade.makecode.com/22928-45736-01946-42401)** > > Made with ❤️ in Microsoft MakeCode Arcade. My code started like this: ![arcade-screenshot](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/d/d5ef2e9916d3884d561d3cf8854e1c5719475db4.png) Notice that I haven’t built any functions yet, because I’m not entirely sure how they need to look. It’s a little more obvious, though, when I add the code for the next button. I’ve added `console log` blocks just to help separate the blocks. ![arcade-screenshot (2)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/e/efd595f31e39f189d4b515ba8c0778f6620c15c7.png) If we look at those two sets of blocks – the blocks we used to create the _zero_ button and the blocks we used to create the _one_ button – it’s pretty obvious that those sets of blocks are _nearly_ the same. This is a great candidate for a function, especially since I need to create eight more digits! So, that’s where I start: I move the blocks for the _zero_ button into a function: ![arcade-screenshot (3)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/5/5ba38b441d1a53f891cc1e9bbbda9eda194d4bd0.png) First thing: I should make the variable in the function more generic. It’s not that important, but it helps convey meaning a bit better. I’ll call it `digitSprite` instead. Notice that I haven’t created any parameters for the function yet. I simply moved the code over to the function. Now, take a look at the code used to create the _zero_ button and compare it to the code used to create the _one_ button. What is _different_? - The image for the sprite is different. - The row and column for the location of the sprite are different. - The value for the sprite is different. These differences, then, are what we will use for the parameters. We need this information for each sprite in order to build it. Right-click on the function and select **Edit Function** from the context menu to create the parameters. Our code now looks like this: ![arcade-screenshot (5)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/f/fc6438231f80c7cdf48466deb6f0a897459508e8.png) Now that we’ve created the parameters for our function, we need to use them. Drag the placeholders from the function header to their appropriate locations in the function’s code. Our code now looks like this: ![arcade-screenshot (6)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/1/1d7760cb3f3b075ab94774a63341cfba68ede3d5.png) Now, let’s call our function so that it can build the _zero_ button. BTW, you can find an empty image in the **Advanced** section of the toolbox, in the **Images** category. ![arcade-screenshot (7)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/b/b658aba7ea4e856ef9f60863113f2c4d9a67dbd9.png) Now, we can get rid of that duplicate code for the _one_ button and replace it with an appropriate function call: ![arcade-screenshot (8)](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/6/6872dd159b4233e3cfd2ec0d5b413fe016b01cb3.png) Now, when we create the other eight digits, we only need to add one block of code for each button! That’s a great way to start to use functions in your own code. Look for blocks that you’re duplicating over and over again and create functions for those repetitions. It’s not always possible to do so, but when it is, it makes your code easier to read and easier to maintain. * * * [1] You’re getting ahead of me, @rymc88 ! I’m just getting started on writing Chapter Three! 😃 ---
**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\ **Post date:** [August 13, 2020, 10:06pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/7 "2020-08-13T22:06:39Z")
Nice work, @techahoynyc ! It looks like you’re comfortable with the **Text** blocks in MakeCode, so if you want to try to handle multi-digit values, you could try building strings (just tack the new digit onto the end). For those of you who are comfortable with the arithmetic, you also could try to come up with a formula for adding a digit to an existing number. (Hint: Think about place values.) Good job! ---
**Author:** ![techahoynyc](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/techahoynyc/32/1023_2.png) [@techahoynyc](https://forum.makecode.com/u/techahoynyc)\ **Post date:** [August 13, 2020, 11:17pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/8 "2020-08-13T23:17:27Z")
Multi-digit (string concatenation to number conversion) > **[Four Function Calculator](https://arcade.makecode.com/74223-18134-93605-01767)** > > Made with ❤️ in Microsoft MakeCode Arcade. Again, good exercise @AlexK! ---
**Author:** ![rymc88](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/rymc88/32/13577_2.png) [@rymc88](https://forum.makecode.com/u/rymc88)\ **Post date:** [August 14, 2020, 1:43pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/9 "2020-08-14T13:43:37Z")
@AlexK This is a great explanation and I appreciate the help! I am looking forward to the book! ---
**Author:** ![JASON-KLEINSCHMIDT](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jason-kleinschmidt/32/16059_2.png) [@JASON-KLEINSCHMIDT](https://forum.makecode.com/u/JASON-KLEINSCHMIDT)\ **Post date:** [June 23, 2024, 7:01pm UTC](https://forum.makecode.com/t/challenge-four-function-calculator/3091/10 "2024-06-23T19:01:33Z")
> **[calculator](https://arcade.makecode.com/S36747-10859-24007-71738)** > > Made with ❤️ in Microsoft MakeCode Arcade.