1. Day

Introduction

This is the first challenge in the series of 25 you will hopefully complete. You should come back each day to learn about the next one!

Go read the related story at https://adventofcode.com/2024/day/1

At the bottom of the page you can find a few buttons to log in, choose one to continue.

Next, you can download the source file you will be using today.

You might have already noticed the empty pane on the left of this text. That will be the place this guide will place its output.

In case you are on mobile, this might not appear, but you can rotate your phone to view it.

Let's set up your environment to solve the puzzles!

Install Visual Studio Code (VS Code)
Go and install the "Live Server" extension
Open a folder in vscode and make a folder called "0.0" (the first number is the day, the second one is the challenge number)
You will make a folder like this every time you start working on a problem; the reason we made one called 0 is to set up a template to copy every time. Just to save some effort.
Make an index.html file with html:5
Insert a div with a unique id, that will serve as your output
Make an index.js file
Link that file to the HTML, after the output div by using
```
<script src="..."></script>
```
You can now copy and paste that folder inside your workspace, renaming it to "1", indicating that it has the problems of day one
Put the file you downloaded from adventofcode.com in the "1" folder and name it "input1.txt"
Start the Live Server with the "Go Live" button in the bottom right corner
If you can find other ways to serve your html + js + source text files, you can do any of that.

Now on to the first task!

I am going to assume you read the task description and the story, so I'm just going to get right into solving it.

In-browser JavaScript is not an amazing environment to be doing traditional file reading in, so we need to use the fetch function in an async codeblock.
"async" means that calling the function / running the codeblock is sent to the background to churn away by itself. This is useful because getting a file with the fetch function can take time, significantly more than a few milliseconds, in which time the browser tab would be frozen, if not for async operations.
"fetch()" is a function to send a request to the server, in our case it is asking for a file.

So first we're going to need to get the file's contents, I am going to use the fetch function.

async function main(){
  let file_response = await fetch("./input1.txt");
  let file_string = await file_response.text();
}
main();

Here we are making an "async" main function, and running it at the end of the file. Further code is supposed to be inserted at the end of this function, unless I advise otherwise.
The first line here asks the server for the "input1.txt" file in the current directory. The fetch function returns a "Promise" which means it will return something later. We can wait for this using the await keyword. In the end we get a "Response" object.
Conveniently, that response has a function called ".text()", which gets the text we need from the sent file. This is a function that we need to wait for too.
We can now split the data by newlines to get an array of lines. We then can split those and add them to two separate arrays.

  let row_list = file_string.split("\n")
  let col1 = [];
  let col2 = [];
  for (let i of row_list) {
    let line = i.split(" ");
    col1.push(line[0]);
    col2.push(line[line.length-1]);
  }

The "of" in the for loop means "i" becomes a string for every line in the "row_list". This can now be split by whitespaces, but there is more than one of those in every row, so I simplified the code by getting the first and the last one of them.
This now creates the two location arrays we need to operate on.
Next would be sorting the lists. This can be done manually, but the effort is not worth it, so let's just use the built-in sort function on both lists. This time let's also print the arrays

  col1.sort();
  col2.sort();
  let output = "";
  for (let k of col1){
    output += k + ", ";
  }
  output += "

";
  for (let k of col2){
    output += k + ", ";
  }
  document.getElementById("output").innerHTML += output;

Notice how we made a string to output at the end: In my experience (firefox), adding to the element every time would gobble up more than 16GB of my RAM and take ages, but this way it's a lot more efficient.
Let's delete the code now after the sort statements and keep going with calculating the difference

  let diff = 0;
  for (let index = 0; index < col1.length; index++) {
    diff += Math.abs(col1[index] - col2[index]);
  }
  document.getElementById("output").innerHTML += diff;

We made a variable for storing the difference, and then made a for loop to go for the length of one of the arrays. This is fine, because both of them are the same length.
We then add the difference (that we need to take the absolute value of) to "diff" and then print it.
This makes us arrive at the end of the first puzzle for the first day.
You should take your final value and submit it on the adventofcode website to continue to the second puzzle's instructions.

Day 1

Introduction

Let's set up your environment to solve the puzzles!

Now on to the first task!

Continue to the next puzzle

Output div