DEV Community

loading...

Creating a JS repo for your ProjectEuler100 solutions

alexparra profile image Alex Parra ・5 min read

Intro

If you haven't ever solved the Project Euler problems, you now have a good opportunity by committing to the #ProjectEuler100 challenge posted by Quincy Larson. Find out more about this on the announcement post.

Topic

As described in the announcement post, you can go through the problems on the Project Euler website or solve them on freeCodeCamp 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:

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.
Enter fullscreen mode Exit fullscreen mode

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. We also want to use ES6 imports so we'll also need Babel.

Before installing dependencies we need to create a package.json file.
On your Terminal, at the repo folder root, type:

yarn init
Enter fullscreen mode Exit fullscreen mode

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:

yarn add --dev jest babel-jest @babel/core @babel/preset-env
Enter fullscreen mode Exit fullscreen mode

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:

touch babel.config.js
Enter fullscreen mode Exit fullscreen mode

Open babel.config.js with your code editor and set it's contents to:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { targets: { node: 'current' } },
    ],
  ],
};
Enter fullscreen mode Exit fullscreen mode

Finally, we need to edit our package.json file and create a scripts property as follows:

{
  ...
  "scripts": {
    "test": "jest"
  }
}
Enter fullscreen mode Exit fullscreen mode

Here is the full content of my package.json right now:

{
  "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"
  }
}
Enter fullscreen mode Exit fullscreen mode

To verify it's all set up fine run:

yarn test
Enter fullscreen mode Exit fullscreen mode

You should get the following output:

yarn run v1.21.1
$ jest
No tests found, exiting with code 1
# more info about the "error"
Enter fullscreen mode Exit fullscreen mode

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:

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
Enter fullscreen mode Exit fullscreen mode

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 and copy the function stub present on the right hand pane:

function multiplesOf3and5(number) {
  // Good luck!
  return true;
}
Enter fullscreen mode Exit fullscreen mode

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:

export function multiplesOf3and5(number) {
  // Good luck!
  return true;
}
Enter fullscreen mode Exit fullscreen mode

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:

import { multiplesOf3and5 } from './001-multiples-of-3-and-5';

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

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:

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);
});
Enter fullscreen mode Exit fullscreen mode

And now run the tests:

yarn test
Enter fullscreen mode Exit fullscreen mode

You should get a long error output that ends with:

Test Suites: 1 failed, 1 total
Tests:       4 failed, 4 total
Enter fullscreen mode Exit fullscreen mode

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.

Discussion

pic
Editor guide