# 💪 Coding Challenges 💪

### Challenge 1: Fun with the Browser

We've learned about the console and we've dipped our toes in writing some Javascript. Your first challenge is to take your skills to the browser console and make shit happen.

Here are the instructions:

– Go to stackoverflow.com

– Show an **alert** on the page using Javascript that reads “Help I’m too beautiful”

– Then use Javascript to set the value of the search input box to “Don’t go chasing waterfalls”

– Then use Javascript to click to ‘ask a question’ button

– For each step, take a screenshot of your code and in the cosole and a before and after screenshot of the page

– Email screenshots to [e-mail] & [e-mail] when you've completed the challenge

Here's a resource that may be helpful (and as always, feel free to make use of the world wide web, also known as the fountain of answers):

**How to Automate Browser Tasks with JavaScript** https://www.youtube.com/watch?v=xHGPBX5_lhw

### Challenge 2: Switching It Up

At this point we know all about conditionals and logical operators, so your next challenge is to learn about another kind of conditional statement available to us in Javascript called the **switch statement**.

You can think of switch statements as another way to implement/write an if/else. Since we are new to these coding streets we haven't talked about 💫 performance 💫 yet, but the switch statement is faster in most cases when compared to if-else (noticably so when the number of conditions is large).

Let's get into it.


Here are the instructions:

-- Use the Mozilla Web Docs to learn more about switch statements & how to use them --> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

-- Head over to the **JS Paint** Github page --> https://github.com/1j01/jspaint & click into the **src** folder, then the **app.js** file


(JS Paint is an open-source Javascript libary. That means **anyone** -- including you -- could take a look under the hood and see what their code looks like or even contribute to it. Peeking at code in open-source projects is a great way to get comfortable reading and understanding code.)

-- Peep the if/else if statement between lines 255-265. Hint:


-- Rewrite the if/else statement as a switch statement however you'd like (type it out some random place, write on paper and send us a pic, *download a text editor and send as a .js file*, etc) and send it to [e-mail] & [e-mail].

Disclaimer: your code will error out if you try to run it because you will be referencing variables that have been defined outside of our tiny example. That's ok for our purposes, just send along what you have once you think you've correctly re-written it.

### Challenge 3: Fun with APIs


Phew! You made it all the way to the end of Intro to Coding 👏👏👏🎉🎉🎉 Started from the bottom...

...now we're here with conditionals, logical operators, functions, arrays, loops, etc 🔥

For our last coding challenge we'll be learning how to apply what we've learned to *interact with code in the real world*! 🙀🌎

We've learned about arrays and how nice it is to be able to iterate over each element in an array via loops, but for this challenge we'll need to know about one more data type: **objects**.

As we now know, arrays are useful when we're storing a collection of values, usually of the same type, that are representing the same kind of thing. For example, if we needed to store the names of all the pokemon in our super cool pokemon collection™️ we might make an array of strings that looks something like this.

`const pokemonNames = ['pikachu', 'charizard', 'squirtle', 'bulbasaur'];`

But say we wanted to store more information about each pokemon than just their name, for example, their type and speed. Using only an array we might end up something like this:

`const pokemonInfo = ['pikachu', 90, 'electric', 'squirtle', 43, 'water', 'bulbasaur', 45, 'grass'];`

This is not ideal. If someone else were to look at our array, they might not know what each value represents exactly and iterating through this data and trying to keep our names, speeds, and types straight would be a nightmare, especially if more data were added.

[🕺🕺🕺 objects make dramatic entrace 🕺🕺🕺]

**Objects** allow us to store data using key value pairs, which could really come in handy right about now. You can read more about objects [here](https://www.w3schools.com/js/js_objects.asp). Using an object, we could do something like this to store data about each pokemon:

{
    name: 'pikachu',
    speed: 90,
    type: 'electric',
}

And what's better we can store objects in arrays, if we so desire, just like any other data type:

const validArr = [1, 2, 3];
const alsoValidArr = [{id: 1}, {id: 2}, {id: 3}];

So that, finally, we can rewrite our `pokemonInfo` array to be an array of pokemon objects that will look something like this:

const pokemonInfo = [
    {
        name: 'pikachu',
        speed: 90,
        type: 'electric',
    },
    {
        name: 'squirtle',
        speed: 43,
        type: 'water',
    },
    {
        name: 'bulbasaur',
        speed: 45,
        type: 'grass',
    }
];

This is a common way to store data -- a list (array) of objects! Keep this in mind.

Another thing we'll need to understand are **APIs**. In the most simple terms, APIs make it possible for our code to get information from code someone else wrote. The best way to get a grasp on this concept is to try it out.

Our challenge (*drumroll please* 🥁) is to use the [**iTunes Search API**](https://affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api/) to get a list of bangers and print out whatever pieces of information from the results you'd like in an easily readable format like this:

BANGERS
🔈   Beyoncé --> Before I Let Go
🔈   Beyoncé --> 1+1
🔈   Beyoncé --> Run the World (Girls)
🔈   Beyoncé --> Love On Top
🔈   Beyoncé --> Crazy in Love (feat. Jay-Z)
🔈   Beyoncé, JAY-Z & Childish Gambino --> MOOD 4 EVA (feat. Oumou Sangaré)
🔈   Beyoncé --> Best Thing I Never Had
🔈   Beyoncé --> Countdown
🔈   Beyoncé --> Halo
🔈   Beyoncé --> Dance For You
🔈   Sharon Leal, Anika Noni Rose & Beyoncé --> One Night Only
🔈   Beyoncé --> End of Time
🔈   Beyoncé --> I Was Here
🔈   Beyoncé --> Drunk in Love (feat. Jay Z)
🔈   Beyoncé --> Party (feat. André 3000)
🔈   Beyoncé --> Schoolin' Life
🔈   Beyoncé --> Single Ladies (Put a Ring On It)
🔈   Beyoncé --> Irreplaceable

So in simple words, we will be making a *call* to the iTunes Search API with a certain set of *parameters* that will communitcate what information we'd like to recieve in their response.

You can think of this exchange like placing an order at McDonald's. When you read through the iTunes Search API documentation, this is like looking at the menu in the drive-through. It tells you how to order from a collection of food items McDonald's has agreed to serve.

If you want a Big Mac with fries and a drink, the way to order that would be to ask for a "#2" and state you drink of preference. When you do that, the people inside McDonald's (the other person's code) know what you mean, they prepare your food, and send it out to you through the window when you pull around. The menu is like a manual & agreement of sorts: *"If you ask for this like this, I will give you this. You can count on it!"*

That's all we're doing when we "make an API call".

**Some tips for getting started:**
- Take a moment to read through the [iTunes Search API documentation](https://affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api/)

- Hint: In order to make an API call using JS you will need to a library; [`node-fetch`](https://www.npmjs.com/package/node-fetch) is a good one (and you may need to google how to include a library in your code)

- You can test your API urls by typing them in your browser url bar first. For example if you copy and paste this example from the iTunes Search API documentation https://itunes.apple.com/lookup?id=909253 a .txt file will download with the results

- You will also need to learn a thing or two about **promises** to get this challenge out the door. You can learn about them anywhere online, but this is a [pretty good video](https://www.youtube.com/watch?v=2d7s3spWAzo).

GOOD LUCK! 💫