{"id":254,"date":"2026-03-25T18:39:34","date_gmt":"2026-03-25T18:39:34","guid":{"rendered":"https:\/\/suhan.aimcorp.org\/?page_id=254"},"modified":"2026-03-25T18:40:42","modified_gmt":"2026-03-25T18:40:42","slug":"mcat-cars-timer","status":"publish","type":"page","link":"https:\/\/suhan.aimcorp.org\/index.php\/mcat-cars-timer\/","title":{"rendered":"MCAT CARS Timer"},"content":{"rendered":"\n<div id=\"mcat-timer\">\n\n  <style>\n    #mcat-timer {\n      width: 320px;\n      padding: 15px;\n      font-family: Arial;\n      background: black;\n      color: white;\n      border-radius: 10px;\n      transition: background 0.5s linear;\n    }\n\n    #mcat-timer input {\n      width: 90px;\n      padding: 3px;\n    }\n\n    #mcat-timer #time {\n      margin-top: 6px;\n      font-size: 22px;\n    }\n\n    #mcat-timer #indicator {\n      margin-top: 4px;\n      font-weight: bold;\n    }\n\n    #mcat-timer small {\n      opacity: 0.7;\n    }\n  <\/style>\n\n  <div id=\"controls\">\n    <label>Time (HH:MM:SS):<\/label>\n    <input id=\"timeInput\" type=\"text\" value=\"00:09:00\">\n\n    <div id=\"time\">09:00<\/div>\n\n    <div id=\"indicator\">Press SPACE to Start<\/div>\n    <small>(Cycle: Running \u2192 Paused \u2192 Reset \u2192 Start)<\/small>\n  <\/div>\n\n<\/div>\n\n<script>\n(function(){\n  let total = 540;\n  let remaining = total;\n  let timer = null;\n\n  let state = \"reset\";\n\n  const container = document.getElementById(\"mcat-timer\");\n  const timeEl = container.querySelector(\"#time\");\n  const inputEl = container.querySelector(\"#timeInput\");\n  const indicatorEl = container.querySelector(\"#indicator\");\n\n  function parseTime(str){\n    let parts = str.split(\":\").map(x=>parseInt(x)||0);\n\n    if(parts.length === 1) return parts[0]*60;\n    if(parts.length === 2) return parts[0]*60 + parts[1];\n    return parts[0]*3600 + parts[1]*60 + parts[2];\n  }\n\n  function format(t){\n    let h = Math.floor(t\/3600);\n    let m = Math.floor((t%3600)\/60);\n    let s = t%60;\n\n    return (h>0)\n      ? `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`\n      : `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;\n  }\n\n  function setColor(){\n    let percent = remaining \/ total;\n    if(percent < 0) percent = 0;\n    let hue = percent * 120;\n    container.style.background = `hsl(${hue}, 80%, 40%)`;\n  }\n\n  function updateIndicator(){\n    let text =\n      state===\"running\" ? \"Press SPACE to Pause\" :\n      state===\"paused\"  ? \"Press SPACE to Reset\" :\n                          \"Press SPACE to Start\";\n\n    indicatorEl.innerText = text;\n  }\n\n  function render(){\n    timeEl.innerText = format(remaining);\n    setColor();\n    updateIndicator();\n  }\n\n  function start(){\n    if(timer) return;\n    state = \"running\";\n    updateIndicator();\n\n    timer = setInterval(()=>{\n      remaining--;\n\n      if(remaining <= 0){\n        remaining = 0;\n        render();\n        clearInterval(timer);\n        timer=null;\n\n        state=\"paused\";\n        indicatorEl.innerText = \"Time Up - Press SPACE to Reset\";\n        return;\n      }\n\n      render();\n    },1000);\n  }\n\n  function pause(){\n    if(timer){\n      clearInterval(timer);\n      timer=null;\n    }\n    state=\"paused\";\n    updateIndicator();\n  }\n\n  function reset(){\n    if(timer){\n      clearInterval(timer);\n      timer=null;\n    }\n\n    total = parseTime(inputEl.value);\n    remaining = total;\n\n    state=\"reset\";\n    render();\n  }\n\n  container.addEventListener(\"keydown\",(e)=>{\n    if(e.code===\"Space\"){\n      e.preventDefault();\n\n      if(state===\"running\") pause();\n      else if(state===\"paused\") reset();\n      else if(state===\"reset\") start();\n    }\n  });\n\n  \/\/ Allow clicking box to focus for keyboard input\n  container.tabIndex = 0;\n\n  reset();\n})();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Time (HH:MM:SS): 09:00 Press SPACE to Start (Cycle: Running \u2192 Paused \u2192 Reset \u2192 Start)<\/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-254","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/suhan.aimcorp.org\/index.php\/wp-json\/wp\/v2\/pages\/254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suhan.aimcorp.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suhan.aimcorp.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suhan.aimcorp.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suhan.aimcorp.org\/index.php\/wp-json\/wp\/v2\/comments?post=254"}],"version-history":[{"count":2,"href":"https:\/\/suhan.aimcorp.org\/index.php\/wp-json\/wp\/v2\/pages\/254\/revisions"}],"predecessor-version":[{"id":256,"href":"https:\/\/suhan.aimcorp.org\/index.php\/wp-json\/wp\/v2\/pages\/254\/revisions\/256"}],"wp:attachment":[{"href":"https:\/\/suhan.aimcorp.org\/index.php\/wp-json\/wp\/v2\/media?parent=254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}