Vefþróun@Tækniskóli
← All projects/3 - The fundamentals/Javascript In The Browser - Common Web APIs

Guide: Javascript In The Browser - Common Web APIs

Description

👉 This guide is part of the Javascript In The Browser Guides.

  • DOM Manipulation & Timing
  • Forms
  • Common Web APIs

 

The modern browsers offer a host of Web APIs for the developers to use, but some are more commonly used than others. The location and history Web APIs are at the heart of a very popular web application strategy: Single Page Applications (SPAs), which we will cover in the near future. Therefore, they must be understood and mastered.

Another very useful Web API is the localStorage API, which allows us to store information in the user's browser.

In this Guide you'll learn about these topics and use them to create a simple SPA.

Knowledge

  • Understand what is a Web API
  • Understand how to get information about Web APIs
  • Understand what is a Single Page Application (SPA)

Skills

  • Be able to use the location and history Web APIs
  • Be able to use the localStorage Web APIs
  • Be able to create a SPA with pure Javascript

Topics

  • What is a Web API?
  • location & history
  • localStorage
  • Explore Web APIs

Action Points

  • Read up on Web APIs
  • Learn about history and location APIs
  • Learn about the localStorage API
  • Exercise these topics with Glitch or similar
  • Explore other Web APIs: what can you build with currently available APIs?

Deliverable: Multi-page Single Entry Website

  • Submit:
    • Glitch Project URL or Github Repository + Github Pages URLs
      • Add comments for each relevant code block
    • Project description and details in the README.md file
  • Minimum requirements
    • A website with at least 2 pages that display their contents in the same HTML file, i.e. not by leaving to another HTML file
      • There should be a menu to allow the navigation between the pages
      • With each page change the history Web API should be used to push a new state and change the URL
      • Show the right page according to the URL the user enter in the address bar
    • The website should contain a way to store certain information in the localStorage and then retrieve it in the next visit
  • Theme ideas:
    • Password-protected note taking app
    • Plants/animals catalog containing the option to see more details about each of them, mark items as favourites and list only the favourites.