The aim is to get aqauinted how to organise your code and to learn the basics of integrating with the browser as development environment.
This assignment is graded as Fail (U) or Pass (G) and it is worth 3 credit/hp.
You have completed A00 – Create a report page.
You have access to the course environment on GitLab.
You have basic knowledge in HTML and CSS.
The lectures (L05-06 and L07-08) contains details which helps to prepare for this assignment.
The example repo contains examples on how to use the DOM and events within the browser. It also contains examples on code structure for:
The example repo also contains, in
The example repo furthermore contains a
package.json with all details on the linters and minifiers you can use.
These are the requirements to fullfill the assignment.
The repo has a
README.mdwritten in Markdown, open it up and add text describing the assignment and add a url to the page on CoursePress that formulates the requirements for the assignment. Do also add a representative image for the assignment.
Create a directory
web/, here you shall save all your resources for the website.
Save the images in the directory
web/img/. Use only low caps, to avoid mixing caps and getting into trouble on Mac/Unix.
Save your stylesheets in the directory
Create a favicon image and use it on all pages.
- Add a navbar to your web pages so it is easy to navigate your site.
PART 1: Hangman
Create the page
hangman.htmland implement the Hangman game in it.
You may reuse the Hangman code and SVG-image provided in the example repo, as presented in the lecture.
- The module design pattern.
Add a set of linters and minifiers (at least one of each) and make them a part of your development environment, saved in
package.json. Execute them all through
npm run test(validators) and
npm run build(minifiers).
- Ensure that
npm run testand
npm run buildexecutes without errors.
PART 2: Quiz
These requirements are related to the second part which is a standalone application where you are to build a frontend to a REST Quiz game. You are to implement a client which uses a existing Quiz server to retrieve and answer quiz questions.
Create the directory
quiz/, in the root of the repo, as a Snowpack App using the command
npx create-snowpack-app quiz --template @snowpack/app-template-blank. Do not forget to remove the sub directory
quiz/.gitto avoid creating a new Git repo.
In the directory
quiz/, the command
npm run buildshould build the app and
npm run startshould start the Snowpack development server with the application running.
- Read more on the functional and non functional requirements for the Quiz application in the README_Quiz.md.
There are no extra requirements.
This is how to submit this assignment.
Update your report-repo from A00 with the page
web/report.htmland answer the following questions. Write freely with 15 to 30 sentences of text.
What are your thoughs on the module design pattern and the prototype object model?
Elaborate on the lint (test) and build sequence of your code. Do you see pros and cons and can you relate it other development work you have done?
- What is your TIL for this course part?
[A00 repo] Add a tag
v2.0.0to your report repo. If you make updates then add another tag like
v2.1.0and so on.
[A02 repo] Add a tag
v1.1.0and so on.
Ensure you have committed and pushed all your changes, including the tags, to GitLab (for both repos).
- Add an issue to the report-repo (A00) if you have any question to the teacher. The teacher will check your issues during grading the assignment.