JavaScript Variables: Homework Notbook`

Use this Notbook to perform JavaScript Variable Homework Hacks.

%%javascript

/*
Let-Const Homework Instructions:
- Review the code in `hacks/snake.md`.
- Identify at least one primitive type and one reference type variable used in the game.
- For each, add andrun a code snippet to explain why you think `let` or `const` was chosen.
- Reflect: How might changing a variable’s declaration (from `let` to `const` or vice versa) impact the game’s operation?
- Reflect: How might changing a variable's value change the game's behavior?
*/

<IPython.core.display.Javascript object>

%%html

<!--
Add-Button Homework Instructions:
- Comment the code for Button 2 (Size Change) 
- Comment the code for Button 3 (Clicker Box).
- Add a 4th button, and make it do something new when clicked 
  - change background
  - highlight the text 
- Comment your new button code
-->

<!-- Button Container  -->
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
    <a style="text-decoration: none;">
        <!-- Color Change Button with id -->
        <div id="color-btn" style="background-color: #00FF00; color: white; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer;">
            Color Change
        </div>
    </a>
    <a style="text-decoration: none;">
        <!-- Size Change Button with id -->
        <div id="size-btn" style="background-color: #FF0000; color: white; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer;">
            Size Change
        </div>
    </a>
    <a style="text-decoration: none;">
        <!-- Clicker Box with id -->
        <div id="clicker-box" style="background-color: #12ABFF; color: white; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer;">
            Clicks: <span id="click-count">0</span>
        </div>
    </a>
    <a style="text-decoration: none;">
        <!-- Background Change Button with id -->
        <div id="bg-btn" style="background-color: #FFA500; color: white; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer;">
            Background Change
        </div>
    </a>
</div>

<script>
// All JS code inside a function to allow multiple runs in Jupyter Notebook without conflicts 
(function() {

  // 1. Color Change
  // Define const variable for the color button by its ID
  const colorBtn = document.getElementById('color-btn'); 
  // Define isWhite variable to track current color state
  let isWhite = true;
  // Define an event listener for the button click event
  colorBtn.addEventListener('click', function() {
      // Tooggle the button text color between white and black
      colorBtn.style.color = isWhite ? 'black' : 'white'; 
      isWhite = !isWhite; // Toggle to opposite state
  });

  // 2. Size Change
  const sizeBtn = document.getElementById('size-btn');
  let isLarge = false;
  sizeBtn.addEventListener('click', function() {
      if (isLarge) {
          sizeBtn.style.padding = '10px 20px';
          sizeBtn.style.fontSize = '1em';
      } else {
          sizeBtn.style.padding = '20px 40px';
          sizeBtn.style.fontSize = '1.5em';
      }
      isLarge = !isLarge;
  });

  // 3. Clicker Box (Cookie Clicker)
  const clickerBox = document.getElementById('clicker-box');
  const clickCount = document.getElementById('click-count');
  let count = 0;
  clickerBox.addEventListener('click', function() {
      clickCount.textContent = ++count; 
  });

  // 4. Background Change (changes only the button's background)
  const bgBtn = document.getElementById('bg-btn');
  let isOrange = true;
  bgBtn.addEventListener('click', function() {
      bgBtn.style.backgroundColor = isOrange ? '#4B0082' : '#FFA500';
      isOrange = !isOrange;
  });

})(); // End Jupyter Notebook required function()
</script>
Color Change
Size Change
Clicks: 0
Background Change