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

FIXED THE ISSUE.

Turned out that I needed to INCREMENT display_screen.value:

Array.from(num).forEach(function(el){

    el.addEventListener('click',function(event){
        display_screen.value+=event.target.value;
    })

})

I want to ask can I create another post later and ask about adding my numbers if I run into any issues with adding? I don’t want this post to get TOO long and I have a different set of subproblems that I am dealing with in this project.

We prefer posts for the same project to stay together. This topic will allow you to review the progression.

okay. I will come back if I have a problem with adding two or more numbers together

Now I am working on a function for my calculator that clears the contents in the display of my calculator.

My browser console is telling me that reset is not a function even though I went to stack overflow and the users there said that reset was a function. Here is the code for this project:

clearBtn.addEventListener(‘click’,function(){
console.log(“Clear button works”);
clearDisplay();
});

function clearDisplay(){
let resetnow=document.querySelector(’.display_screen’).reset();
return resetnow;

}

Fixed that issue. Turns out that I should have set the display_screen.value=’ '; and put it in my clear button. Now onto getting the function to add.

1 Like

I am having issues with adding as many numbers as I want for my add function.(I have not worked on the functions for the other three operators just yet.) I am not sure what to do with the equals button. I made a switch stateent that gives users the option to choose which operation . Here is the link to the latest update for my code.

function add() {
  let total = 0;
  for (let i = 0; i < num.length; i++) {
    total += Number(num).value;
  }

  display_screen.value = total;
}

Think about what num is here. If you are not sure, you should add a console.log(num) before the for loop. What did you think you were doing?

It prints my NodeList when I display console.log(num).

So do I again need to convert the Nodelist into an array before looping through the values as I enter each numbmer

What are you trying to do with the add function? When a user clicks on the + button, where does the number clicked before the + button was click reside? Where are you storing the values entered? You need a data structure here. Like I said at the beginning, you need to think about what data you will need to store and how you will update and retrieve the data stored to use in your calculator. You should do this before writing more code. You need to write out the actual step by step process of what the user can do and what the computer needs to do based on the user’s actions.

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.