TLDR: Here's a thing I made.

The Task

Hello, welcome to my blog. Thank you for joining me here.

So I read this chapter from https://javascript.info/ last week and one of the tasks at the end of that chapter is shown below: I ignored the stipulation about the exponent having to be an integer greater than 1.

I decided to put my try-hard pants on and see if I could make a simple web app that would complete this task and print the result to the DOM(document object model, basically the rendering of the HTML and CSS on the page). Within this post, I am only going to discuss the JavaScript, not the styling of the app.

Breaking Down the Task into Pseudo Code

Let's skip ahead a bit and pretend we already have the HTML and CSS finished and we are happy with how it looks, now comes the JavaScript. So JavaScript is what is going to take this boring app and make it dynamic and make it do the thing that I intend to have it do. The first step to good JavaScript is pseudo code.

Pseudo code is where the programmer breaks down a complex problem into actionable steps. Pseudo code is only for the programmer or other human readers, not for the computer itself. Another benefit to Pseudo code is that it will help you understand your thinking when you come back to your code at a later time, this is especially helpful if you have a lot of code or if your code is complex.

So back to the task at hand. The problem, again, was to take a base and an exponent as input from the user and return the result of applying that exponent to the base. I am really into DOM manipulation lately, like the fact that I can dynamically update what a user sees on a webpage is cool to me so I decided to have this app print the result to the DOM.

Below is my initial pseudo code:

//click event on button
//get the base and exponent from the user
//function that does the calculation to get the answer
//print the answer on the DOM

There we go, four actionable steps that, once complete, should give me my desired result.

Writing the Actual Code

Now that I had my pseudo code laid out, it was time to write the actual JavaScript.

I decided to write my code in the same order as my pseudo code, so I started with the event listener on the button.

//click event on button
document.querySelector('#run').addEventListener('click', run)

What I am doing here is telling my program, "Go to the document and select the thing that has an ID of 'run' and listen for a user to click on this thing. When the user does click on this thing, please run the function called 'run'." (you don't have to say 'please' but I do because I figure if I am nice to my JavaScript, then it will be nice to me).

Okay, now I have a thing that is listening for a click on my '#run' element. Next, I need to get the base and the exponent from the user.

function run(){
  //get the base and exponent from the user
  const base = document.querySelector('#base').value
  const power = document.querySelector('#power').value
}

Within the function 'run'(which would be called when the user clicks the '#run' element, as mentioned above) I am getting the values that the user types in for the base and the exponent. I essentially did the same thing as above to get them. I went into the document, looked for the element that has an ID of 'base'/'power' and got their value(what the user typed in). I store them in a variable so that they don't poof disappear right away and I can use them later(spoiler alert).

  //function that does the calculation to get the answer
  const answer = base ** power

This next part was within the same 'run' function and was used to do the computation of raising the given exponent to the given power.

  //print the answer on the DOM
  document.querySelector('#result').innerHTML = answer

The last thing I needed to do was to put the result on the DOM. I did that by grabbing the element with an ID of 'result' and making its inner HTML be the answer that we got from the calculation above.

Final Thoughts/Improvements

All in all, this was a pretty fun little project and inspired me to take on a slightly larger project. I am currently an 8th-grade math teacher and completing this exponent calculator showed me some of the possibilities of combining JavaScript with 8th-grade math. I decided to try to teach 8th-grade math to JavaScript. I haven't done much with it so far but you can see my progress here.

Thanks for reading, I am going to try to be consistent posting here about once every two weeks or so, so be on the lookout for my next post around early March.