<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Food Order - Different Waiters</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="left-column">
        <h3>Total Clicks :<span id="totalCount">0</span></h3>
        <button class="food-btn">🍔</button>
        <button class="food-btn">🍕</button>
        <button class="food-btn">🍗</button>
        <button class="food-btn">🥕</button>
        <button class="food-btn">🍦</button>
      </div>
      <div class="right-column">
        <div class="waiter-row">
          <div class="waiter-title">💁‍♂️ Normal Waiter</div>
          <p id="normalDisplay">No order yet...</p>
          <div class="order-count">
            Orders taken: <span id="normalCount">0</span>
          </div>
        </div>

        <div class="waiter-row">
          <div class="waiter-title">
            🤵 Debounced Waiter (Waits 2s after last order, then takes order)
          </div>
          <p id="debounceDisplay">No order yet...</p>
          <div class="order-count">
            Orders taken: <span id="debounceCount">0</span>
          </div>
        </div>

        <div class="waiter-row">
          <div class="waiter-title">
            👨‍🍳 Throttled Waiter (Takes order every 2s)
          </div>
          <p id="throttleDisplay">No order yet...</p>
          <div class="order-count">
            Orders taken: <span id="throttleCount">0</span>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

:root {
  --background: #1e1e2f;
  --foreground: #e0e0e0;
  --primary-border: #3a3a4a;
  --secondary-border: #4a4a5a;
  --accent-color: #eceaf3;
  --hover-scale: 1.05;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}

.container {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.left-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 100px;
}

.right-column {
  flex: 1;
  padding: 1rem;
  border-left: 2px solid var(--primary-border);
}

.food-btn {
  font-size: 1.5rem;
  padding: 1rem;
  cursor: pointer;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background-color: var(--background);
  color: var(--foreground);
  transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.food-btn:hover {
  transform: scale(var(--hover-scale));
  background-color: var(--accent-color);
  color: #fff;
}

.waiter-row {
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid var(--secondary-border);
  border-radius: 8px;
  background-color: #2a2a3a;
}

.waiter-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.order-count {
  color: #bbb;
  font-size: 0.9rem;
}

// Initialize counters
let normalCount = 0;
let debounceCount = 0;
let throttleCount = 0;

// Normal waiter
const updateNormalOrder = (foodEmoji) => {
  normalCount++;
  document.getElementById(
    'normalDisplay'
  ).textContent = `Taking order for: ${foodEmoji}`;
  document.getElementById('totalCount').textContent = normalCount;
  document.getElementById('normalCount').textContent = normalCount;
};

// Debounced waiter
const updateDebounceOrder = _.debounce((foodEmoji) => {
  debounceCount++;
  document.getElementById(
    'debounceDisplay'
  ).textContent = `Taking order for: ${foodEmoji}`;
  document.getElementById('debounceCount').textContent = debounceCount;
}, 2000);

// Throttled waiter
const updateThrottleOrder = _.throttle((foodEmoji) => {
  throttleCount++;
  document.getElementById(
    'throttleDisplay'
  ).textContent = `Taking order for: ${foodEmoji}`;
  document.getElementById('throttleCount').textContent = throttleCount;
}, 2000);

// Add click handlers to all buttons
document.querySelectorAll('.food-btn').forEach((button) => {
  button.addEventListener('click', (e) => {
    const foodEmoji = e.target.textContent;
    updateNormalOrder(foodEmoji);
    updateDebounceOrder(foodEmoji);
    updateThrottleOrder(foodEmoji);
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.