Code the Dream Labs Logo

Code the Dream

At Code the Dream, we envision a world in which tech innovation comes from all of us and benefits all of us.

Advanced Pre-Work Assignment

General Instructions > Part 1 > Part 2 > Submission

Part 1: Plan and Research

The first part of any project is to plan and research. What to build? How do you want to build it? What does the project need in order to be built? Consider these and many other questions before even the first line of code is written. Use the suggestions below to plan out your project so the build and test process will be a smoother one.

This part has two tasks:

  1. Plan your project
  2. Research to prepare to begin

Plan: Task 1 of 2

Your pre-work assignment is to build a site using one of the following public APIs. Pick a topic that is of most interest to you:

  • Open-Meteo – a weather API
  • Spotify – a music API (requires a free Spotify account and use of an access token)
  • Swapi.Tech – an API about Star Wars films
  • Marvel – an API about the Marvel fandom
  • ARTIC – an art API from the Art Institute of Chicago
  • TheDogAPI or the TheCatAPI – APIs about (you guessed it!) Dogs or Cats
  • Sports API – an API about soccer/ football

The finished project you build as your pre-work assignment should contain the minimum of all the following:

  • STRUCTURE:
    • A public GitHub repository containing your project
    • An HTML document for the page
    • A CSS document to style the HTML page
    • A JavaScript file that retrieves data from one of several public API sources to display the data on your HTML page
    • A README file that includes the instructions for running the webpage
  • CONTENT:
    • Display the data for at least 2 of the end-points in the API
      • Examples: If you choose the use the Weather API, use temperature and condition (rainy/sunny/etc) end-points. For the Star Wars API, use characters and film title end-points.
    • Include navigation from each end-point’s page to the other end-points that are displayed
      • Example: If you choose to use the Weather API, be able to click between a page that shows temperatures and a page that shows conditions. For the Star Wars API, have a page that shows character information and a page that shows film information.
    • Issue new GET requests for the linked data to display in the linked pages.
  • FUNCTIONALITY:
    • Be sure that we can get the code to run without issues by following the instructions in the README file
    • Be sure navigation between the different end-points behaves properly and is not slowed down by requesting more data than needs to be displayed
    • Be sure your code is readable and well structured
    • If including a user-interactive feature like a search field, be sure that you appropriately handle error cases
    • Be thoughtful about what type of styling is used (example: font-sizes are not too small or large, colors are not too dark/light to be easily seen, etc.)

Note: For building a front-end application, if you want to use an API that requires an API key, the API key should not be coded in your application logic (source code). It is bad practice and is a security risk. Your API key should be stored in an environment variable in an .env file. This would require the use of a build tool like Vite which programmatically injects the API key during the build process.

Now that you know the requirements, start planning your site!

If you feel this project is more advanced that your skill level, and you need or want to complete and apply for the Intro to Programming class instead, please email classes@codethedream.org to make us aware of the change and click this link to be redirected to the Intro to Programming Pre-Work Assignment Instructions.

Research: Task 2 of 2

If it’s been a while since you’ve worked with API data, and/or you need any refreshers, here are some additional resources that may help get you going:

GitHub Resources

Feel free to go through these to help learn the system. We do require your pre-work submission to be in GitHub.

JS and API Fetch Resources

If you could use a little help with the API fetch portion. Feel free to utilize these resources as you work on your pre-work:

API Documentation

  • Open-Meteo – a weather API
  • Spotify – a music API (requires a free Spotify account and use of an access token)
  • Swapi.Tech – an API about Star Wars films
  • Marvel – an API about the Marvel fandom
  • ARTIC – an art API from the Art Institute of Chicago
  • TheDogAPI or the TheCatAPI – APIs about (you guessed it!) Dogs or Cats
  • SampleAPIs – an API for coffee lovers

CLICK HERE TO PROCEED TO PART 2: BUILD AND TEST