Table of contents

• Overview

• Projects

  • 1-BoredBot App
  • 2-BlogSpace App
  • 3-Color Schema Genarator
  • 4-War Project
  • 5-Movie Watchlist
  • 6-Capstone Project: Personal Dashboard
  • 7-Solo Project: Github Profile Cards

  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.)