🧪 Week 5 – Guided Practice (a.k.a. List Wizard Training 🧙‍♂️)

This week, you'll harness the ancient powers of JavaScript to add, remove, and replace items in an array — and make the DOM dance with your commands. All through the console, like a true wizard.

🛠️ Setup

Create a file named index.html with this magical HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Week 5 – List Wizard Training 🧙‍♂️</title>
  <style>
    body { font-family: system-ui, Arial, sans-serif; line-height: 1.5; padding: 2rem; }
    h1 { margin-top: 0; }
    .card { border: 1px solid #ddd; border-radius: 12px; padding: 1rem 1.25rem; }
    ul { margin: .5rem 0 0; padding-left: 1.25rem; }
    code { background: #f6f8fa; padding: .1rem .35rem; border-radius: 6px; }
    .hint { color: #555; font-size: 0.95rem; }
  </style>
</head>
<body>
  <header>
    <h1>🧪 Week 5 – Guided Practice (List Wizard Training)</h1>
    <p class="hint">Open your browser console (<code>Ctrl/⌘ + Shift + J</code>) to cast your spells.</p>
  </header>

  <main>
    <section class="card" aria-labelledby="inv-title">
      <h2 id="inv-title">📜 Your Spellbook (Inventory)</h2>

      <!-- This is the exact target your JS practice uses -->
      <span id="items" aria-live="polite">
        <!-- JS will render a <ul><li>…</li></ul> here -->
      </span>

      <p class="hint">
        Try in the console:
        <code>addItem('🧪 Potion of Wisdom')</code>,
        <code>removeItem(0)</code>,
        <code>replaceItem(0, 'Phoenix Feather')</code>
      </p>
    </section>

    <section style="margin-top:1.5rem;">
      <h3>🧙‍♀️ Notes</h3>
      <ul>
        <li><code>addItem</code> uses <code>push()</code> to add to the array and then updates the DOM.</li>
        <li><code>removeItem(index)</code> uses <code>splice()</code> to delete by position.</li>
        <li><code>replaceItem(index, newItem)</code> swaps an existing item (via assignment or <code>splice()</code>).</li>
        <li><code>displayItems()</code> rebuilds the list inside <code>&lt;span id="items"&gt;</code>.</li>
      </ul>
    </section>
  </main>

  <noscript>This practice requires JavaScript. Please enable it to continue your wizardry. 🪄</noscript>

  <!-- 🧙‍♀️ “This is your enchanted scroll. The spells (scripts) go at the bottom!” -->
  <script src="script.js"></script>
</body>
</html>

🧙‍♀️ “This is your enchanted scroll. The spells (scripts) go at the bottom!”

Then summon your script.js like the coding sorcerer you are. You’ll write your magic there.

🧙‍♂️ Your Missions (a.k.a. Steps)

✨ Step 1: Create an Empty Array

Create an empty array called items.

You now have a list! It holds… nothing. But hey, it's full of potential.

🍎 Step 2: Write a Function to Add Items

Define a function called addItem. It should take one parameter and use .push() to add the item to your magical bag of items.

Think of .push() as throwing stuff into your backpack.

📜 Step 3: Show the List to the World

Use the DOM to find the <span id="items"> in your HTML.
Clear it, then use a loop to add every item.
Don’t forget to .join() the items like a playlist of your favorite chaos.

Pro tip: Clear the old list first, or you’ll end up stacking ghosts of past items.

🧪 Step 4: Test Your Function Like a Mad Scientist

In the console:

addItem('🧪 Potion of Wisdom');
addItem('🌮 Magic Taco');
addItem('🐉 Baby Dragon');

🧙‍♀️ Your DOM should now resemble a spellbook full of weird magical loot. If it doesn’t, blame the Magic Taco. 🌮✨

🧽 Step 5: Remove an Item (gently or violently)

Create a function removeItem(index) and use .splice() to delete the item at that index.

It’s like popping a bubble in your array—very satisfying.

📣 Step 6: Add a Talking Feature

Create a displayMessage() function to show a message when something happens.

Because if your code doesn't talk to you, is it even alive?

🕳️ Step 7: Try Deleting Things

removeItem(1); // Magic Taco vanishes into a swirling portal of mystery 🌮🌀

🧃 Step 8: Replace an Item

Define replaceItem(index, newItem) using splice() (or direct assignment) to swap an item.

replaceItem(0, '🐦 Phoenix Feather'); // Because nothing says upgrade like legendary loot. 🔥

🎯 Final Challenge: Fancy It Up

Display your list as proper <ul><li></li></ul> HTML.

Let’s get civilized—enough of this comma-separated chaos.

⚙️ Final Version (with Comments)

Yes, it's functional. Yes, it works. And yes, it might even impress your code crush 💘.

// 🧙‍♂️ An enchanted inventory system for magical items

// Start with an empty inventory array
const items = [];

// 🧪 Function to add an item to your wizard bag
function addItem(item) {
  items.push(item); // Add the new item
  displayItems(); // Refresh the list in the HTML
  displayMessage(`🧙 Added: ${item}`); // Console log a fun message
}

// 💥 Function to remove an item by its index
function removeItem(index) {
  if (index >= 0 && index < items.length) {
    const removed = items.splice(index, 1); // Remove the item
    displayItems(); // Refresh the list
    displayMessage(`💥 ${removed[0]} vanished into the void! 🌀`); // Dramatic exit message
  } else {
    displayMessage("⚠️ That item index doesn’t exist in your spellbook!"); // Invalid index warning
  }
}

// 🧾 Function to replace one item with another
function replaceItem(index, newItem) {
  if (index >= 0 && index < items.length) {
    const oldItem = items[index]; // Store the old item
    items[index] = newItem; // Replace with the new one
    displayItems(); // Update the visual list
    displayMessage(`Replaced "${oldItem}" with "${newItem}". Excellent swap!`);
  } else {
    displayMessage("📛 That index is beyond the bounds of your wizard bag.");
  }
}

// 🧾 Function to display all items in the list
function displayItems() {
  const span = document.getElementById("items");
  span.innerHTML = ""; // Clear the old list
  const listItems = []; // Start with an empty array

  for (const item of items) {
    listItems.push(`<li>${item}</li>`);
  }

  // Wrap the joined items with <ul> tags
  span.innerHTML = `<ul>${listItems.join("")}</ul>`;
}

// 📣 Function to display a console message
function displayMessage(msg) {
  console.log(msg); // Send message to console
}

// 🎉 Summon initial magical items
addItem('🧪 Potion of Wisdom');
addItem('📜 Ancient Spell Scroll');
addItem('🐉 Baby Dragon');
addItem('🌮 Magic Taco'); // Because obviously

// 🧹 Practice casting spells on the inventory
removeItem(1); // Remove the scroll
replaceItem(0, '🧪 Phoenix Feather'); // Upgrade the potion