Hack 1: The “Counting Stars” Hack (The while Loop)

Instruction: To run this hack, call the countStars() function with a number to set the limit for the star count.

%%html

<h3>Poporn Hack 1 Output</h3>
<input type="number" id ="ph1input"> <button id=ph1button>Count Stars</button>
<div id=ph1output></div>


<script>
(() => {

  const output = document.getElementById("ph1output");
  const input = document.getElementById("ph1input");
  const button = document.getElementById("ph1button");

  function countStars(limit) {
    // 1. Initialize a counter variable. We'll start our count at 1.
    let count = 1;


    // 2. Start the `while` loop. The code inside this loop will run
    // as long as the condition `count <= limit` is true.
    while (count <= limit) {
      // 3. This is the code that runs in each iteration.
      console.log(`Star #${count} shining bright!`);
      output.innerText += `\nStar #${count} shining bright!`;


      // 4. This is the increment step. It's crucial! If we don't
      // increase the `count`, the loop will run forever (an infinite loop).
      count += 1;
    }


    // 5. This message is displayed once the loop condition is no longer true
    // and the loop has finished.
    console.log("All the stars have been counted.");
  }

  button.addEventListener("click", () => {
    output.innerText = "";
    if (0<input.value<=500){
      countStars(input.value);
    } else {
      output.innerText = "Error: input value out of range"; // basically just to prevent super duper long lag
    }
  
  });

})();
</script>

Poporn Hack 1 Output

Hack 2: The “Playlist Shuffle” Hack (The For Loop) 🎵

Instruction: To run this hack, define an array of strings called mySongs and pass that array into the playlistShuffle() function.

%%html

<h3>Popcorn Hack 2</h3>
<button id=ph2button>Play Playlist</button>

<div id="ph2output"></div>

<script>
(() => {

  const button = document.getElementById("ph2button");
  const output = document.getElementById("ph2output");
  // Example of how to define the array:
  // idk if we were supposed to put actual song names here so I just put Song 1-6
  const mySongs = ["Song 1", "Song 2", "Song 3", "Song 4", "Song 5", "Song 6"];

  function playlistShuffle(playlist) {
    // 1. Start the `for...of` loop. This loop is perfect for iterating
    // over the items of an array.
    // The variable `song` will hold the value of each item in the `playlist` array, one by one.
    for (const song of playlist) {
      // 2. Action performed for each song in the array.
      console.log(`Now playing: "${song}"`);
      output.innerText += `\nNow playing: "${song}"`;
    }


    // 3. This message is displayed once the loop has processed every item in the array.
    console.log("Playlist finished.")
    output.innerText += "\n" + "Playlist finished.";
  }


  button.addEventListener("click", () => {
    // Then, call the function: playlistShuffle(mySongs);
    playlistShuffle(mySongs);
  });

})();
</script>

Popcorn Hack 2

Submission

You will submit the link to your homework on a web page in the below form.
If you are unable to get your homework accessible from the website, you can upload this Jupyter notebook to the form.

IMPORTANT: If uploading, please name this Jupyter notebook in this format: [FirstName][LastName]_iterations_hw.ipynb

https://forms.gle/yaiYRXDq341kb2538