So....I made a Calculator(Sort of)

When you graduate a bootcamp it is easy to think that all you need to do is find a job. That could not be further from the truth. That's the time to start doubling down on what you've learned and keep yourself busy with learning MORE about the languages you spent time learning while in bootcamp or even start to learn another language if that's more of your aim.
I've been struggling to code simply because I find it hard to think of cool ideas to try my hand at. Recently, I got an idea to help push me towards the goal of coding everyday. Instead of trying to make one large application, why not work on many small things that require code?

That's exactly what I did. I created a repo that I could make all sorts of things in. So far I've been practicing the basics like a button that changes the background color. I've even made an RPG party assigner of sorts. The possibilities are kind of endless.

The most recent idea I got was to make a sort of 'calculator'. Its very basic...and maybe even useless to some, but I made it AND got it to work the way I intended. Let's dive in and I can show how I ent about it.

<p> 5. Weird Calculator </p>
  <div id='addition'>
      <form id='math-form'>
        <input type="number" id='num1'/>
        <input type="number" id='num2'/>
        <button onclick="addItUp()">Sum!</button>
      </form>
      <div id="total-section"></div>
    </div>

This code gives me a form that has two inputs. Both of the inputs are given the type of number. These will be the numbers that get used in the equation, in this case an addition problem. We also have a button that when pressed will cue a function called 'addItUp'. On a normal calculator this could be considered the + button. Also we have an empty div that will display the answer of the problem when the button is clicked. With that HTML out the way we can take a look at the script that will be run on the press of the button.

const mathForm = document.getElementById("math-form");
let totalSection = document.getElementById("total-section");

mathForm.addEventListener("submit", (event) => {
  event.preventDefault();
  let num1 = Number(document.getElementById("num1").value);
  let num2 = Number(document.getElementById("num2").value);
  if (num1 && num2) {
    totalSection.innerText += `The total is:` + addItUp(num1, num2);
  }
});

const addItUp = (num1, num2) => num1 + num2;

Using an event listener on the form, a submit is being listened for. Upon the submit, the default action of the page refreshing is prevented. Next, we take the values within the input spaces and set them to variables of num1 and num2. Since the inputs are still read as strings, I used the Number() function to turn them into a number, avoiding the two strings being added together. Finally, I used an if statement to update the text within that once empty div, given that two numbers exist in the inputs. That empty div will provide the sum of whatever the addItUp function yields.

It was a fun project to work on and I'm considering working on refactoring the code as well as using other buttons for subtraction, multiplication, and division. If you've struggled with coming up with ideas to practice on, I really recommend that you try doing something like this to get the ideas rolling.

I hope it helps you like if helped me and as always....Happy Coding.