JavaScript exercises

Some basic exercises to discover JS.

Prerequisites

• Node.js version 24. Use fnm to get the latest version
• Pnpm version 10. Use pnpm official script for posix systems
• Docker, chose the right distribution installation instructions, don't forget to make the postinstallation steps.

Project setup

# Make a copy of this repo on you profile, with the "use this template" button on GitHub
# clone the repository on your computer with git
# Move into the repository
cd ex-js
# Install dependencies
pnpm i

Check here if your distribution does not support playwright

Formatting

To maintain a consistent code style, please format your code before each commit by running pnpm format.

You can ignore the warnings, they will persist until you resolve each exercise. You can also install the VS Code biome extension to have format on save.

Simple syntax exercises

Launch the tests by typing pnpm run test, this will launch all tests and rerun them on file changes. You can also launch test from your IDE. You can browse tests, they are located in files ending with .test.js.

1. Basic conditions
2. Maths
3. Arrays
4. Manipulating strings
5. Objects
6. Recursion

Interacting with browser and dom exercises

To launch the tests, see the [instructions below](#Lauch playwright tests with docker) to set up playwright with Docker.

Use the pnpm dev command to start a local server and see the exercises in your browser.

1. Dom basics
2. Click events
3. Input events
4. Mouse and focus events
5. Fetch data

Launch playwright tests with Docker

You can easily run the playwright server on a Docker container :

docker run --rm --network host --init -it mcr.microsoft.com/playwright:v1.57.0-noble /bin/sh -c "cd /home/pwuser && npx -y playwright@1.57.0 run-server --port 8080"

This will start a Docker container with the playwright server and all the browsers binary and libraries.

Then, when running your playwright tests, just add an environment variable with the server location :

# Without UI, run all tests
PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:8080/ pnpm exec playwright test
# Or with UI, choose the tests to run in the web interface
PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:8080/ pnpm exec playwright test --ui-port=9090

With this setup, the test logic will run on the host, but the browsers will remain in the container.

More information here.