Meeting Cost Clock<\/title>\n <style>\n<!-- :root{--primary:#7c3aed;--muted:#94a3b8;--accent:#06b6d4} --!>\n<!-- *{box-sizing:border-box} --!>\n body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial; margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--muted)} \n .container{width:800px; max-width:90%; padding:28px; border-radius:14px; border-style:solid; border-width:1px; border-color:#000; background:#fff; box-shadow:50 10px 30px rgba(2,6,23,0.1)}\n<!-- h1{margin:10 0 18px; font-size:44px} --!>\n p.lead{margin:0 0 18px; color:var(--muted)}\n .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px}\n label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}\n input[type=\"number\"]{width:90%; padding:10px 12px; border-radius:8px; border:1px solid #ccc; background:transparent; color:inherit; font-size:16px}\n .controls{display:flex; gap:10px; align-items:center}\n button{padding:10px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:600}\n .btn-start{background:var(--primary); color:white}\n .btn-stop{background:#eee; color:#333}\n .display{margin-top:12px; padding:18px; border-radius:12px; background:#f9f9f9; font-size:28px; display:flex; align-items:center; justify-content:space-between}\n .value{font-variant-numeric:tabular-nums}\n .meta{font-size:13px; color:var(--muted)}\n .hint{background:#000; padding:8px 10px; border-radius:8px}\n @media (max-width:640px){.grid{grid-template-columns:1fr}} \n <\/style>\n<\/head>\n<body>\n\n <main class=\"container\" role=\"main\">\n <p class=\"lead\">Enter an estimate of the average hourly rate of each attendee and the number of attendees in the meeting. When you click <strong>Start<\/strong>, the result will update every second as: <em>(hourly rate \u00d7 attendees \u00d7 seconds) \u00f7 3600<\/em>.<\/p>\n\n <div class=\"grid\" aria-hidden=\"false\">\n <div>\n <label for=\"dollar\">Average hourly rate<\/label>\n <input id=\"dollar\" type=\"number\" inputmode=\"decimal\" step=\"0.01\" min=\"0\" value=\"35.00\" aria-label=\"Average hourly rate\">\n <\/div>\n <div>\n <label for=\"people\">Attendees<\/label>\n <input id=\"people\" type=\"number\" inputmode=\"numeric\" step=\"1\" min=\"0\" value=\"3\" aria-label=\"Attendees\">\n <\/div>\n <\/div>\n\n <div class=\"controls\">\n <button id=\"startBtn\" class=\"btn-start\">Start<\/button>\n <button id=\"stopBtn\" class=\"btn-stop\" disabled>Stop<\/button>\n <div class=\"meta\">Seconds elapsed: <span id=\"seconds\">0<\/span><\/div>\n <\/div>\n\n <div class=\"display\" role=\"status\" aria-live=\"polite\">\n <div>\n <div class=\"meta\">Current Meeting Cost<\/div>\n <div class=\"value\" id=\"currentValue\" style=\"color: blue;\">$0.00<\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n const dollarInput = document.getElementById('dollar');\n const peopleInput = document.getElementById('people');\n const startBtn = document.getElementById('startBtn');\n const stopBtn = document.getElementById('stopBtn');\n const currentValue = document.getElementById('currentValue');\n const secondsEl = document.getElementById('seconds');\n\n let intervalId = null;\n let startTime = null;\n\n function formatCurrency(n){\n const num = Number(n) || 0;\n return num.toLocaleString(undefined, {style:'currency', currency:'USD', minimumFractionDigits:2, maximumFractionDigits:2});\n }\n\n function computeAndRender(){\n const now = Date.now();\n const elapsedMs = now - startTime;\n const seconds = Math.floor(elapsedMs \/ 1000);\n const secondsCount = seconds;\n secondsEl.textContent = secondsCount;\n\n const d = parseFloat(dollarInput.value) || 0;\n const p = parseFloat(peopleInput.value) || 0;\n\n const result = (d * p * secondsCount) \/ 3600;\n currentValue.textContent = formatCurrency(result);\n }\n\n startBtn.addEventListener('click', ()=>{\n if(intervalId) return;\n startTime = Date.now();\n secondsEl.textContent = '0';\n currentValue.textContent = formatCurrency(0);\n\n intervalId = setInterval(()=>{\n computeAndRender();\n }, 1000);\n\n startBtn.disabled = true;\n stopBtn.disabled = false;\n dollarInput.disabled = true;\n peopleInput.disabled = true;\n });\n\n stopBtn.addEventListener('click', ()=>{\n if(!intervalId) return;\n clearInterval(intervalId);\n intervalId = null;\n startBtn.disabled = false;\n stopBtn.disabled = true;\n dollarInput.disabled = false;\n peopleInput.disabled = false;\n });\n\n [dollarInput, peopleInput].forEach(inp => inp.addEventListener('keydown', (e)=>{\n if(e.key === 'Enter') startBtn.click();\n }));\n\n window.addEventListener('beforeunload', ()=>{\n if(intervalId) clearInterval(intervalId);\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Meeting Cost Clock Enter an estimate of the average hourly rate of each attendee and the number of attendees in the meeting. When you click Start, the result will update every second as: (hourly rate \u00d7 attendees \u00d7 seconds) \u00f7 3600. Average hourly rate Attendees Start Stop Seconds elapsed: 0 Current Meeting Cost $0.00<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-652","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/pages\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bettermeetings.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=652"}],"version-history":[{"count":66,"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/pages\/652\/revisions"}],"predecessor-version":[{"id":869,"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/pages\/652\/revisions\/869"}],"wp:attachment":[{"href":"https:\/\/bettermeetings.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":652,"date":"2025-09-09T14:49:27","date_gmt":"2025-09-09T14:49:27","guid":{"rendered":"https:\/\/bettermeetings.online\/?page_id=652"},"modified":"2025-12-08T19:36:17","modified_gmt":"2025-12-08T19:36:17","slug":"meeting-cost-clock","status":"publish","type":"page","link":"https:\/\/bettermeetings.online\/?page_id=652","title":{"rendered":"Meeting Cost Clock"},"content":{"rendered":"\n\n\n\n \n \n Meeting Cost Clock<\/title>\n <style>\n<!-- :root{--primary:#7c3aed;--muted:#94a3b8;--accent:#06b6d4} --!>\n<!-- *{box-sizing:border-box} --!>\n body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial; margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--muted)} \n .container{width:800px; max-width:90%; padding:28px; border-radius:14px; border-style:solid; border-width:1px; border-color:#000; background:#fff; box-shadow:50 10px 30px rgba(2,6,23,0.1)}\n<!-- h1{margin:10 0 18px; font-size:44px} --!>\n p.lead{margin:0 0 18px; color:var(--muted)}\n .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px}\n label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}\n input[type=\"number\"]{width:90%; padding:10px 12px; border-radius:8px; border:1px solid #ccc; background:transparent; color:inherit; font-size:16px}\n .controls{display:flex; gap:10px; align-items:center}\n button{padding:10px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:600}\n .btn-start{background:var(--primary); color:white}\n .btn-stop{background:#eee; color:#333}\n .display{margin-top:12px; padding:18px; border-radius:12px; background:#f9f9f9; font-size:28px; display:flex; align-items:center; justify-content:space-between}\n .value{font-variant-numeric:tabular-nums}\n .meta{font-size:13px; color:var(--muted)}\n .hint{background:#000; padding:8px 10px; border-radius:8px}\n @media (max-width:640px){.grid{grid-template-columns:1fr}} \n <\/style>\n<\/head>\n<body>\n\n <main class=\"container\" role=\"main\">\n <p class=\"lead\">Enter an estimate of the average hourly rate of each attendee and the number of attendees in the meeting. When you click <strong>Start<\/strong>, the result will update every second as: <em>(hourly rate \u00d7 attendees \u00d7 seconds) \u00f7 3600<\/em>.<\/p>\n\n <div class=\"grid\" aria-hidden=\"false\">\n <div>\n <label for=\"dollar\">Average hourly rate<\/label>\n <input id=\"dollar\" type=\"number\" inputmode=\"decimal\" step=\"0.01\" min=\"0\" value=\"35.00\" aria-label=\"Average hourly rate\">\n <\/div>\n <div>\n <label for=\"people\">Attendees<\/label>\n <input id=\"people\" type=\"number\" inputmode=\"numeric\" step=\"1\" min=\"0\" value=\"3\" aria-label=\"Attendees\">\n <\/div>\n <\/div>\n\n <div class=\"controls\">\n <button id=\"startBtn\" class=\"btn-start\">Start<\/button>\n <button id=\"stopBtn\" class=\"btn-stop\" disabled>Stop<\/button>\n <div class=\"meta\">Seconds elapsed: <span id=\"seconds\">0<\/span><\/div>\n <\/div>\n\n <div class=\"display\" role=\"status\" aria-live=\"polite\">\n <div>\n <div class=\"meta\">Current Meeting Cost<\/div>\n <div class=\"value\" id=\"currentValue\" style=\"color: blue;\">$0.00<\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n const dollarInput = document.getElementById('dollar');\n const peopleInput = document.getElementById('people');\n const startBtn = document.getElementById('startBtn');\n const stopBtn = document.getElementById('stopBtn');\n const currentValue = document.getElementById('currentValue');\n const secondsEl = document.getElementById('seconds');\n\n let intervalId = null;\n let startTime = null;\n\n function formatCurrency(n){\n const num = Number(n) || 0;\n return num.toLocaleString(undefined, {style:'currency', currency:'USD', minimumFractionDigits:2, maximumFractionDigits:2});\n }\n\n function computeAndRender(){\n const now = Date.now();\n const elapsedMs = now - startTime;\n const seconds = Math.floor(elapsedMs \/ 1000);\n const secondsCount = seconds;\n secondsEl.textContent = secondsCount;\n\n const d = parseFloat(dollarInput.value) || 0;\n const p = parseFloat(peopleInput.value) || 0;\n\n const result = (d * p * secondsCount) \/ 3600;\n currentValue.textContent = formatCurrency(result);\n }\n\n startBtn.addEventListener('click', ()=>{\n if(intervalId) return;\n startTime = Date.now();\n secondsEl.textContent = '0';\n currentValue.textContent = formatCurrency(0);\n\n intervalId = setInterval(()=>{\n computeAndRender();\n }, 1000);\n\n startBtn.disabled = true;\n stopBtn.disabled = false;\n dollarInput.disabled = true;\n peopleInput.disabled = true;\n });\n\n stopBtn.addEventListener('click', ()=>{\n if(!intervalId) return;\n clearInterval(intervalId);\n intervalId = null;\n startBtn.disabled = false;\n stopBtn.disabled = true;\n dollarInput.disabled = false;\n peopleInput.disabled = false;\n });\n\n [dollarInput, peopleInput].forEach(inp => inp.addEventListener('keydown', (e)=>{\n if(e.key === 'Enter') startBtn.click();\n }));\n\n window.addEventListener('beforeunload', ()=>{\n if(intervalId) clearInterval(intervalId);\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Meeting Cost Clock Enter an estimate of the average hourly rate of each attendee and the number of attendees in the meeting. When you click Start, the result will update every second as: (hourly rate \u00d7 attendees \u00d7 seconds) \u00f7 3600. Average hourly rate Attendees Start Stop Seconds elapsed: 0 Current Meeting Cost $0.00<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-652","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/pages\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bettermeetings.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=652"}],"version-history":[{"count":66,"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/pages\/652\/revisions"}],"predecessor-version":[{"id":869,"href":"https:\/\/bettermeetings.online\/index.php?rest_route=\/wp\/v2\/pages\/652\/revisions\/869"}],"wp:attachment":[{"href":"https:\/\/bettermeetings.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}