Finished product!

exercises.js

@@ -14,8 +14,13 @@ const album1 = {
 // 1. Retrieve the string "Sire" from album1, and save it in a sensibly named
 //    variable.
 
+const label = album1.albumDetails.lebal
+  console.log(label)
+
 // 2. Change the title of album1 from "Talking Heads" to "Talking Heads: 77"
 
+album1.title = "Talking Heads: 77"
+
 const album2 = {
   title: "More Songs About Buildings and Food",
   albumDetails: {
@@ -38,9 +43,13 @@ const album3 = {
 //    album3's formats
 // Check out the Array.push method!
 
+album3.albumDetails.formats.push(album2.albumDetails.formats[0])
+
 // 4. Change the release date of album3 from a string into a Date object
 // Look ahead to album4 for a clue!
 
+album3.albumDetails.released = new Date("August 3, 1979")
+
 const album4 = {
   title: "Remain in Light",
   albumDetails: {
@@ -51,6 +60,8 @@ const album4 = {
 
 // 5. Add the label "Sire" to album4's details
 
+album4.albumDetails.label = "Sire"
+
 const album5 = {
   title: "Speaking in Tongues",
   albumDetails: {
@@ -61,6 +72,8 @@ const album5 = {
 
 // 6. Add a 'formats' array to album 5 and add "CD", "Cassette", and "LP"
 
+album5.albumDetails.formats = ["CD", "Cassette", "LP"]
+
 const album6 = {
   title: "Little Creatures",
   albumDetails: {
@@ -73,6 +86,10 @@ const album6 = {
 // 7. Make the label "emi" in album6 all uppercase
 // google how to make a string uppercase in js!
 
+if (album6.albumDetails.labels === "emi") {
+  album6.albumDetails.labels.toUpperCase()
+}
+
 const album7 = {
   title: "True Stories",
   albumDetails: {
@@ -86,6 +103,8 @@ const album7 = {
 //    "Sire, EMI" into the array: ["Sire", "EMI"]
 // google js array split!
 
+album6.albumDetails.labels.split("")
+
 /////////////////////////////////////////////////////
 // Part 2: More Tasks About Datatypes and Structures
 /////////////////////////////////////////////////////
@@ -112,17 +131,27 @@ const talkingHeadsAlbums = [
 
 // 1. Create an object literal called `band`.
 
+const band = {}
+
 // 2. Give it the property `name` and set it to "Talking Heads"
 
+band.name = "Talking Heads"
+
 // 3. Give it the property `members` and set it to an array with a single
 //    string, "David Byrne", in it.
 
+band.members = ["Davis Byrne"]
+
 // 4. Give it the property `albums` and set it to the array stored in the
 //    variable talkingHeadsAlbums
 
+band.albums = talkingHeadsAlbums
+
 // 5. Add "Tiny Weymouth", "Chris Franz" and "Jerry Harrison" to the members
 //    array.
 
+band.members.push("Tiny Weymouth", "Chris Frans", "Jerry Harrison")
+
 ////////////////////////////////////////////////
 // Part 3: Conditional Logic
 ////////////////////////////////////////////////
@@ -132,11 +161,23 @@ const talkingHeadsAlbums = [
 //    "Talking heads didn't have much output." Use the array of albums
 //    talkingHeadsAlbums above.
 
+if (talkingHeadsAlbums.length > 6) {
+  console.log("Talking Heads were a prolific band")
+} else ( 
+  console.log("Talking heads didn't have much output.")
+)
+
 // 2. Write a conditional to check if the number of albums in
 //    talkingHeadsAlbums is odd or even, and then console.log
 //    "The number X is odd" or "The number X is even" with X being
 //    the number of albums.
 
+if (talkingHeadsAlbums.length % 2 === 0) {
+  console.log("The number X is even")
+} else (
+  console.log("The number X is odd")
+)
+
 // 3. Write conditionals to check if the number of albums in
 //    talkingHeadsAlbums is divisible by either 2 or 3, and then
 //    console.log one of:
@@ -150,15 +191,27 @@ const talkingHeadsAlbums = [
 // 4. Check your logic above against the numbers: 0, 1, 2, 6, 7, and 9.
 //    Make sure it always works!
 
+
+
 /////////////////////////////////////////////////////
 // Part 4: For Loops
 /////////////////////////////////////////////////////
 
 // 1. Use a for loop to print out the name of each Talking Heads album
 
+for (let i = 0; talkingHeadsAlbums.length; i++)
+  console.log(talkingHeadsAlbums[i])
+
 // 2. Create a variable called `sireTally`, and set it to the integer value 0.
 //    Then use a for-loop to go through all the Talking Heads albums,
 //    incrementing sireTally if the album was released under the "Sire" label.
 //
 //    Warning: some albums have a property `.label`, which is a string, and some
 //    have `.labels`, which is an Array!
+
+const sireTally = [0]
+for (let i = 0; talkingHeadsAlbums.length; i++) {
+  if () {
+    sireTally[0]++
+  }
+}

index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Fetch Lesson</title>
+        <script src="./scripts.js"></script>
+    </head>
+
+    <body>
+        <h1>Hello Fetch!</h1>
+
+        <form id="randomUserForm">
+            <label for="numberInput">Number of Users:</label>
+            <input id="numberInput" type="number" value="10"/>
+
+            <!-- <input type="submit" /> -->
+            <button type="submit">Fetch Users</button>
+        </form>
+
+        <ul id="randomUserList"></ul>
+    </body>
+</html>

script.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function() {
+    // using DOMContentLoaded to wait for the html DOM to load (instead of defer)
+    // window.fetch() aka fetch(url) returns Promise
+    const url = "https://swapi.dev/api/films"
+    fetch(url) // returns a Promise and we can use 'dot then' to define a function that will run when we hear back from the server
+        .then(function(rawResponseData) {
+            // console.log('raw response', rawResponseData.body)
+            return rawResponseData.json() // part of how fetch works
+        }) // .then takes a callback function
+        .then(function(jsonData) {
+            // write some code that will add this data from the api to our website
+            // console.log(jsonData.results[0])
+            const movie = jsonData.results[0]
+            const body = document.querySelector("body")
+            // three steps to adding dom elements with js
+            // 1. create the elements
+            const h2 = document.createElement("h2")
+            const p = document.createElement("p")
+            // 2. set the new element's properties
+            h2.innerText = movie.title
+            p.innerText = movie.opening_crawl
+            // 3. append the new elements to the dom
+            body.append(h2, p) // now the can 👀
+        })
+        .catch(console.warn) // some code to run if an error occurs
+
+        const randomUserUrl = "https://randomuser.me/api?results=100"
+    document.querySelector("#randomUserForm").addEventListener("submit", function(e) {
+        // tell the form not to refresh the page when the submit button is clicked
+        e.preventDefault()
+        // fetch the data from the api
+        const numberOfUsers = document.querySelector("#numberInput").value
+        const randomUserUrl = "https://randomuser.me/api?results=" + numberOfUsers
+        // https://www.google.com/search?q=mango
+        fetch(randomUserUrl)
+            .then(rawResponse => rawResponse.json()) // convert to json with an 'implicit return' arrow function
+            .then(jsonData => {
+                console.log(jsonData.results)
+                console.log(jsonData.results[0].name)
+                const ul = document.querySelector("#randomUserList")
+                jsonData.results.forEach(result => {
+                    // 1. create the new li elements
+                    const li = document.createElement("li")
+                    // 2. change their properties
+                    li.innerText = `${result.name.title} ${result.name.first} ${result.name.last}`
+                    // 3. append them to the DOM
+                    ul.append(li)
+                })
+            })
+            .catch(console.warn)
+    })
+
+})