• 🎮 Optional Hacks (ONLY 1 is REQUIRED TO BE COMPLETED!)
    • Hack 1: Random Color Generator
    • Hack 2: Random Password Maker
    • Hack 3: Coin Flip Streak Tracker
    • Hack 4: Random Compliment Generator
    • Hack 5: Number Guessing Game
    • Hack 6: Random Team Maker

🎮 Optional Hacks (ONLY 1 is REQUIRED TO BE COMPLETED!)

Hack 1: Random Color Generator

Generate random RGB colors with one click.
Format: rgb(random, random, random) (0–255).
Change a box’s background & show the color code.

Hack 2: Random Password Maker

Create passwords with random letters & numbers.
User picks length (6–20).
One button = new password each time.

Hack 3: Coin Flip Streak Tracker

Flip a coin (50/50 chance).
Track the longest streak of same results.
Example: "Heads, Heads, Heads = 3 streak!"

Hack 4: Random Compliment Generator

Pick random compliments from a list of 10–15.
Button = new compliment.
Simple mood booster 💚.

Hack 5: Number Guessing Game

Computer picks random number (1–50).
User guesses → show “Too high!” or “Too low!”.
Count guesses until win.

Hack 6: Random Team Maker

Enter 6–10 names in a box.
Randomly split into 2 teams.
Display Team A and Team B lists.

All hacks use Math.random(), Math.floor(), arrays, and simple HTML buttons/displays!

%%js   

// Hack 1: Random Color Generator
(() => {
  const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
  const colorBox = document.getElementById('colorBox');
  const colorCode = document.getElementById('colorCode');
  document.getElementById('btnColor').addEventListener('click', () => {
    const r = randInt(0,255), g = randInt(0,255), b = randInt(0,255);
    const rgb = `rgb(${r}, ${g}, ${b})`;
    if (colorBox) colorBox.style.background = rgb;
    if (colorCode) colorCode.textContent = rgb;
  });
})();

%%js 

// Hack 2: Random Password Maker
(() => {
  const pool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  const out = document.getElementById('pwdOut');
  const lenEl = document.getElementById('pwdLen');

  const makePwd = len => Array.from({length: len}, () => pool[Math.floor(Math.random()*pool.length)]).join('');

  document.getElementById('btnPwd').addEventListener('click', () => {
    const len = Math.max(6, Math.min(20, parseInt(lenEl.value || '12', 10)));
    lenEl.value = String(len);
    out.textContent = makePwd(len);
  });

  document.getElementById('btnCopyPwd').addEventListener('click', async () => {
    try { await navigator.clipboard.writeText(out.textContent); alert('Copied!'); }
    catch { alert('Copy failed. Select and copy manually.'); }
  });
})();


%%js 

// Hack 3: Coin Flip Streak Tracker
(() => {
  const btn = document.getElementById('btnFlip');
  const faceEl = document.getElementById('coinFace');
  const currEl = document.getElementById('currStreak');
  const longEl = document.getElementById('longStreak');
  const historyEl = document.getElementById('history');

  let curr = 0, best = 0, last = null;
  const flip = () => Math.random() < 0.5 ? 'Heads' : 'Tails';

  btn.addEventListener('click', () => {
    const f = flip();
    if (faceEl) faceEl.textContent = f;

    const newHist = (historyEl.textContent + (historyEl.textContent ? ', ' : '') + f);
    historyEl.textContent = newHist.slice(-200);

    curr = (f === last) ? curr + 1 : 1;
    last = f;
    if (curr > best) best = curr;

    currEl.textContent = String(curr);
    longEl.textContent = String(best);
  });
})();

%%js 

// Hack 4: Random Compliment Generator
(() => {
  const compliments = [
    'You are cool.',
    'You are not fat.',
    'You are awesome.'
  ];
  const out = document.getElementById('complimentOut');
  document.getElementById('btnCompliment').addEventListener('click', () => {
    const idx = Math.floor(Math.random() * compliments.length);
    out.textContent = compliments[idx];
  });
})();


%%js 

// Hack 5: Number Guessing Game (1–50)
(() => {
  const randInt = (min, max) => Math.floor(Math.random()*(max-min+1))+min;

  let secret = randInt(1,50);
  let attempts = 0;

  const input = document.getElementById('guessInput');
  const feedback = document.getElementById('guessFeedback');
  const tries = document.getElementById('guessAttempts');

  function submit() {
    const val = parseInt(input.value, 10);
    if (Number.isNaN(val) || val < 1 || val > 50) { feedback.textContent = 'Enter 1–50.'; return; }
    attempts += 1; tries.textContent = String(attempts);
    if (val === secret) feedback.textContent = `Correct! The number was ${secret}.`;
    else if (val < secret) feedback.textContent = 'Too low!';
    else feedback.textContent = 'Too high!';
    input.focus(); input.select();
  }

  document.getElementById('btnGuess').addEventListener('click', submit);
  input.addEventListener('keyup', e => { if (e.key === 'Enter') submit(); });
  document.getElementById('btnResetGuess').addEventListener('click', () => {
    secret = randInt(1,50); attempts = 0; tries.textContent = '0';
    feedback.textContent = 'New round! Pick a number to start!';
    input.value = ''; input.focus();
  });
})();

%%js 

// Hack 6: Random Team Maker
(() => {
  const input = document.getElementById('teamInput');
  const listA = document.getElementById('teamA');
  const listB = document.getElementById('teamB');

  const render = (a,b) => {
    listA.innerHTML = a.map(n=>`<li>${n}</li>`).join('');
    listB.innerHTML = b.map(n=>`<li>${n}</li>`).join('');
  };

  const shuffle = arr => { for (let i = arr.length-1; i>0; i--) { const j = Math.floor(Math.random()*(i+1)); [arr[i],arr[j]] = [arr[j],arr[i]]; } return arr; };
  const parse = raw => raw.split(/\n|,/).map(s=>s.trim()).filter(Boolean);

  document.getElementById('btnTeams').addEventListener('click', () => {
    const names = parse(input.value);
    if (names.length < 6 || names.length > 10) { alert('Please enter between 6 and 10 names.'); return; }
    shuffle(names);
    const mid = Math.ceil(names.length/2);
    render(names.slice(0,mid), names.slice(mid));
  });

  document.getElementById('btnClearTeams').addEventListener('click', () => {
    input.value = '';
    render([],[]);
  });
})();