To complete the challenges and build this project you'll need a basic understanding of working with API's using JavaScript. Going through the #100Devs JavaScript Basics: Classes 26-29 courses is a great place to start.
You can download the project or fork and run the project locally to get hands-on practice with the core concepts below. Start with reviewing the code and comments for each file in the practice folder.
- JavaScript: Arrays & Objects
- JavaScript: Fetch, API's & Handling JSON Data
- JavaScript: Function Scope & Syntax (ES5 vs. ES6)
- CSS: Default Browser Styles
1. Type a U.S. state in the input field on the home page and click search. You can review the JSON data that is returned in the browser console.
2. For the home page, only the top 3 results should be returned, and for the results list page, the top 20 schools should be returned.
3. There is some buggy behavior going on! Only the most recent search results should be displayed without the user needing to manually clear the list.
4. Add a new feature that allows the user to click on a school's name to expand the card and view basic information as shown in the screenshots. The styles have already been created (you can uncomment the .data selectors in style.css) so you can focus on getting the correct data. You'll need to combine everything you've learned so far to complete this challenge, don't forget to use your resources and searching skills to help figure it out!
Once you complete the courses and challenges you'll have the skills to use any public API to build a simple web app!!! You can choose one from this list of public APIs, or find a public API on your own. Have fun, and don't forget to add your own style and creativity for how the data is displayed! You can use this mini-project as one of your submissions for the #100devs API assignment from class 26-27. The starter files are in the practice folder.
If you run into trouble, you can reach out in the [🕒 catchup-crew] or [❓code-help] channels in the #100Devs Discord. It's an amazing community space filled with supportive developers happy to answer any questions you may have!
1. To get started, open this link in a new tab to fork or make a personal copy of this repository
- NOTE: You may find it easier to keep the same name, but you can change it if you like!
2. Click the code button to open the dropdown and copy the URL (make sure HTTPS is selected).
3. Open the terminal in your editor, type 'git clone' and paste the URL (the command should follow one of the formats below).
git clone https://github.com/YOUR-GITHUB-USERNAME/javascript-fetch-json-data
git clone https://github.com/YOUR-GITHUB-USERNAME/YOUR-REPOSITORY-NAME
4. Run the command (Press Enter)
5. Navigate to the project folder
cd javascript-fetch-json-data
cd YOUR-REPOSITORY-NAME
Done! You are now able to run the project locally.
A big thanks to #100Devs for the community support, and Leon Noel for the project inspiration.
If you found some value here and would like to support, feel free to give the project a ⭐️!
- HTML/CSS - Semantic Elements & Basic CSS Styles
- HTML/CSS - Containers & Responsive Design
- HTML/CSS - Forms & More CSS Styles
- JavaScript (Client-side) - The DOM(Introduction): User Interaction & Changing the DOM
- JavaScript (Client-side) - Fetch API(Introduction): Promise Chains & Handling JSON
- JavaScript (Client-side) - Fetch API(Advanced): Async/Await & Handling JSON
- JavaScript (Server-side) - URL Endpoints with NodeJS(Introduction)
- JavaScript (Full-Stack) - MVC Architecture(Introduction)
- JavaScript (Full-Stack) - MVC Architecture(Advanced): Authentication - Coming Soon!
- JavaScript (Full-Stack) - MVC Architecture(Advanced): PostgreSQL - Coming Soon!
- JavaScript (Full-Stack) - MVC Architecture(Advanced): ReactJS - Coming Soon!
This project is distributed under the MIT License. Click here for more information.