Okay so I built a calculator ui in pure html and css and now what to add functionality in vanilla javascript

maybe I should pass the display_screen.value input as an argument for the ADD function and the add the total to my display_screen.value input in a forloop?

What about the Array for storage you mentioned early on and Randell agreed was a good idea? I also suggest the array approach for your project as well. Like each button pressed added to the array and you can know all of the buttons pressed and eval them? So display_screen.value always equals the state of the database? Of course you’ll need some error handling to prevent things like [1 , 2 , 3 , + , - , 5 , / , * , 2 , . , . , - , 4]

Your html and CSS skills seem to be really good with what I see. And your basics of Javascript too! Have you thought about moving on in the curriculum? A calculator is one of the final projects for the Front End Certificate. It is more focused on using React, but would help you learn more :slight_smile:

Either way, we are here to help you learn on any path you want :slight_smile:

https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator

I don’t want to jump too hastily to the front end libraries yet until I done enough projects in html/css/vanilla javascript. even though I completed the exercises and completed much of the tutorials on udemy and youtube. I don’t think you fully become profficient in any languages until you done a c ouple of your own projects

So convert each button to an array like in the previous subproblem? Can you explain it using another example maybe . If not, then I understand.

I just did this project and it was super rewarding and a lot of fun to figure out the javascript. After doing it, I felt like I went from being very unconfident and clueless in JS to feeling like if I could break down a problem enough, I can do almost anything! That is probably not true, but doing this project made me feel this way.

My advice is this: follow the user stories one by one. First, figure out how you are going to display user inputted data on the screen. Next, figure out how you are going to store the user data in javascript so you can evaluate it later. Break the problem down into smaller and smaller problems, and solve those smaller problems, and a few days later, you will have a working calculator and you will feel awesome about yourself!

2 Likes

You are absolutely correct. Projects are 1000% better than lessons and videos. I only suggested it since you are working on a future project and to not have to do it all over.

You’ll want to have a “database” to store what is happening, like a master Array, when a button is pressed you can push the value to the database (array).

it’ll start empty, but as you press the buttons it will fill up. [ 1, + , 2 ]. when those all join together you can make your display.

For me personally, the end goal is to get a string that you can eval.

What was your thought process like when building this calculator? Did you plan everything out on paper? Did you watch videos on how to build a basic calculator?

I already figured out how to display my inputted numbers on the screen. Do you think there is any problems at all with how I displayed my numbers?

The numbers are appearing just fine, so that all looks great.

How are you going to store the user inputted data in Javascript?

I am going to store my input in an array.

What was your thought process like when planning out your javascript calculator? Did you look at other examples? Did you do a lot of googling for solutions? If you are uncomfortable sharing this, then I am sorry that I asked you.

1 Like

No that’s totally fine to ask. Here’s basically my stages:

I was stuck in “tutorial hell”, right, where I can follow along a tutorial, mostly understand what’s going on, but I was unable to make my own solutions. So for instance the React Markdown Previewer, I really relied on tutorials for understanding that.

I was getting my projects finished, but I didn’t feel like I “earned” it.

So for the calculator, I really wanted to sit down and figure everything out on my own. Here’s basically what I did.

At first, like you, I decided to look at code. However, I wasn’t good enough then to really understand the code I was reading. The other challenge is, when you look at other people’s FCC JS calculator project, then you realize that they are noobs like us, and their code may work, but it would be really hard to read.

This is something I am realizing, that the next thing I want to work on is making my code not only work, but very readable for people. But that is a tangent. Anyway, reading other people’s code wasn’t helping very much, so I just jumped back into the project.

I started with the tests, and making sure I was passing the ones I knew I could pass. For instance, a div with the id of “display” - that was easy for sure.

Eventually, I ran out of easy user stories, and that’s where I had to really think. The first challenging one for me was

" 9. In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit “=”, the correct result should be shown in the element with the id of “display”

Okay, so I had to think about the Javascript. I chose to store the user inputted data in an array, like you, and I felt like that was the right thing to do. But I had no idea how to turn that data into a formula, so I literally googled

“How to turn an array into a formula”

I found a page that talked about the eval() function. That was perfect! So I could tinker around with the “=” button, and I could eventually evaluate the array and produce a real number.

I kept doing this. Sometimes, my solutions would create new problems. I think debugging is a lot like the cartoon where there’s a hole in a boat, and the cartoon guy plugs it with his finger, and then a new hole appears, and he plugs that, and then a new hole… eventually your code will plug every hole.

Just keep at it. You will get there. The good news is that if you come out of this one with a calculator that meets all 16 user stories, you’re going to be a better programmer for it.

Just some more things that I did that will help you I think:
Google things you don’t know. Stackoverflow will have someone who has had a similar problem.
Don’t be afraid to return to lessons in the Front End Libraries section, or the JS section to go over something. We are learning so much every day that it can be hard to remember everything.

Think about what you want each button to do on the UI.

The plus button for instance, is it going to be the only thing displayed, or will you keep the numbers on screen?

All in all, my best advice I think is this:

Don’t jump into the Javascript and say “I need to write code for a fully functioning calculator.”

Write code that solves your current problem.

You already did this, you wrote code that displays user inputted numbers.

Now you need to write code that displays operators.

Next, you need to write code that evaluates those numbers based on the operators the user inputs.

Just keep breaking down your code piece by piece, and eventually you’ll have a working calculator.

Take your time. It took me three days before it was finished. You can do this.

1 Like

thanks for sharing.it helped me understand my own insights more.

I finally got the operation buttons to work.https://codepen.io/noblegas/pen/abzvjWO. Now I just need to add some functionality to my add/subtract/divide/multiply function. Before I proceed to add those mathematical operations to each of those function, does my code look feasible so far(I am NOT looking for polished and clean code atm, My primary concern is that my code works, whether it looks sloppy or not… at least initially.).

You are making good progress!

From what I see, yes it is still feasible to continue with the way you are going.

It appears that you are no longer using an Array to store each value and using the display_screen.value for all of the information. I think it will work out successfully and in your advantage with the path you are taking.

You extremely close to getting it to basic functionality.

What is your goal or code for when you press the equal button? Are you going the eval route?

Also, the Divide and Decimal appear to be missing the ops class when I checked the buttons.

Back after taking a hiatus from building a basic calculator in vanilla js. I try to just get my addition operation function to work, but I am running into some issues. https://codepen.io/noblegas/pen/abzvjWO