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:
- Plan your project
- 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
- SampleAPIs – an API for coffee lovers
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 models in the API
- Examples: If you choose the use the Weather API, use temperature and condition (rainy/sunny/etc) models. For the Star Wars API, use characters and film title models.
- Include navigation from each model’s page to the other models 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.
- Display the data for at least 2 of the models in the API
- 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 models 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.)
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
- https://docs.github.com/en/github/getting-started-with-github
- https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners
- https://lab.github.com/githubtraining/introduction-to-github
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:
- https://www.javascripttutorial.net/javascript-fetch-api/
- https://www.geeksforgeeks.org/how-to-use-the-javascript-fetch-api-to-get-data/
- https://www.freecodecamp.org/news/how-to-make-api-calls-with-fetch/
- https://javascript.info/
API Documentation
Don’t forget to research the API documentation for your project so you understand how to use the API. Helpful things to ask yourself are: Do you need to sign up for a free account? Are you limited to how many API calls you can place in a day? What does the data look like that is returned from the call? Here are the links to the API options again:
- 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