DEV Community: Rachel

Advent of Code 2021 in Javascript: My beginner solutions (day 3)

Rachel — Thu, 09 Dec 2021 05:39:24 +0000

Hi dev.to!

A couple of days ago I posted my solutions to days 1 & 2 of Advent of Code 2021, using sort of beginner-intermediate pure Javascript.

Now I'm back to continue on with day 3!

I found this one took me a bit longer, and I ended up with a fair amount of code. I'm sure there are much more elegant ways of doing this than nested loops... but again, I've tried to make it basic and easy to read. So here goes.

Day Three: Binary Diagnostic

(link)

Part One

In this puzzle we are given a list of binary numbers that we need to process in various ways. This involves finding the most common ('gamma') and least common ('epsilon') bits at each position. What the heck does that mean??

Well, a 'bit' is a single 0 or 1 within a binary number. So we can think of the list of numbers as having columns, for example, like this (using the sample input from the instructions):

Each row is one 5-bit binary number in the array, and the columns show the positions of each bit within their respective numbers. For example if we were to find the index of the last bit in the first number, you could notate it as array[0][4].

To find the most common bit in each position, we need to count the zeroes and ones in every column. After recording the most common bit of each column in order, we have a new 5-bit binary number, which is the gamma value. Then we repeat with the least common bits to get the epsilon value. The puzzle doesn't specify what to do if there is an equal number of zeroes and ones in the column, but in part two the instructions say to record 1 as the most common bit in that case, so I implemented that for part one as well.

The puzzle answer is the decimal value of your gamma and epsilon results multiplied together.

On to the code. The input we're given will be read as a string, so we split it into an array of strings. It's easiest to keep the binary numbers as strings so we can index them.

const arr = binaryList.split("\n");

let x = 0;
let mostCommon = [];
let leastCommon = [];

We also set up a counter and two arrays to record the most and least common bits. Next, nested loops!

while (x < arr[0].length) {
    let zeroes = 0;
    let ones = 0;
    for (let i of arr) {
      if (parseInt(i[x]) === 0) {
        zeroes++;
      } else if (parseInt(i[x]) === 1) {
        ones++;
      }
    }
    if (zeroes > ones) {
      mostCommon.push(0);
      leastCommon.push(1);
    } else {
      mostCommon.push(1);
      leastCommon.push(0);
    }
    x++;
  }

I set the length of the 'while' loop to the length of the binary numbers, so that it works with both the sample and real inputs. The value x, which increases by one each loop, represents which column we are up to.

We create counters for the zeroes and ones. These will reset to 0 at the start of each loop. Then, the inner 'for' loop iterates through the list, counting how many zeroes and ones there are in position x.

Next, we push the most common bit into the mostCommon array, and the least common into the leastCommon array. As the 'while' loop continues, these two arrays will construct our gamma and epsilon values. Then, we just need to parse them.

const gamma = parseInt(mostCommon.join(""), 2);
const epsilon = parseInt(leastCommon.join(""), 2);

parseInt() is a super useful function that can turn a string into an integer. What's more, if you give it the number system (radix) of the number you're converting as its second argument, it will take that into account too! Because we're converting from binary to decimal, we need to supply the radix of 2.

Now we can console.log(gamma * epsilon). How cool is that!

Part Two

This one took a bit of thought to understand. In this part we are essentially doing the same thing - counting the most and least common bits - but now at the end of each loop we need to filter the array.

The values we're looking for are 'oxygen' and 'CO2'. We'll set up a similar 'while' loop to part one, that loops through the columns. To get the oxygen value, for each loop, we determine the least common bit and remove from the array every number that contains that bit at position x (the column we are up to). To get the CO2 value, we do the same thing but removing every number that has the most common bit at position x.

Here's what that looks like:

let x = 0;
let arr = binaryList.split("\n");

while (arr.length > 1) {
  let zeroes = 0;
  let ones = 0;
  for (let i of arr) {
    if (parseInt(i[x]) === 0) {
      zeroes++;
    } else if (parseInt(i[x]) === 1) {
      ones++;
    }
  }
  if (zeroes > ones) {
    arr = arr.filter((i) => parseInt(i[x]) === 0);
  } else {
    arr = arr.filter((i) => parseInt(i[x]) === 1);
  }
  x++;
}

const oxygen = parseInt(arr[0], 2);

There are a few things here. My first thought was actually could we use the gamma and epsilon values from part one so we don't have to count the most and least common bits again? But then I realised that won't work, because the array will shorten for each loop, changing the number of bits! Instead we need to use the same inner 'for' loop as before, in order to count them each loop.

So the code ends up looks pretty similar to part one. However, instead of using the most and least common bits to construct new numbers, we use them to filter the array using the array.filter() method.

The filter method takes two arguments, an array and a callback function that needs to return true or false. It outputs a new array containing only the items for which the function returned true. Because it outputs a new array, I'm reassigning the original array's variable to the new array each time filter is run. Thus, we need to use 'let' instead of 'const' when initialising the array's variable.

We run the while loop until there is only one item left in the list (arr.length is no longer greater than 1). This is the oxygen value! We can now parse this using parseInt().

To get the CO2 value, it's essentially the same code, just with the numbers in the final if/else statements switched!

x = 0;
arr = binaryList.split("\n");

while (arr.length > 1) {
  let zeroes = 0;
  let ones = 0;
  for (let i of arr) {
    if (parseInt(i[x]) === 0) {
      zeroes++;
    } else if (parseInt(i[x]) === 1) {
      ones++;
    }
  }
  if (zeroes > ones) {
    arr = arr.filter((i) => parseInt(i[x]) === 1);
  } else {
    arr = arr.filter((i) => parseInt(i[x]) === 0);
  }
  x++;
}

const co2 = parseInt(arr[0], 2);

Now we can multiply oxygen and co2 to get the final answer. :)

If you were struggling with understanding this puzzle, I hope that made sense! Let me know if it doesn't or if I got anything wrong.

Thanks for reading! 👋

Advent of Code 2021 in Javascript: My beginner solutions (days 1-2)

Rachel — Mon, 06 Dec 2021 07:34:12 +0000

Hi dev.to!

Since this is my first time doing Advent of Code, I thought it would be fun to document the experience as I go. So far it's been super fun solving the problems, especially since I have no classes to keep my brain busy over the summer... I'd been missing that feeling of satisfaction when your code works, and Advent of Code gives me just that, but in bite-sized pieces! 😁

So, here are my solutions to the first two days of Advent of Code 2021. Just to note, I haven't looked at anyone else's solutions yet, so here you have my raw unfiltered thought process!! ✌️ Since I have limited maths and data manipulation skills (and I'm still learning Javascript), these solutions may be a bit simple/beginner level, but they do work and I think they're quite easy to read at least. Here we go!

Day One: Sonar Sweep

(link)

Part One

In this problem, we are given a whole heap of numbers separated by new lines, that represent the depth of a submarine. We need to count the number of times the depth measurement increases from the previous measurement.

The first thing to do is to convert the input we're given into a manageable format. First I copied the text from the input page into my Javascript file as a string literal and assigned it to a variable "input".

const input = `159 ...
// etc!
6568`

Then I collapsed the first 2000 lines in VS Code since that's how long it was. XD
Next:

const arr = input.split("\n").map(Number);

This converts the input into an array of strings using the separator "\n" (new line), then converts each string into a number. Now we just need to initialise a counter and iterate through the array, checking whether each value is larger than the previous one.

let count = 0;

for (let i = 1; i < arr.length; i++) {
  if (arr[i] > arr[i - 1]) count++;
}

We start with index 1 because index 0 doesn't have any previous value to measure against.

console.log(count);

Now we can check the answer, which should be the value of 'count' :)

Part Two

In this problem, we need to add each value to its previous and next values in a sliding window. Then we again need to give the number of times the resulting values increase.

We already have the array ready to go, so now we just need to iterate through the list again starting with index 1.

let count = 0;

for (let i = 1; i < arr.length - 2; i++) {
  let a = arr[i] + arr[i + 1] + arr[i + 2];
  let b = arr[i - 1] + arr[i] + arr[i + 1];
  if (a > b) count++;
}

console.log(count);

Here we need to stop two indexes before the last index (i < arr.length - 2) because after that there won't be enough measurements to create a three-measurement sum.

Ok, on to the next day :)

Day Two: Dive!

(link)

Part One

We're still in a submarine! But this time we need to learn how to steer it?? In this puzzle, we're again given input separated by new lines, but with added complexity. I won't get into detail as the puzzle instructions explain it very well.

Basically, we need two counters: depth and horizontal position. These will be increased (or increased or decreased in the case of depth) as we iterate through the input. First off, we get organised by initialising our array and counters:

const arr = input.split("\n");

let depth = 0;
let horizontal = 0;

Now we have an array of strings looking like ["forward 5", "down 5", "up 3"] etc.. We need to split up the word and the number, so that we can work with each separately. I put each instruction into its own nested array like this:

const newArr = arr.map((instruction) => {
  return instruction.split(" ");
});

Now newArr will look something like: [["forward", "5"], ["down", "5"], ["up", "3"]]. All we have to do next is iterate through the array, checking the instruction and adjusting the associated counter accordingly. We can parse the number part of the instruction (which is currently a string at position [1] in each sub array) with parseInt(i[1]).

for (let i of newArr) {
  const num = parseInt(i[1]);

  if (i[0] === "forward") {
    horizontal += num;
  }
  if (i[0] === "up") {
    depth -= num;
  }
  if (i[0] === "down") {
    depth += num;
  }
}

Now all that remains is to provide the depth multiplied by horizontal position.

console.log(horizontal * depth);

Onwards!

Part Two

Part two is pretty straightforward; we just need to adjust the for loop a tiny bit. First we reset the depth and horizontal values and add in a new value: aim.

depth = 0;
horizontal = 0;
let aim = 0;

Now "down" and "up" will modify aim rather than depth, and "forward" will both increase the horizontal position and increase depth by the given value multiplied by the current value of aim. Luckily our array is already set up :) So:

for (let i of newArr) {
  const num = parseInt(i[1]);

  if (i[0] == "forward") {
    horizontal += num;
    depth += aim * num;
  }
  if (i[0] == "up") {
    aim -= num;
  }
  if (i[0] == "down") {
    aim += num;
  }
}

console.log(horizontal * depth);

And done!

That was fun to write up, now I'm going to have a look at other people's cool answers and feel like a noob!

Let me know if I should continue into days 3 & 4 👋

A Javascript fix for the 100vh problem on mobile screens

Rachel — Fri, 19 Nov 2021 07:50:29 +0000

Hi dev.to!

I'm a software development student at Developers Institute NZ, and this is my first public post. 🎉

I figured this would be the perfect place to share a slightly obscure fix that has helped me recently. A few weeks ago, my boss at the lovely cafe I work at on the weekends asked me if I'd be willing to take on some extra hours at work to help with their new landing page. I agreed, however, the brief turned out to be a little trickier than I'd first anticipated! My boss (who is also a graphic designer) had created a gorgeous, eye-catching full-page design. However, it only really works if the entire page is displayed on load, with no scroll bars.

My first thought was to just make everything 100vh. However, of course it's never that simple - as I'm sure many people would have come across, 100vh is not always... 100vh. On some mobile browsers, most commonly Chrome and Safari on iOS, 100vh actually refers to outerHeight. This means the lower toolbar on the browser will not be taken into account, cutting off the last couple of rems of your design. While you can account for the difference using CSS, the view height will subsequently change as soon as the user starts scrolling down and the lower browser toolbar disappears.

(An interesting fact I found while researching this is that this behaviour is completely intentional! Have a look at this blog from 2015 if you're interested.)

While this isn't really an issue for most websites, there are a few different threads on the topic floating around. Unfortunately, CSS fill-available wasn't working for me. The most interesting solution I found was this comment buried in a thread in Elementor's Github repo. It uses Javascript to get innerHeight and assign it to the min-height CSS property for the outer container of the design. In order to change the innerHeight when the user starts scrolling and the browser toolbars shrink, we use an event listener. This worked perfectly for the design of the cafe's landing page.

Here is the solution I used, adapted from that comment:

// define a function that sets min-height of my-element to window.innerHeight:

const setHeight = () => {
    document.getElementById("my-element").style.minHeight = window.innerHeight + "px"
};

// define mobile screen size:

let deviceWidth = window.matchMedia("(max-width: 1024px)");

if (deviceWidth.matches) {
// set an event listener that detects when innerHeight changes:

    window.addEventListener("resize", setHeight);

// call the function once to set initial height:

    setHeight();
}

If you're using Wordpress (which I was), the easiest way to insert this is to wrap it in a script tag and add it into an HTML component underneath ALL other content, and then remove all padding from it so no white space is visible. Depending on your design, theme, and plugins, you may also need to add more lines to the function to include any containers for which you'd usually need to re-state the 100vh rule, for example perhaps .elementor-container and .elementor-widget-wrap if you're using Elementor.

While this is not the cheapest solution due to the event listener, it was exactly what I needed for this particular project. Hope someone else finds it useful or interesting! 👋