Before you start

Getting started

Exercises are not mandantory and will not be corrected by the corse management. However, you will have a better chance of doing the examination assignments in the course if you first do the exercises. We higly recommend you to complete as many exercises as possible.

You have a git repo on Github named "xx222yy-exercise" (Please Note: "exercise" not "exercises") where xx222yy is your lnu-username. You can use this repo for the exercises in the course. Start of by cloning the repo to your computer:

• git clone https://github.com/1dv022/xx222yy-exercise.git

Now you can pull our boilerplate repo into your repo:

• git pull https://github.com/1dv022/exercise-boilerplate.git

You are now ready to start with the exercises.

The exercises

The exercises are divided into seperate levels; A, B and C where C is the most difficult level. You should always strive to complete at least level A and B.

1. Add the exercise/exercises you want to work on by doing a
   • git subtree add --prefix={reponame} --squash {link to repo} master. For example, to start with "tiny-tunes do":
   • git subtree add --prefix=tiny-tunes --squash https://github.com/CS-LNU-Learning-Objects/exercise-tiny-tunes.git master
2. Navigate to the folder created. cd tiny-tunes
3. Do a npm install to install the exercise dependencies.
4. Do npm start. The following will happen:
   • A process will start watching files in the folder src/ for changes. When a change is detected the file will be "compiled" in to a virtual file called "build.js". A web server is started which will serve your browser with the resources needed.
5. Browse to http://localhost:4000 to locate the application.

You should have multiple terminals open at the same time. One running the npm start and watching files and one terminal to do tasks like committing and pushing to GitHub.

ESM Modules

An important note regarding require. Since 2018 we have shifted from using "node modules" using "require" to using Ecma script modules, ESM and the keyword import. Do not use require as I do in some of my examples, instead please use import. Make sure to look at my explenations in the lecture "L05 - Javascript and the browser".

Local IDE

1. Start up your IDE (Visual Studio Code) and open a new project pointing to the exercise or your exercise-folder.
2. Start editing your site in the src-folder. When you save a change look at the terminal watching your files. You should see that the files are rebuilt.
3. The webpage at http://localhost:4000 should be automaticly reloaded. If not, refresh the browser.
4. When you debug your application you should do this in the browser, not in the IDE. A simple method is to write debugger in your js-source code where you want to stop the debugger and refresh the browser. Sourcemapping will make sure that linenumbers in the compiled-code matches your local version.

Tiny Tunes

Get started by watchning this recording:

• Hello World

Temple of DOM

LNU it

BartBoard

Click Game

Autocomplete

Memory Game