Samwise Burgett

freecodecamp.com tutorial

**This is not meant to be a tutorial or a guide on how to complete the tutorial. This is just my thought process and notes as I go through the steps myself.**

Very interested in this one because I think it’ll help with some of the ideas I have for the future (like accounting adjacent stuff). Going to try to keep it brief this time, maybe only touch on the steps that I have to think about.

First step is to generate cells for the spreadsheet. I will use the window object to create containers (divs) when the page loads with the onload property. There is already a div in the HTML with the ID of “container.”

window.onload = () => {
  const container = document.getElementById("container")
}

Nested functions are great for when a function needs to reuse logic. I will use a nested function inside of the above one to create new div elements on the page.

Inside of the nested function I will also assign a class name to the new div by using .className and change the .textContent of the new divs to be the value of the name parameter. Lastly, the div will be appended to the container element (which is a different div). Because all of this is inside the .onload event, it will happen as soon as the page loads.

window.onload = () => {
  const container = document.getElementById("container");
  const createLabel = (name) => {
    const label = document.createElement("div");
    label.className = "label";
    label.textContent = name;
    container.appendChild(label);
  }
}

Next I need a function to generate a range of numbers (called range). I will do this using start and end as parameters, and the Array() constructor to return an empty array. The .fill() method is used to fill the array with the start value. Then the .map() method is used to iterate over the array and transform each element in the array according to the given function. In this instance I will be using element and index as parameters, and add them together to get the new element value to put in the array.

const range = (start, end) => Array(end - start + 1).fill(start).map((element, index) => element + index);

This same function pattern can be used to create a range of letters. The start and end parameters in this function, however, will be letters. (I am thinking this is going to be the letters going down the side to designate the cells. It would have been nice if they explained what we were doing before telling us to do it).

To do this, the .charCodeAt() method is used. This method returns a Unicode number that should correspond with the letter that is needed. A 0 is used as the argument. This will be added to both start and end.

As before, range() will return an array of numbers, which will need to be converted back into characters. The .map() method can help with this. It will be chained to the range() function call and have a callback function with String.fromCharCode() in the body. This method returns a string from a sequence of Unicode (UTF-16) values.

After that, I assign the charRange() function to the the variable letters with the letters A and J as arguments. This causes the browser to display the letters A – J across the top of the page with the addition of some pre-written CSS.

Calling letters.forEach(createLabel) will call the function createLabel() that is nested inside of the window.onload event. This nested function is the one that creates the divs for the document. The range() function returns an array, so array methods can be chained to it. Then we do a similar process for the numbers that would typically be found across the left-hand side of a spreadsheet.

The next step was asking to create an input element and set the type and ID. Creating the element was easy, but I was unsure of the syntax for adding the type and ID. I tried input.type(“text”) and that wasn’t correct (at least according to the exercise, maybe it is an alternative way to do it, unsure at this point). I also tried input.setAttribute(“text”) which didn’t work (also unsure if this is an alternative correct way to do it). I tried setAttribute() for ID as well but it didn’t work that way. The exercise wanted the following:

    letters.forEach(letter => {
      const input = document.createElement("input");
      input.type = "text";
      input.id = letter + number;
    })

The next step explains the syntax that the previous step wanted so I’m wondering if they edited the steps and should have put some of the instruction that’s in 18 on step 17. All they’re asking in 18 is to set the aria label (very important for screen readers), and then after they ask to append the input element as a child to the container div.

Working on built in functions for the spreadsheet to add numbers together etc. Must remember that .reduce() requires a callback function with two parameters, and ideally a starting number (at the end).

const sum = (nums) => nums.reduce((nums, currentValue) => nums + currentValue, 0);

Next I will use the sum() function in the newly created average() function to find the average of the array:

const average = (nums) => sum(nums) / nums.length;

I had a bit of trouble with .slice() and .sort() again.

onst median = (nums) => {
  const sorted = (nums) => nums.slice().sort((a,b) => a - b)
}

I had an extra arrow function that wasn’t needed.
This is the correct way to do it:

const median = (nums) => {
  const sorted = nums.slice().sort((a,b) => a - b)
}

The next part I need to use a Ternary to check if the length of the array is even or not. I always think Ternary operators are cool, not sure why. Maybe it’s the simplicity. Anyway, this is another one I was having trouble with. There are a lot of variables that need to be passed into the correct areas and since I still don’t have a full grasp on referencing indexes in arrays, I think that’s why it was a bit confusing for me.

Normally this would all be written on one line but I wanted to explain the parts and it was easier to do on different lines.

return isEven(length)     // this calls the isEven() function and passes the variable length as the argument
? average(sorted[middle], sorted[middle +1]     // this one calls the average() function and passes in the sorted array with the index calculated with the *middle* variable if isEven(length) returns true
: sorted[Math.ceil(middle)]     // the last part takes the value from the *middle* variable of the sorted array and rounds it up using Math.ceil.

All on one line it would be:

return isEven(length) ? average([sorted[middle], sorted[middle +1]]) : sorted[Math.ceil(middle)]

I was going to try to just do one tutorial per post from now on, but I’m having a not so great mental health day so I think I’m going to stop for now. Hopefully tomorrow is better.

Building a Statistics Calculator (Step 21 – 27)

Freecodecamp.com Tutorial

**This is not meant to be a tutorial or a guide on how to complete the tutorial. This is just my thought process and notes as I go through the steps myself.**

As a reminder, I am working to find the median of the array next. I’m going to be using the modulus operator to check if the array’s length is even or odd. This is a simple expression that divides the number I want to check (in this instance, the length of the array) by 2. If there is a remainder, it is an odd number. If not, it is even. To clarify, modulus divides the numbers, but it returns the remainder, not the result of the division. So you’re just checking for 0 or 1. Examples:

// check if array length is even
arr.length % 2 === 0;

// check if array length is odd
arr.length % 2 === 1;

In the project I’m building, I’m going to create an isEven variable that uses modulus to check if the length is an even or odd amount, and obviously I will use the expressions shown above. Evaluating the expression will return true or false.

To get the middle number of an array with an odd amount of elements, I will need to do a few things. First we need to get the number of elements of the array by using testArr1.length.

Once the length of the array is known, the next step is to divide it by 2 to get to the middle. A length with an odd amount of elements will return a decimal number, so Math.floor() will need to be used to change that decimal to the nearest integer less than or equal to it.

Finally, all of that needs to be wrapped in testArr1[] so that the index in the middle of the array will be returned, allowing the value of the element to be accessed.

testArr1[Math.floor(testArr1.length / 2)];

A similar method is used when the length of the array is an even amount, however the two numbers in the middle need to be accessed, not just one.

testArr2[(testArr1.length / 2)];
testArr2[(testArr1.length / 2) - 1];

Once the two middle values are gathered, the mean of the two numbers must be found to get the median. For this, the function we already have to get the mean for the first part of the calculator can be called. That way code isn’t rewritten and it keeps everything cleaner.

const evenListMedian = getMean([testArr2[testArr2.length /2], testArr2[(testArr2.length / 2) - 1]])

On this next step it is asking me to apply what I learned on the previous step to the actual function (before it was just practice). I thought I did that but it is still telling me it isn’t correct. Now I get to figure out why..

const getMedian = (array) => {
  const sorted = array.sort((a, b) => a - b);
  if (sorted.length / 2 === 0) {
    return getMean([sorted[sorted.length / 2 - 1], sorted[sorted.length / 2]]);  
  }
}

First error I think was that I used / 2 instead of % 2 in the if condition so I fixed that.

Oh, I forgot to put the code for if the length is odd. Oops.

const getMedian = (array) => {
  const sorted = array.slice().sort((a, b) => a - b);
  const median =
    array.length % 2 === 0
      ? getMean([sorted[array.length / 2], sorted[array.length / 2 - 1]])
      : sorted[Math.floor(array.length / 2)];
  return median;
}

There we go, fixed. I also added .slice() before .sort() to create a ‘shallow copy’ of the array so we don’t mutate the original. Then we just need to update the text content of the #median element and that part is all finished.