💻
[JS] The Interactive Web
CS4All Resources
  • Curriculum Overview
  • 📬Leave Us Feedback
  • Unit 1: HTML & CSS: Good vs Bad Design
    • 🔮Unit 1 Overview
    • U1LA1.1: Building with HTML
    • U1LA1.2: Structuring Pages with Divs, Classes, IDs
    • 🗃️U1LA1 Mini Project: My Fan Page Part 1
    • U1LA2.1: Styling your page with CSS
    • 🗃️U1LA2 Lab: My Fan Page Part 2
    • U1LA3.1: Layout with CSS Grid
    • 🗃️U1LA3.1 Lab: Grid Interview
    • U1LA3.2: Layout with Flexbox
    • 🗃️U1LA3.2 Lab: Flexbox Interview
    • U1LA4.1: Focus on Design in HTML && CSS
    • U1LA4.2: Breakpoint Lesson
    • 🗃️U1LA4 Lab: ChefHub Goes Mobile
    • U1LA5.1: Creating Accessible Websites
    • 🗃️U1LA5 Lab: What Do You Hear? Make it Accessible
    • U1LA6.1: Working with CSS Frameworks - Bulma
    • 🗃️U1LA6 Lab: CheeseBook Computers with Bulma
    • 🎨Unit 1 Final Project: My Travel Page
  • Unit 2: Intro to DOM Manipulation Basics
    • 🔮Unit 2 Overview
    • U2LA1: JavaScript Essentials - Variables to Arrow Functions
    • 🗃️U2LA1 Mini Project: JavaScript Essentials
    • U2LA2.1: DOM Manipulation with JavaScript Click Interactions
    • U2LA2.2: Accessible Shopping Cart
    • 🗃️U2LA2 Mini Project: The National Horse Race
    • U2LA3: Inputs and Conditionals
    • 🗃️U2LA3 Mini Project: The Interactive Site
    • U2LA4: Add, Remove, and Toggle
    • 🗃️U2LA4 Mini Project: The Cross-Wired Lightbulbs Puzzle
    • 🎨Unit 2 Final Project: Input-Output Helper Site
  • Unit 3: Advanced DOM
    • 🔮Unit 3 Overview
    • U3LA1: JavaScript Arrays, Iteration, and Objects
    • 🗃️U3LA1 Mini Project: Arrays, Iteration, and Objects Lab
    • U3LA2.1: JavaScript Essentials - Variables to Arrow Functions
    • U3LA2.2: Typeahead Search
    • U3LA2.3: Fuzzy Matching - Autocorrect
    • 🗃️U3LA2 Mini Project: Fuzzy Matching Personality Quiz
    • U3LA3.1 JavaScript Mutability
    • U3LA3.2: Advanced DOM Manipulation
    • 🗃️U3LA3 Mini Project: Card Organizer
    • U3LA4: Local Storage
    • 🎨Unit Final/U3LA4 Project: Twenty in Ten Game
  • Unit 4: Intro to APIs
    • 🔮Unit 4 Overview
    • U4LA1: Intro to APIs
    • U4LA1.2: JavaScript Arrays, Iteration, and Objects
    • 🗃️U4LA1 Mini Project: Deck of Cards: Higher Lower
    • U4LA2: Connecting to Closed APIs using the Giphy API
    • 🗃️U4LA2 Mini Project: DIY Dictionary
    • U4LA3.1: APIs vs SDKs
    • U4LA3.2: Requests on the Web - GET & POST
    • 🎨Unit 4 Final Project: API GUIs
  • Unit 5: Simple Websockets and Final Project
    • 🔮Unit 5 Overview
    • U5LA1: Servers and Express
    • 🗃️U5LA1 Mini Project: Express Lab
    • U5LA2: Intro to WebSockets
    • 🗃️U5LA2 Mini Project: Simple Sockets Lab
    • U5LA3: Socket Servers
    • 🗃️U5LA3 Mini Project: Socket Server Lab
    • U5LA4 [TBD]
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes
  • Prompt
  • Exemplar
  • Culturally Responsive Best Practice
  • Extra Help?
  • Extensions
  1. Unit 4: Intro to APIs

Unit 4 Final Project: API GUIs

What does the use of APIs look like in a website.

Teacher Notes

Students are creating a website that allows them to bring an API of their choosing to life. For some, this will feel like a great opportunity to connect all the skills they've learned up until this point. For others, they will want to make something simple to feel competent with this skill.

The prompt is purposely left open-ended so that students can identify with the API they and their partner are on board with. However, be prepared to have a default plan for the students that get stuck with indecision. We suggest picking an easy, medium, and hard API that they can choose from, or pushing an easy, flexible one like the DeckOfCardsAPI used in the exemplar.

Beware of students who have very high ambitions with their projects. So long as they have a plan, several MVPs they can aim to achieve along the way, and an estimate of how long each MVP might take, they should feel accomplished each step of the way and not defeated when they run out of time.

Students will be building their projects from scratch, so there is no starter code.

Prompt

APIs carry a ton of data: pictures of animals, jeopardy questions, user data, etc. However, looking at a JSON response is not the best user experience. Make a website that showcases the beauty of your favorite API.

Directions: Do a bit of exploring for an API that interests you, and create a Graphical User Interface (GUI) for it.

For example:

  • If it's an Animals API, pictures of animals, then make a site called "Animal of the Day" that shows a random animal image, or "Breed of the Day" that shows a grid of multiple animals in the same breed.

  • If it's Trivia Questions API, like the jeopardy one, then create cards and filters that users can interact with like we did in Unit 4 Lesson 1.2, or push yourself to make a full-on jeopardy board or similar game.

  • If it's a User Data API, for example, player stats or social media users, allow the user to filter by age height, or something related to the data in the API.

Requirements:

  • Use an API - there are many more closed APIs available than open, but try to just find on that interests you.

  • Include at least 2 inputs that allow the user to interact with the website. For example, a button to launch a random picture and a save button that allows the user to save their favorites in local storage.

Exemplar

Culturally Responsive Best Practice

Some students will find it difficult to commit to an idea and will find it hard to think of one. Those same students tend to get most inspired when hearing other students' ideas. Consider giving students ~20 minutes to research and formulate 5-10 ideas amongst groups of 2-4 per. Share the ideas amongst the class as you rank their difficulty level. (This can be done easily via a Google Sheet or with sticky notes on the wall). Then, students can put their name next to their favorite 1-3 ideas, and pair themselves off this way.

Extra Help?

Extensions

Consider adding more to your website in any of the following ways:

  • Add more CSS - With your first MVP, you may want to hold back on using too much CSS so you can focus on getting your API up and running, but later on, enhance the user experience by refining the styles of you site.

  • Another API - If your API only has one endpoint, there's only so much you can do. Consider incorporating a second compatible one. (For Example, if you're using a random dog picture API, can you find another API on dog features like breed, lifespan, etc.) -- If your API is already pretty complex, consider adding a second one that is much simpler.

  • Gamify your API - Even a seemingly simple API, like random dog images, can be turned into a game. For example, "The 'Which Dog is Cuter' Tournament", "Which breed lives longer?", or "Which picture was made using AI"

  • Let the user filter - Allow them to only see: "Questions with point values over 100", "Birds with wingspans smaller than 100mm", "Songs by a certain artist and from a certain year", etc.

  • Combine older topics - Is your site accessible? Is there an opportunity to store user data in local storage? Do you have big chunks of HTML code in your Javascript file, or are you adding HTML using createElement() and appendChild() for example?

Reflection Questions:

  • With more time, what else would you have added or changed?

  • What are you most proud of? What did you struggle the most with?

  • What's one thing you'd like to get better at in regards to APIs?

PreviousU4LA3.2: Requests on the Web - GET & POSTNextUnit 5 Overview

Last updated 1 year ago

Take a look at this finished example ( | ) or the finished version of the site.

🎨
repl.it
github
7 Beginner-Friendly Projects Using APIs