WELCOME!

Interested in JavaScript?
You came to the right place!
Check it out!


html

Structuring a Website



css

Adding Style to Structure



javascript

Engineering the Fun


JavaScript Basics

If you master these fundamentals, you have a head start on coding in other languages too!

Variables - Different ways to create a variable Show Answer
Operators - Use these to manipulate and compare data Show Answer
If-Else - Conditional statements Show Answer
var array = [ "hello", "world", 1, true, "Team Awesome is the best!" ]

What is the size of this array? Show Answer
What does array[1] contain? Show Answer
What the most common way to iterate through this array? Show Answer

JavaScript Arrays

Arrays (also known as lists) are used to store data!

JavaScript Functions

It's good practice to have a function for each task rather than multiple tasks in one function!

What is scope? Show Answer
Why do we use functions? Show Answer
What is a parameter? Show Answer

Follow along with this simple 3 step tutorial!

In order to use Dog API we need to understand what is going on first.

Purpose

  • We want to generate a random dog image onto the page
  • We also want to have a few different options of the type of dog to generate

    • Requirements

  • We need an image element on the HTML page
  • We also need at least one button that will initiate the image generation

    • Grab the image element, and button(s) from the HTML

  • This will allow us to load a picture by editing the src attribute of that image element.

    • **Notice how I also created a variable called url which holds part of the dog api URL**

  • Since in the live example we have mutliple buttons, this tutorial will as well
    • Show Answer

    Create an event listener for the button(s)

  • In order for our buttons to actually do anything, we need to add an "click" event

    • **Notice how we created a loop since we grabbed ALL buttons of a class from Step 1**

  • Extract the dog type from the button, then call our function which handles process of loading the image
    • Show Answer

    Fetch the dog image and load it into our empty image element

  • Retrieve the dog type from the button value, append that piece of data to our url

    • **Notice how there is also other text added for the url**

  • Create a fetch request at the url ( this how we communicate with the Dog API )
  • After the fetch we must return the response.json() before doing anything with the data
  • The data that is received on our side is an image src link or URL ( needed for seeing the image sent to us )

    • **Notice that we are using data.message, this is what the Dog API has sent us back**

    Show Answer

    Dog Image Generator


    Additional Resources

  • Introduction to JavaScript
  • Full JavaScript Guide
  • Books on JavaScript