Use JavaScript to make your website dynamic - Webbprogrammering/websoft GitHub Wiki

This is the assignment A03 for "Section 03: Section 3: Client side JavaScript with AJAX".

You should save your work in work/report.

Prerequisites

You attained the lectures on HTML, CSS and JavaScript so you have basic knowledge on how to code JavaScript in the browser.

You should install a web server like XAMPP to be able to use fetch locally and not only on GitHub Pages.

Optional You may try out JavaScript constructs in the terminal if you have installed node.

Information

You should program JavaScript together with HTML, CSS and the Fetch API to show how your page can be updated dynamically, without page reload.

About the REST API

As a sample REST API we will be using "Skolenhetsregister publikt API" which is about schools in Sweden. You should only use the API to download the data to json-files, there is no need to retrieve the data directly from the REST API, using JavaScript (due to CORS).

The link to the API is:

You should fetch all schools in a swedish municipality (kommun) of you liking. Such a sample fetching is available in example/javascript/fetch/data.

You may choose another API if you feel like it, but read the assignment first to see if the API can solve the requirements.

Requirements grade 3

  1. To your work/report, add a page schools.html which does fetch() on all schools in a municipality of your liking, when you click a link or button on that page. The result should be displayed in the web page in a HTML table, without the page being reloaded.

  2. Style the HTML table so that it looks nice.

  3. To all your pages, add your own "moveable object", for example a duck being somewhere on the browser screen. When you click on the duck it should move to another position of the screen (but not outside of the screen).

  4. All pages should be added to your website navbar.

Requirements grade 4

  1. Do all requirements for grade 3.

  2. Make your duck a bit more dynamic, either by:

    1. Use a JavaScript timer to hide and show your duck.
    2. Attach some event to parts of your page, that depending on the user interaction hides/shows the duck.

  3. Add another page flag.html which has three links showing three different country names. Each country flag should be displayed when the user clicks the country link. The flags should be created using pure HTML/CSS (no images).

Requirements grade 5

  1. Do all requirements for grade 4.

  2. Add a select/option form element and fill it up with some municipalities (at least three) in Sweden. The municipality data should be fetch() from a json file and used to populate the select/option. When the user selects a option, another fetch should be done to retrieve and update the HTML table with all schools in that municipality.

  3. When the flag is displayed, hide the flag when the user clicks on it. Use a CSS transition to make a smooth transition from displayed to not displayed.

  4. Organise your code for flag and duck, using JavaScript object {}, where feasible, using properties and methods.