rockchalkwushock/fizzbuzz.html

## fizzbuzz.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Poop</h1>
  <div id="content"></div>
  <script>
    // 1. Find entry point to DOM.
    const content = document.getElementById('content')
    // 2. Create array of 100 indexes.
    const arr = new Array(101)
    // 3. Loop over that array.
    for (let i = 1; i < arr.length; i++) {
      // 4. For every loop create an element.
      const p = document.createElement('p')
      // 5. Create a variable for later use. No need to give it a value.
      let node
      // 6. Cover the 'gotcha' case first!!!
      if (i % 3 === 0 && i % 5 === 0) {
        // 7. Assign the desired textNode to the variable.
        // i.e. 'Hello World'
        node = document.createTextNode('FizzBuzz')
        // 8. Add that textNode to the element we created.
        // i.e. <p>Hello World</p>
        p.appendChild(node)
      // 9. Cover the 'multiple of 5' case.
      } else if (i % 5 === 0) {
        node = document.createTextNode('Buzz')
        p.appendChild(node)
      // 10. Cover the 'multiple of 3' case.
      } else if (i % 3 === 0) {
        node = document.createTextNode('Fizz')
        p.appendChild(node)
      // 11. Cover every other case (fallback/'end-clause').
      } else {
        node = document.createTextNode(i)
        p.appendChild(node)
      }
      // 12. Add the element to the DOM at our entry point.
      // i.e. <div id="content">
      //        <p>Hello World</p> <-- This will be different for every completion of the loop,
      //                                and remember we are 'appending' so it goes to the end of the list.
      //      </div>
      content.appendChild(p)
      // Example:
      // <div id="content">
      //   <p>1</p>
      //   <p>2</p>
      //   <p>Fizz</p>
      //   <p>4</p>
      //   <p>Buzz</p>
      //   .
      //   .
      //   .
      // </div>
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<h1>Poop</h1>
	<div id="content"></div>
	<script>
	// 1. Find entry point to DOM.
	const content = document.getElementById('content')
	// 2. Create array of 100 indexes.
	const arr = new Array(101)
	// 3. Loop over that array.
	for (let i = 1; i < arr.length; i++) {
	// 4. For every loop create an element.
	const p = document.createElement('p')
	// 5. Create a variable for later use. No need to give it a value.
	let node
	// 6. Cover the 'gotcha' case first!!!
	if (i % 3 === 0 && i % 5 === 0) {
	// 7. Assign the desired textNode to the variable.
	// i.e. 'Hello World'
	node = document.createTextNode('FizzBuzz')
	// 8. Add that textNode to the element we created.
	// i.e. <p>Hello World</p>
	p.appendChild(node)
	// 9. Cover the 'multiple of 5' case.
	} else if (i % 5 === 0) {
	node = document.createTextNode('Buzz')
	p.appendChild(node)
	// 10. Cover the 'multiple of 3' case.
	} else if (i % 3 === 0) {
	node = document.createTextNode('Fizz')
	p.appendChild(node)
	// 11. Cover every other case (fallback/'end-clause').
	} else {
	node = document.createTextNode(i)
	p.appendChild(node)
	}
	// 12. Add the element to the DOM at our entry point.
	// i.e. <div id="content">
	// <p>Hello World</p> <-- This will be different for every completion of the loop,
	// and remember we are 'appending' so it goes to the end of the list.
	// </div>
	content.appendChild(p)
	// Example:
	// <div id="content">
	// <p>1</p>
	// <p>2</p>
	// <p>Fizz</p>
	// <p>4</p>
	// <p>Buzz</p>
	// .
	// .
	// .
	// </div>
	}
	</script>
	</body>
	</html>