Awesome
Table of contents
-
Overview
Completed these projects that are parts of Scrimba's Working with APIs. I mastered HTML/CSS, APIs in these projects. You can see the visual representations of the each app below.
Projects
1-BoredBot App
Visualization of the app;
Description
I created a BoredBot app using an API called as https://apis.scrimba.com/bored/api/activity?type=education. When user clicks the button, text is rendered to DOM. You can get more information how to user Bored API on this website.
What I Learned?
-
Server & Clients
-
Request/Response Cycle
-
APIs & async Javascript
-
JSON
-
fetch() syntax
-
Bored API
2-BlogSpace App
Visualization of the app;
Description
I created a BlogSpace app using an API called as https://apis.scrimba.com/jsonplaceholder/posts. When user clicks the button;
- First 5 posts are listed
- User can send a post typing title and body content
What I Learned?
- HTTP Requests
- URLs, endpoints, methods, Body, Headers
- REST APIs
-
Resources
-
Parameters
-
Queries
-
3-Solo Project: Color Schema Generator
✨ Live Link
Visualization of the app;
Description
I created a solo project called as Color Schema Generator. The app uses an API on https://www.thecolorapi.com/docs#schemes-generate-scheme-get. The app features;
-
User can select a seed color with a color picker or
-
Select a color on dropdown list
-
Schema colors and hex values are displayed on the page
4-Solo Project: War Project
Visualization of the app;
Description
I created a war game. User can play this game against computer! The game uses an API on https://apis.scrimba.com/deckofcards/api/deck/new/shuffle/. The app features;
-
User can select new deck
-
After deck selection, draw a new card
-
At the end of game, If users' score is high, they win the game otherwise computer win.
5-Solo Project: Movie Watchlist
• Visualization of the Movie Search;
• Visualization of the My Watchlist;
Description
I created a movie watchlist app as a solo project. The game uses an API on https://www.omdbapi.com/. The app features;
- User can search any movie according to its title
- Add a movie to on watclist
- List their added movies
- Remove movies from watchlist
What I Learned?
-
Callbacks
-
Promises(pending, resolved, rejected)
-
.then() and chaining methods
-
Async/await
6-Capstone Project: Personal Dashboard
Visualization of the App;
Description
I created a capstone project called as personal dashboard. It runs as chrome extension. The app is integrated on chrome following these steps;
- Download this folder to your local machine
- Open chrome browser and type "chrome://extensions"
- Select developer mode
- Click "Load Unpacked" and choose folder that you download
- Open a new tab on chrome and see this app!
When user clicks a new tab on chrome, they will see;
- Current Dogecoin prices
- Current weather app according to their cities
- Current time
- Random background image that received from Unsplash
- Get a random todo quote
What I Learned?
- Promise rejections
- Unsplash API
- Crypto API
- Open Weather API
- https://dummyjson.com/docs/todos API to get random todo
7-Solo Project: Github Profile Card
✨ Live Link
Visualization of the app;
Description
I created a solo project called as GitHub Profile Card. The app uses an API on https://api.github.com/users. The app features;
- User can get a random Github profile card
- User can search specific profile on the search box
- User can see profile details on the card such as; name, location, total followers, followings or repos
Note: API rate limit can exceed for the server. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)