JoeShep/Loop-a-Rama

## 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>

## Loop-a-Rama
Fundamental review of array methods in JS

## 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)