Skip to content
This repository has been archived by the owner on Feb 15, 2024. It is now read-only.

Latest commit

 

History

History
118 lines (67 loc) · 2.39 KB

lesson16.md

File metadata and controls

118 lines (67 loc) · 2.39 KB

Basic Frontend - Fall 2023

Lesson 16, Tuesday, 2023-11-21

Today's lesson will be the last lesson before starting with the project, and we will be doing a small project to get you up and running!

The structure is very loose, it is up to you to explore and find what you enjoy!

Dogs

https://dog.ceo/dog-api/documentation/random

Display a random dog image

https://kinduff.github.io/dog-api/

Fetch dog facts

Task

Create a simple webpage, that fetches dog images from the API. Pair it with the second API and show some dog facts together with images.

Holidays

https://date.nager.at/Api

Query the holidays of over 100 countries

Task

Show the holidays in Germany for 2024.

BONUS: Add a dropdown to select holidays for one state only.

Maps

https://leafletjs.com/examples/quick-start/

an open-source JavaScript library for mobile-friendly interactive maps

Task

Render a map using the Leaflet library. Can you add a pin showing your current position?

SimpleParallax

https://github.com/geosigno/simpleParallax.js

Simple and tiny JavaScript library that adds parallax animations on any images

Task

Can you add parallax to some images?

Mastodon

https://docs.joinmastodon.org/client/public/

Fetching public timelines

Task

Can you show the published posts and author?

Note that there are many different Mastodon instances to choose from, and they might have different API restrictions. One of the larger ones is "https://mastodon.social", and its API can be accessed without any API keys or registration.

Sources

A lot of APIs can be found here for example: https://publicapis.io/

Additionally, some websites lists royalty free images, for example https://pixabay.com/

More stuff to do!

You don't have to do all of this, these are just ideas!

Iterate on what you have and add more functionality and/or content.

  • Allow the users to open the original source (with a link)
  • Add next and previous pages buttons
  • Show loading while the data is being fetched.
  • Show the content creation or publishing date.
  • Allow the user to search for a keyword
  • Or show article earlier or later than a certain date

More advanced?

  • Allow the user to read the original content, by embedding it in an iframe
  • Automatically load more content when the user scrolls to the end