Build a Basic Calculator 🧮

[nunyvega]

Objective

Max, let’s build a basic calculator that can handle addition, subtraction, multiplication, and division. We'll break this down into baby steps so it's easier to tackle. Aim to complete one step at a time, and feel free to ask questions anytime.

This is how it should look:

Task Breakdown

Step 1: Setup HTML Structure 🏗

• [x] Create an HTML file with the necessary structure.
• [x] Add input fields for two numbers.
• [x] Add buttons for each arithmetic operation (Sum, Subtract, Multiply, Divide).

Step 2: Link a JavaScript File 🖇

• [x] Create a JavaScript file.
• [x] Link this file to your HTML.

Step 3: Create Basic Arithmetic Functions ➕➖✖➗

• In your JavaScript file, define four functions: one for each arithmetic operation. The functions should not have parameters because we'll get the values from the number inputs with getElementById().value (you may need to convert this value to a number).
• [x] sumar() for addition
• [x] restar() for subtraction
• [x] multiplicar() for multiplication
• [x] dividir() for division

Step 4: Collecting User Inputs 📥

• [x] Get values from the two input fields and ensure they are numbers.
• [x] You can assign each input value to a variable.

Step 5: Connecting Buttons to Functions 🖱

• [x] Add onclick property to each button and ensure it calls the function. You can test by console logging.

Step 6: Displaying Results 🖥

• [x] Create a paragraph element in your HTML to display the result.
• [x] Modify each arithmetic function to output the result to this paragraph element.

Step 7: Testing and Debugging 🐞

• [x] Test your calculator thoroughly to make sure every part is working as expected.
• [x] Debug any issues or errors that you encounter.

Notes 📝

• Try to complete one step at a time.
• Ensure that each part is working before moving on to the next step.
• Avoid having code that you do not understand. GPT/Google/myself are here to help you understand.
• Don’t hesitate to ask for help if you get stuck.

Happy coding 🚀

[ByteBiteChef]

Thanks, I'm gonna get this done today!

[ByteBiteChef]

The first three tasks were completed here: https://github.com/ByteBiteChef/ByteBiteChef.github.io/commit/8cbb38d52b0d42398a8b2f6303f5731a08ede310

[nunyvega]

Nice! I can see it's already live at: https://bytebitechef.github.io/Calculator/calculator.html

[ByteBiteChef]

Step two is completed!

[nunyvega]

Looks good! I can see the results being logged to the console.

For one of your next steps, we did not discuss this too much, but you need something like:

// Add result to your div
document.howeverYouSelect('selector').innerHTML = calcResult

[ByteBiteChef]

Well, I just finished my first calculator program! I tested the code and everything looks great, thanks for the challenge!

You can check it out on the link below: https://bytebitechef.github.io/Calculator/calculator.html

[nunyvega]

Maravilloso! Fantastic job on completing your first calculator program 🚀

About your comment:

You can check it out on the link below: http://127.0.0.1:5500/Calculator/calculator.html

I noticed that the link you’ve provided is a local address (http://127.0.0.1:5500/Calculator/calculator.html). This address points to a server running on your own computer, which means that only you can access it from your machine. It’s like having a private stage where you can rehearse and see everything in action before the actual performance.

For sharing your creation with me, or anyone else, you’ll want to use the live website link where your project is hosted. Your project is actually live and accessible to the world at bytebitechef.github.io. This is the public stage where everyone can see and appreciate your performance once you push your code ⬆️

Let's take this moment as an opportunity to add the calculator to the menu of your website. Please complete this task before we mark this project as done:

• [x] Add calculator to the menu of bytebitechef.github.io

[ByteBiteChef]

Thanks, I just put the right link in the comment.

Also, I added the calculator to the menu of my website.

Cheers!

[nunyvega]

Sounds good! We can now move on to the next task, a TODO list: Your second project - A TODO list 🗒️

As a note, normally. when an issue is resolved/completed (like this one), you close it with this button:

Feel free to do so!