JoeShep · June 16, 2021 19:40
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 </head>
 <body>

  <header><h2>Greetings From Around the World</h2></header>
  <main id="container"></main>

  <script src="main.js"></script>
 </body>
 </html>
diff --git a/Loop-a-Rama b/Loop-a-Rama
 Fundamental review of array methods in JS
diff --git a/main.js b/main.js
 // Attach your JS to some element in the DOM where we can dynamically add and/or remove HTML
 const greetingListContainer = document.querySelector("#container")

 // Array of strings`
 const greetings = ["Hello", "Bonjour", "Hola", "Shikamoo"]

 // Make a new array of the greetings with added content to each string
 const worldGreetings = []

 // Your basic loop
 // 1) create a variable to describe each SINGLE thing in the array ( const word or const greeting )
 // 2) reference the array that those things are in ( greetings )
 for( const greeting of greetings ) {
  // How many times will the next two lines of code run?
  const newGreeting = `${greeting}, world!`
  worldGreetings.push(newGreeting)
 }
 console.log('Our worldGreetings array:', worldGreetings );

 // Same result as above, but using .map
 const worldGreetings2 = greetings.map(
  // how many times will this function be called by .map?
  (greeting) => {
    return `${greeting}, world!`
  }
 )
 console.log('Our worldGreetings array using .map:', worldGreetings2 );


 // DOM manipulation example with for...of
 // let HTMLStringToPutInTheDOM = `<ul>`
 // // Your basic loop used to build HTML to put into the DOM
 // // 1) create a variable to describe each SINGLE thing in the array ( const word or const greeting )
 // // 2) reference the array that those things are in ( greetings )
 // for (const greeting of greetings) {
 //   // 3) describe the action to take n times (once for each item in the array)
 //   HTMLStringToPutInTheDOM += `<li>${greeting}, world!</li>`
 // }

 // HTMLStringToPutInTheDOM += `</ul>`

 // greetingListContainer.innerHTML = HTMLStringToPutInTheDOM

 // The same result as the DOM manipulation example above, but using map
 // **First Show just putting the whole array into the DOM. Doesn't break!**
 let HTMLStringToPutInTheDOM = `
  <ul>
    ${
      // The result of calling map will be an array. We can call join() on that array to produce a string of everything inside that array
      greetings.map(
        (greeting) => {
          return `<li>${greeting}, world!</li>`
        }
      ).join("") // what we pass to join() is what will be inserted between each string
    }
  </ul>
 `
 greetingListContainer.innerHTML = HTMLStringToPutInTheDOM

 // Array of objects
 const greetings2 = [
  {
    word: "Hello",
    language: "English"
  },
  {
    word: "Bonjour",
    language: "French"
  },
  {
    word: "Hola",
    language: "Spanish"
  },
  {
    word: "Shikamoo",
    language: "Swahili"
  }
 ]

 // Let's do the same process as earlier, but with each item in the array being an object. How can we get the same result of a string of HTML from this?
 let HTMLStringToPutInTheDOM2 = `
  <ul>
    ${
      // The result of calling map will be an array. We can call join() on that array to produce a string of everything inside that array
      greetings2.map(
        // What is greeting? SO important to understand that it is an object, because greetings is an array of objects,
        (greeting) => {
          return `<li>${greeting.word}, world!</li>`
        }
      ).join("") // what we pass to join() is what will be inserted between each string
    }
  </ul>
 `
 greetingListContainer.innerHTML = HTMLStringToPutInTheDOM2


 // FILTER
 // What if we don't want all of the things in an array, but just some things?
 const greetingsThatStartWithH = greetings2.filter(
  (greeting) => {
    // does some value in the greeting meet a certain condition? If so, this function should return 'true' and add the greeting to the new arrayof filteredGreetings
    const trueOrFalse = greeting.word.startsWith("H") //startsWith returns true or false
    return trueOrFalse
  }
 )
 console.log('array of greetings that start with H', greetingsThatStartWithH)

 // Find the one ( or first greeting that is in Spanish )
 const spanishGreeting = greetings2.find(
  (greeting) => {
    // Just like filter(), if some value in the greeting meets a certain condition, this function should return 'true' to tell find() that it has found what it's looking for.
    // Notice that we're doing in one line what we did in 2 lines above. Just a shorthand approach
    return greeting.language === "Spanish"
  }
 )

 console.log("The object from greetings2 whose language is Spanish", spanishGreeting)
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>

	<header><h2>Greetings From Around the World</h2></header>
	<main id="container"></main>

	<script src="main.js"></script>
	</body>
	</html>
	// Attach your JS to some element in the DOM where we can dynamically add and/or remove HTML
	const greetingListContainer = document.querySelector("#container")

	// Array of strings`
	const greetings = ["Hello", "Bonjour", "Hola", "Shikamoo"]

	// Make a new array of the greetings with added content to each string
	const worldGreetings = []

	// Your basic loop
	// 1) create a variable to describe each SINGLE thing in the array ( const word or const greeting )
	// 2) reference the array that those things are in ( greetings )
	for( const greeting of greetings ) {
	// How many times will the next two lines of code run?
	const newGreeting = `${greeting}, world!`
	worldGreetings.push(newGreeting)
	}
	console.log('Our worldGreetings array:', worldGreetings );

	// Same result as above, but using .map
	const worldGreetings2 = greetings.map(
	// how many times will this function be called by .map?
	(greeting) => {
	return `${greeting}, world!`
	}
	)
	console.log('Our worldGreetings array using .map:', worldGreetings2 );


	// DOM manipulation example with for...of
	// let HTMLStringToPutInTheDOM = `<ul>`
	// // Your basic loop used to build HTML to put into the DOM
	// // 1) create a variable to describe each SINGLE thing in the array ( const word or const greeting )
	// // 2) reference the array that those things are in ( greetings )
	// for (const greeting of greetings) {
	// // 3) describe the action to take n times (once for each item in the array)
	// HTMLStringToPutInTheDOM += `<li>${greeting}, world!</li>`
	// }

	// HTMLStringToPutInTheDOM += `</ul>`

	// greetingListContainer.innerHTML = HTMLStringToPutInTheDOM

	// The same result as the DOM manipulation example above, but using map
	// First Show just putting the whole array into the DOM. Doesn't break!
	let HTMLStringToPutInTheDOM = `
	<ul>
	${
	// The result of calling map will be an array. We can call join() on that array to produce a string of everything inside that array
	greetings.map(
	(greeting) => {
	return `<li>${greeting}, world!</li>`
	}
	).join("") // what we pass to join() is what will be inserted between each string
	}
	</ul>
	`
	greetingListContainer.innerHTML = HTMLStringToPutInTheDOM

	// Array of objects
	const greetings2 = [
	{
	word: "Hello",
	language: "English"
	},
	{
	word: "Bonjour",
	language: "French"
	},
	{
	word: "Hola",
	language: "Spanish"
	},
	{
	word: "Shikamoo",
	language: "Swahili"
	}
	]

	// Let's do the same process as earlier, but with each item in the array being an object. How can we get the same result of a string of HTML from this?
	let HTMLStringToPutInTheDOM2 = `
	<ul>
	${
	// The result of calling map will be an array. We can call join() on that array to produce a string of everything inside that array
	greetings2.map(
	// What is greeting? SO important to understand that it is an object, because greetings is an array of objects,
	(greeting) => {
	return `<li>${greeting.word}, world!</li>`
	}
	).join("") // what we pass to join() is what will be inserted between each string
	}
	</ul>
	`
	greetingListContainer.innerHTML = HTMLStringToPutInTheDOM2


	// FILTER
	// What if we don't want all of the things in an array, but just some things?
	const greetingsThatStartWithH = greetings2.filter(
	(greeting) => {
	// does some value in the greeting meet a certain condition? If so, this function should return 'true' and add the greeting to the new arrayof filteredGreetings
	const trueOrFalse = greeting.word.startsWith("H") //startsWith returns true or false
	return trueOrFalse
	}
	)
	console.log('array of greetings that start with H', greetingsThatStartWithH)

	// Find the one ( or first greeting that is in Spanish )
	const spanishGreeting = greetings2.find(
	(greeting) => {
	// Just like filter(), if some value in the greeting meets a certain condition, this function should return 'true' to tell find() that it has found what it's looking for.
	// Notice that we're doing in one line what we did in 2 lines above. Just a shorthand approach
	return greeting.language === "Spanish"
	}
	)

	console.log("The object from greetings2 whose language is Spanish", spanishGreeting)