Commit6 //JavaScript Fundamentals [APIs]

Picture of my parents and me at my first game back since before the pandemic

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above.
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

Working with APIs [Intro Video]

API: APPLICATION PROGRAMMING INTERFACE
a way for two applications, like your program and an external source, to talk to each other and share information

ASYNC
short for the word asynchronous

ASYNCHRONOUS
mean that some code can run independently of the main program flow

ASYNC FUNCTION
will allow you to fetch data from an API, wait for the completed response, and then work with that data

AWAIT KEYWORD
tells the program to wait on that line of code until the data are retrieved

FETCH METHOD
allows you to get data over a network, like the data you'll retrieve from the API

ENDPOINT
the part of the API URL that specifies the type of information you want

JSON FILE
a type of text file used for exchanging data on the web

JSON
stands for JavaScript Object Notation

const getShows = async function () {
  const showRequest = await fetch("https://api.tvmaze.com/schedule/web");
  const data = await showRequest.json();
  // console.log(showRequest);
  // console.log(data);
};

getShows();

Lots of terms to learn with APIs! This is the part I've been excited about since probably halfway through my JS lessons. Manipulating data sets!

GitHub Repo for Intro to APIs

API Documentation & Data

REST APIs
an API that conforms to the design principles of the REST or representational state transfer architectural style
"representational state transfer"

PARAM
parameters

const getQuotes = async function () {
  const showQuote = await fetch(
    "https://api.quotable.io/quotes?author=maya-angelou&limit=1"
  );
  const data = await showQuote.json();
  console.log(showQuote);
  console.log(data);
};

getQuotes();

There was no code along with this, so I took the code from our last lesson and manipulated it to work with the list of quotes API.

GitHub Repo for API Documentation & Data

Fetching Data

So this lesson basically pulled everything together from what I had already gathered from the video and prior lesson. My code basically came out the same as the other two repos.

GitHub Repo for Fetching Data

Practice Quiz: Intro to APIs

I wouldn't say it was easy, but it did come more easily than some of the previous quizzes. Most of it was just reading through the API documentation to find the right answers.

Typing in the missing code was relatively easy as well.

Definitely grinding through the API lessons faster than I expected! Hopefully I can wrap it up this week.

Fetch a Random Image Array

Time to work on a coding challenge! For this challenge I moved to working locally. It took some adjusting to get my editor and space up and running. Thankfully I have been pushing repos this whole time, so that was nothing new.

GitHub Repo for Fetch a Random Image Array

Reveal a Random Image

I definitely relied on the source code for this one. It was fun to see it all function immediately with the VS Code program in the live preview. It was checking for errors as I was typing and displaying the console.log immediately.

The repo used is the same one as above.

Practice Exercises: Intro to APIs

Exercise #1
For exercise one we're going to use an API that is a user generator. This will be on my local as well, so I'm going to push to github and then get started.

GitHub Repo for displayUsers(userResults);

I struggled through this exercise. Really need to practice, practice, practice.

Exercise #2
This one is a video code along. It builds off the previous exercise, so the repo is the same as above.

It was really only a couple steps to incorporate the drop down list, but that's because they already coded up all of the HTML and CSS.

Exercise #3
New repo!
GitHub Repo for Student Registry

I was able to do the first half pretty well, but when it came to writing up the display expressions I needed more clear steps. Really makes me want to go back and redo those lessons.

Well that's it! IT it. This is all of my JS fundamental lessons. Now I will move on to building projects. I also may go back to the beginning and blog about the earlier lessons. Again, I just need a lot more practice.

If you have code-along projects/lessons/etc that you have enjoyed and think that I may benefit from, please drop them in the comments below!

Catch you next time. Peace! <3