March Challenge - Calculator

With the exception of the button bar, all of the other buttons are represented by a row in a Buttons sheet. Each row uses a Single Value column to pull in the number that’s on the screen from the main driver sheet. Then I use a template column to join the Single Value column to the value of each button. When a number button is pressed, it uses the set column action to write the template column value, through a relation, back to the driver sheet. That updates the single value column in the buttons sheet so it’s ready to append the next number. There’s some other logic to handle the math operation buttons (+, -, /, *, =), but all of that is handled through a custom action with a handful of If/Then/Else logic.

3 Likes

@Jeff_Hager you keep raising the bar. Give us a change. Well, no. Keep going. I really like it👍

1 Like

Wow no CSS. That’s mindblowing!

You are probably using a lot of if then else compound actions?

Also what’s the component that’s displaying the text? It doesn’t look like hint text. Is it some HTML on rich text if not CSS?

1 Like

What an interesting challenge, I commend you for putting this together and for sharing.

I must say it is impressive how it has turned out and a credit to you.

Functionality and design it is spot on - it really is a calculator.

Exercises like this demonstrate how far glide has come in the last year.

:+1:

1 Like

OK, I will have to take back my statement about using no CSS. I did put it a small amount last night.

<pre><span><style>
[data-test="app-text-box"] 
{
     background-color: lightgrey;
     margin-left:16px;
     margin-right:16px          
 }
</style></span></pre>

The display is just two Text components that are right-aligned. The top one is uses the Headline 1 size, and the second one uses a Headline 2 size. The CSS just applies a background color to those two text components and sets a left and right margin so the background color doesn’t go all the way to the edge of the screen.

The custom action behind the main list buttons has 10 If/Then/Else paths. All doing various forms of the Set Column action through a single relation to the driver sheet. So each path only has one Set Column action except for a couple that also write to the History sheet when certain buttons are pressed.


6 Likes

im looking a calculator too! thanks Jeff!

1 Like

@Jeff_Hager I’m trying to get into the challenge - and it is a challenge. Maybe you can give a hint how you can have a result with 10 decimals when glide doesn’t allow more than 5 when doing calculation. Do you multiply the figure and do decimals number from that number.

That was actually the unintended result of using an If/Then column when getting the result of a math column. It appears that the IF column pulls in the raw number without any formatting, so it retains the full decimal value. The only downside is that I lose the ability to have a grouping separator to the left of the decimal value.

Ideally, I wish glide gave us a little more flexibility on the formatting of numbers, like an unlimited range of decimals, but as a workaround, I suppose a person could maybe take that number, and through some math columns, split it out into separate values for the left and right side of the decimal, format the left side with the grouping separator, then merge everything back together. Kind of ugly, but definitely a possibility. Might be something I’ll have to think about.

I’ve also been thinking about changing the display from text components to rich text components, then doing the formatting manually for right align and text size. What I want to do is display the math operation (+,-,*,/) in a different color.

Also debating if I want to attempt some of the other math operations, like log, sin, csin, etc. We’ll see. :wink:

4 Likes

@Jeff_Hager I knew it - you keeps raising the bar. Thanks for the info :slight_smile:

2 Likes

I like to keep fine tuning things. I’m never done.

1 Like

@Jeff_Hager another question to help me through the challenge. When you a decimal number like 1.000. How do delete the last digit so it becomes 1.00. We don’t have substring. Do you some crazy if then condition? Maybe you want to help me out?

@Jeff_Hager actually I’m only working in the decimal part I.e. 000 has to become 00. Tricky.

Did you sell your app template or did you mind to share for copy ?

Ahh, that part was tricky, and took me awhile to figure out. Currently I don’t do any separating of the number to the left and right of the decimal. At first I was trying to figure out do to remove a digit mathematically, but the problem is you have no easy way of know how large the number is, especially with a decimal, to know how much to multiply by, round, then divide again.

Instead what I discovered was a really easy solution, especially since we only have a handful of different characters to work with. What I did was create a template column that takes the number and appends an ‘@’ symbol to the end of it. Then I created a second template column that replaces each number+@ with a blank (null) value, which in essence, deletes the rightmost character. In my example, I probably should have done this elsewhere because it only needs to be done for a single row, but I think you get the idea.

With that second template value, my back (delete) button takes that value and overwrites the original value, so it ultimately removes the last character.

4 Likes

@MonsterGo Mentioned in the original post:

1 Like

@Jeff_Hager thx a lot. I was thinking along that path - but I just couldn’t figure it out. I hope soon to have my version ready :wink:

1 Like

Looking forward to it!

1 Like

@Jeff_Hager I have been working to get the basis running. And it is pretty much there - still quite a few things to do. I will also need to do my own adjustments to make the calculator stand out (basically right now it is a copy of yours - I do hope you are not offended by that) - but actually I think it will be quite interesting for me (and maybe others) to dive into the two apps and see how we have solved the same problem.

It has been a great help to see how the calculator could look like by watching your app.

And as of now - thanks for the help you have given me until now. It has been invaluable.

NB: I was very supprised to see how many variables that I have needed and how many conditions in compound actions that I have needed to create.

(i wonder why the description text doesn’t update when reinserting into this text box?)

10 Likes

:clap:

1 Like

Looking good! I agree, once you start to dig in, the number of variables and conditions really start to add up. There’s a lot of different scenarios you have to account for.

I few things I’ve learned in the process:

  • We really need more robust condition checks. This all “ANDs” or “ORs” thing honestly makes the process a whole lot more complicated in the long run when you need to add additional conditions and strategically place them in the correct order just to work around the restrictions.
  • We really need some string manipulation functionality, like substring, pad, trim, length, etc…and a better split function that actually let’s us access and use individual values in the resulting array.
  • I would love the ability to dynamically build a math formula in a template, then run the calculation on that template. With the current functionality I have to basically perform all possible calculations and then pick which one to use based on the math operation the user chose. It would have been a lot easier to just build out the formula and use the dynamically built formula in a math column. That would allow for much more complex math formulas that follow proper PEMDAS.

It’s definitely a good exercise in problem solving when you’re trying to figure out some of this stuff. It also proves that almost anything is possible in glide with some work, although I’m starting to reach the point that I could have probably done a lot of this stuff with actual code a lot quicker than with no-code.

9 Likes