Creating a JS repo for your ProjectEuler100 solutions
Tags: javascript, beginners, projecteuler100
Published: 2020-01-05 14:00:06

#Intro

If you haven't ever solved the Project Euler problems, you now have a good opportunity by committing to the [#ProjectEuler100](https://twitter.com/search?q=%23ProjectEuler100) challenge posted by [Quincy Larson](https://dev.to/ossia). Find out more about this on the [announcement post](https://www.freecodecamp.org/news/projecteuler100-coding-challenge-competitive-programming/).

#Topic
As described in the announcement post, you can go through the problems on the [Project Euler website](https://projecteuler.net/archives) or solve them on [freeCodeCamp](https://www.freecodecamp.org/learn/coding-interview-prep/project-euler/) as there you have ready made tests to run against your code instantly. Plus it'll be recorded on your freeCodeCamp profile.

But, as the challenge requires posting a link your solution on a GitHub repo, you'll need it anyhow. As I was creating mine I though some of you would benefit from a little help in creating your own repo with tests. So here we are...

#Step 1 - Create a repo
Head over to your GitHub main page and create a new repo: 
- Name it `project-euler-100` or something similar;
- Fill the description with whatever you wish;
- Leave `Public` checked;
- Check `Initialize this repository with a README`;
- On `Add .gitignore` select `Node`;
- Click `Create repository`;

#Step 2 - Clone the repo to your machine
On your computer Terminal, `cd` into a folder where you'd like to keep your projects and clone the repo with:
```bash
git clone https://github.com/USERNAME/REPONAME.git
# You can get the above url on the GitHub repo page:
# 1. by clicking the green `Clone or Download` button. 
# 2. by copying from the browser address bar.
```

The above will create a directory with the same name as your repo with two files: `.gitignore` and `README`. 
Now `cd` into that folder and open it with your preferred code editor. For VSCode do `code .`.

#Step 3 - Adding dependencies
We want to be able to run tests on our code and we'll do that with [Jest](https://jestjs.io/). We also want to use ES6 `imports` so we'll also need [Babel](https://babeljs.io/).

Before installing dependencies we need to create a `package.json` file. 
On your Terminal, at the repo folder root, type:
```bash
yarn init
```
Some questions will be asked for you to customise the values of `package.json`. To use defaults, just press `ENTER` on all or run `yarn init -y` instead.

Now we'll install our dependencies with the following command:
```bash
yarn add --dev jest babel-jest @babel/core @babel/preset-env
```
The above will add a `devDependencies` property to `package.json` and also create a new `node_modules` folder with the dependencies required.

We need to configure babel by creating a file named `babel.config.js` at the root of our repo folder. An easy way is to run:
```bash
touch babel.config.js
```
Open `babel.config.js` with your code editor and set it's contents to:
```javascript
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { targets: { node: 'current' } },
    ],
  ],
};
```

Finally, we need to edit our `package.json` file and create a `scripts` property as follows:
```json
{
  ...
  "scripts": {
    "test": "jest"
  }
}
```
Here is the full content of my `package.json` right now:
```json
{
  "name": "project-euler-100",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/alex-parra/project-euler-100.git",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-jest": "^24.9.0",
    "jest": "^24.9.0"
  },
  "scripts": {
    "test": "jest"
  }
}
```

To verify it's all set up fine run:
```bash
yarn test
```
You should get the following output:
```bash
yarn run v1.21.1
$ jest
No tests found, exiting with code 1
# more info about the "error"
```

This is a good time to commit our changes so far as in the next step we'll create the files for the first problem.

Before committing, run `git status` to make sure which files are being committed. You should see `babel.config.js`, `package.json` and `yarn.lock` listed as *Untracked files*. 
The `node_modules` folder should not be committed as it contains third-party code. Our `.gitignore` file as an entry for it to tell `git` to ignore it.
If you're on a Mac, you may see a `.DS_Store` file as *Untracked*. These files can/should also be ignored by `git`. Add a line to `.gitignore` with `.DS_Store` to ignore them.

Now the commit:
```bash
git add . # add all untracked files to the staging area
git commit -m "Set up dependencies" # commit with message
git push # push latest commit to GitHub remote
```

#Step 4 - The first problem
In this post, I won't solve the first problem. That's on you. ;)
But I'll show you how to set up the folder and files in a way that allows you to run the tests on your code locally.

Start by creating a folder for the problem to be solved. In this case, we'll create a folder named `001-multiples-of-3-and-5`.
Inside that folder create a file named `001-multiples-of-3-and-5.js` and another named `001-multiples-of-3-and-5.spec.js`.

In order to make it easy to code locally and also post the solutions on freeCodeCamp, we'll keep the naming used on the freeCodeCamp stubs.
As such, you can go to [freeCodeCamp - Project Euler - Problem 1](https://www.freecodecamp.org/learn/coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5) and copy the function stub present on the right hand pane:
```javascript
function multiplesOf3and5(number) {
  // Good luck!
  return true;
}
```
The only change we need is to export this function so that we can use it in the tests. As such, make the contents of `001-multiples-of-3-and-5.js` look like:
```javascript
export function multiplesOf3and5(number) {
  // Good luck!
  return true;
}
```
Nice!

Lastly, we need to set up the content of the tests file `001-multiples-of-3-and-5.spec.js`.
This file will be run by *jest* and needs to import the code file and implement at least one test:
```javascript
import { multiplesOf3and5 } from './001-multiples-of-3-and-5';

test('multiplesOf3and5(1000) should return 233168', () => {
  expect(multiplesOf3and5(1000)).toBe(233168);
});
```
In review:
1. we import the function from the implementation file;
2. we write tests to validate the return values match what we expect;

Let's write all the tests present on freeCodeCamp for problem one:
```javascript
import { multiplesOf3and5 } from './001-multiples-of-3-and-5';

test('multiplesOf3and5(1000) should return 233168', () => {
  expect(multiplesOf3and5(1000)).toBe(233168);
});

test('multiplesOf3and5(49) should return 543', () => {
  expect(multiplesOf3and5(49)).toBe(543);
});

test('multiplesOf3and5(19564) should return 89301183', () => {
  expect(multiplesOf3and5(19564)).toBe(89301183);
});

test('multiplesOf3and5(8456) should return 16687353', () => {
  expect(multiplesOf3and5(8456)).toBe(16687353);
});
```

And now run the tests:
```bash
yarn test
```

You should get a long error output that ends with:
```bash
Test Suites: 1 failed, 1 total
Tests:       4 failed, 4 total
```

The error is expected as we haven't implemented our solution yet. And this is also the recommended way to go about it: 
1. write tests;
2. run tests and see them fail; 
3. write code that makes the tests pass;

Let's commit what we have and push to GitHub.

*Set up is now finished!* 

Now it's problem solving time!
Once you get all tests passing, commit the solution and push to GitHub.
Best of luck!

#A template
I hope you went about the steps above and created your own repo.
In any case, I'll finish this post with a lazy solution for you which is to fork the template repo I made https://github.com/alex-parra/project-euler-100-js-template, clone it to your computer and running `yarn install` to set up the dependencies.