Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by vikas pal
vikas pal
11,563 Points

Please Help me to get this website work!

I have created a project on my own in which I want to let the user, to use the calculator on the website provided. I was able to make the keypad structure of the calculator, but now stuck in a problem.

That is how I will calculate the number? Please see the code from the below treehouse workspace fork and help me to calculate the result. I want you to capture the digits of the user by clicking on the digits provided in the keypad instead of typing.

You can also help me by making the CSS better.

The calculator will open when you click on the calculator field.

Here's the Treehouse Fork of this project:-- https://w.trhou.se/2w8ftzlphm

vikas pal
vikas pal
11,563 Points

Jennifer Nordell Ken Alger

vikas pal
vikas pal
11,563 Points

Steven Parker Guil Hernandez

1 Answer

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

:bell: Hi, I got alerted by your tag.

You seem to have a good start, but there's a bit more coding to be done.

To capture the digits, as you create the buttons, you could call "addEventListener" on each one to give it a function to handle the "click" event. Or, you could have a single delegated handler on the "space". Then, in that handler function you can store the digits and perform the calculations using the button label to choose the action. You still need to add an element to act as the "display" of the calculator where you can show the result.

And one suggestion for the CSS would be to add "cursor: pointer;" to the buttons to visually indicate that they are clickable.

vikas pal
vikas pal
11,563 Points

But how I store it in a variable. Say if a user click 7 and a 2 button to type 72 then how I am able to store it. How I store it in the ten's form.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

You have options, but one example would be if you had a global variable named "input", that started out as an empty string. Then, when one of the number buttons was clicked you could do something like this in the event handler:

  input += e.target.textContent;

Then when one of the operator buttons was clicked, you might do this to convert all the collected digits into a number and save that in another global named "operand":

  operand = parseFloat(input);
vikas pal
vikas pal
11,563 Points

But what when the number is a float? means we cannot use parseInt() on the input.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

To support floating point numbers you could use "parseFloat" instead. I've changed it in my previous suggestion.

vikas pal
vikas pal
11,563 Points

Yeah, but how I will know that what the number is? an integer or float to use the respective function.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

The "parseFloat" function will convert any number. You will not need a different function for integers.

vikas pal
vikas pal
11,563 Points

Oh! yeah, you're right. Thnks for your great help:-)