<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Pizza Time Elapsed</title> <style> body { font-family: Arial, sans-serif; background: #fff3e0; color: #333; text-align: center; padding-top: 50px; } #ticker { font-size: 2em; margin-top: 20px; } input[type="time"] { font-size: 1.2em; } button { font-size: 1em; padding: 8px 18px; border-radius: 7px; border: none; background: #ff9800; color: #fff; cursor: pointer; } button:hover { background: #fb8c00; } .label { font-weight: bold; font-size: 1.1em; margin-bottom: 8px; display: block; } </style></head><body> <h2>🍕 Pizza Time Tracker: Time Since You Ordered</h2> <label class="label" for="orderTime">What time did you order?</label> <input type="time" id="orderTime"> <button onclick="startTicker()">Start</button> <div id="ticker"></div>
<script> let interval = null;
function startTicker() { clearInterval(interval); const timeInput = document.getElementById('orderTime').value; if (!timeInput) { document.getElementById('ticker').innerText = "Please enter the time you ordered!"; return; }
// Get today's date and input time const now = new Date(); const [hours, minutes] = timeInput.split(':').map(Number); const orderTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, 0, 0);
// If order time is in the future (like after midnight), assume it was yesterday if (orderTime > now) { orderTime.setDate(orderTime.getDate() - 1); }
function updateTicker() { const elapsed = new Date() - orderTime; if (elapsed < 0) { document.getElementById('ticker').innerText = "You can't order from the future!"; clearInterval(interval); return; } const hours = Math.floor(elapsed / (1000 * 60 * 60)); const mins = Math.floor((elapsed / (1000 * 60)) % 60); const secs = Math.floor((elapsed / 1000) % 60);
document.getElementById('ticker').innerText = `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')} since you ordered.`; }
updateTicker(); interval = setInterval(updateTicker, 1000); } </script></body></html>