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

I am not asking you to HELP me build this functionality for my calculator UI. I am asking you would do to research about how to build the functionality for a basic desktop calculator if you did not have a clue about how to build the functionality of the basic desktop calculator. Would you ever go to stackoverflow and look at the functionality of other basic desktop calculators that others have build?

I would start by testing out a hand-held calculator or an online calculator and see what functionality it has and then think about how to emulate that functionality.

Would you look at the code for an online calculator?

No, just see what types of operations you can perform on the calculator, create a UI for the calculator by thinking through the steps a user will need to take to make certain calculations (i.e how would a user add to numbers using your calculator). Those would be the same steps you would use if you were using a hand-held device or online calculator.

I have now added button and operations classes to my project. I now want to know if such button classes and operations ids are feasible in aiding me in making my calculator :add, substrate, divide and multiply. I want to add/subtract/divide/multiply more than two numbers. My main go is not to find the most elegant and effective solution at the moment; my main goal is to get my code to work.

You will need to think about how you will capture what buttons they click and build logic to handle how to take the values and create a calculation from them. You will need away to store multiple values and operators (like the addition operator). Think of a data structure you have already learned about that could hold these and then think how your would access them to create the calculations.

You mean a data structure like an array?

Yes, that is a good one to use for this project.

Sorry I know I said I wasn’t going to ask anyones help with the project, but I am kind of struggling with this now. I didn’t create a new post because this post is related to me topic.

I incorporated your suggestion and added the array to my project. I was trying to get my numbers to display on my caluclator , but so far I have not been able to get any number I type to display on the screen of my calculator.https://codepen.io/noblegas/pen/abzvjWO

Here is a start to get you moving forward. Your current code is:

var button=document.getElementsByTagName('button');
button.addEventListener('click',function(){
    add();
});
function add(){
    var total=0;
    for(var i=0; i<num.length;i++){
        total+=Number(num[i].value);
    }
    display_screen.innerHTML=total;
}

your button variable is an Array of all the buttons. There are 17 total that you have.

var button=document.getElementsByTagName('button');
button[0].addEventListener('click',function(){
add();
});
function add(){
    display_screen.value='test';
}

I altered your code to show getting the display to update. This adds the ‘click’ event to button[0] or “Clear”. display_screen.innerHTML was changed to display_screen.value because there is no html inside of the display (it’s an input currently).

With this change, if you press clear the display will change to ‘test’

Play around with trying to pass the button pressed information into this.

There are many ways to make a calculator, and with all projects making them is the best way to learn.

My best suggestion is that if at any point you feel the need to write out all 17 buttons to be unique, take a step back and look into other options and Array Methods. Imagine you had 1,000 buttons :slight_smile:

Hope this helps without any spoilers, happy coding!

I changed by ids from 17 buttons to five buttons that I would be using for my code. https://codepen.io/noblegas/pen/abzvjWO

I also changed it so that when I press a particular button, the number on the button I press should display that numbere, but that isn’t the case.

Here is another hint:

“The Document method querySelector() returns the first Element within the document” … I’m thinking you want to select All of them.


(note the “Return Value” content)

You are on a good approach with making all of the buttons click with a loop:

for(let i=0; i<num.length; i++){
     num[i].addEventListener('click',function(){
         display_screen.value=num.value;
     })
}

But, num.value is going to be undefined since num is an array of all the buttons … num[3].value for example should be valid

Thanks. I’ll work in this for a while and if I am still stumped, can I still ask for help?

Absolutely. Just keep posting your progress with updated codepen example here or start a new topic with how you are stuck and I’m sure someone will take a look.

Happy coding!

I been working on this issue for quite a while and yet can’t seemed to fix the issue. Everytime I click on one of the number buttons on my calculator, the word ‘undefined’ displays instead of the actual number. Like everytime I click the button “7” or the button “2” and so on, I get “undefined” instead of a 7 or a two.

I realized that my querySelectAll tag( I think ) is a NodeList and since I cannot iterate over a Nodelist , I need to convert it to an array.

So I did that but instead of getting the “undefined”, I get “[object HTMLButtonElement]” in the display screen of my calculator.

Updated my function yet again. I added this function and I still get the ‘undefined’ result:

"//Covert NodeList into an array
Array.from(num).forEach(function(el){
for(let i=0; i<el.length; i++){
el[i].addEventListener(‘click’,function(){
display_screen.value=num.value;
})

}

})"

@noblegas87 The following line is a problem:

display_screen.value=num.value;

Remember that num is a NodeList of buttons and not a single button, so trying to reference a property named “value” on the entire collection does not work. That is why you see undefined. Think about how you can easily reference the current button being clicked instead of the entire collection of buttons.

updated the code to include an event.target.value and I am still getting undefined in the display screen.

I somewhat fixed the issue and by removing my forloop and now my function looks like this :
//Covert NodeList into an array
Array.from(num).forEach(function(el){

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

})

It doesn’t display ‘undefined’ anymore and displays the numbers on the buttons that I clicked on. The problem is now, when I press any number, it doesn’t continue to add that ad more on those numbers on my screen as I continue to press that button. Like when I press 7 fivee times, I should see ‘77777’ across the display screen.

That is correct. Why? Because your code says “When you click on this button, display the value of the button in the screen”. It is only going to show the current button.

You need to step back a bit and think about how you will collect all of the buttons clicked. I mentioned this before and we both concluded an array was the best choice here. How could you use an array to store the buttons clicked and then display the applicable array contents (depending on which button is clicked).