{"id":1567,"date":"2025-10-21T19:53:33","date_gmt":"2025-10-21T19:53:33","guid":{"rendered":"http:\/\/selectairsystemsinccom.local\/?page_id=1567"},"modified":"2025-10-21T19:56:31","modified_gmt":"2025-10-21T19:56:31","slug":"closure-panel-height","status":"publish","type":"page","link":"https:\/\/selectairsystemsinc.com\/selectwp\/closure-panel-height\/","title":{"rendered":"Closure Panel Height"},"content":{"rendered":"\n
\n \n\n\n \n \n Closure Panel Height Calculator<\/title>\n <style>\n :root {\n --max-width: 520px;\n --accent: #0b63d6;\n --bg: #f7f9fc;\n --card: #ffffff;\n }\n body {\n font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\n background: var(--bg);\n margin: 24px;\n display: flex;\n justify-content: center;\n }\n .card {\n width: 100%;\n max-width: var(--max-width);\n background: var(--card);\n padding: 18px;\n border-radius: 10px;\n box-shadow: 0 6px 18px rgba(20,30,50,0.06);\n box-sizing: border-box;\n }\n h1 {\n margin: 0 0 12px 0;\n font-size: 18px;\n color: #0b2b4a;\n }\n .row {\n display: flex;\n gap: 12px;\n margin-bottom: 12px;\n align-items: center;\n }\n label {\n flex: 1 0 220px;\n font-size: 14px;\n color: #274156;\n }\n input[type=\"number\"] {\n width: 160px;\n padding: 8px 10px;\n border-radius: 6px;\n border: 1px solid #d6e0ea;\n font-size: 14px;\n box-sizing: border-box;\n }\n .result {\n margin-top: 14px;\n padding: 12px;\n background: #f1f6ff;\n border-radius: 8px;\n border: 1px solid rgba(11,99,214,0.08);\n }\n .big {\n font-weight: 700;\n font-size: 20px;\n color: var(--accent);\n }\n .small {\n font-size: 13px;\n color: #3b556f;\n margin-top: 6px;\n }\n .note {\n margin-top: 10px;\n font-size: 12px;\n color: #6b7b8d;\n }\n .error {\n color: #9b1c1c;\n font-size: 13px;\n margin-left: 8px;\n }\n\n \/* Responsive for small screens *\/\n @media (max-width: 480px) {\n .row { flex-direction: column; align-items: stretch; }\n label { width: auto; }\n input[type=\"number\"] { width: 100%; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"card\" role=\"region\" aria-label=\"Closure panel height calculator\">\n <h1>Closure Panel Height Calculator<\/h1>\n\n <div class=\"row\">\n <label for=\"hanging\">Hanging height (inches)<\/label>\n <input id=\"hanging\" type=\"number\" step=\"0.01\" min=\"0\" placeholder=\"e.g. 30\" inputmode=\"decimal\">\n <\/div>\n\n <div class=\"row\">\n <label for=\"front\">Front of hood (inches)<\/label>\n <input id=\"front\" type=\"number\" step=\"0.01\" min=\"0\" placeholder=\"e.g. 18\" inputmode=\"decimal\">\n <\/div>\n\n <div class=\"row\">\n <label for=\"ceiling\">Ceiling height (inches)<\/label>\n <input id=\"ceiling\" type=\"number\" step=\"0.01\" min=\"0\" placeholder=\"e.g. 96\" inputmode=\"decimal\">\n <\/div>\n\n <div class=\"result\" aria-live=\"polite\">\n <div>Closure panel height<\/div>\n <div id=\"closure\" class=\"big\">\u2014<\/div>\n <div id=\"closureFeet\" class=\"small\"><\/div>\n <div id=\"error\" class=\"error\" role=\"status\" aria-atomic=\"true\"><\/div>\n <\/div>\n\n <div class=\"note\">\n Formula used: <strong>closure = ceiling height \u2212 (hanging height + front of hood)<\/strong>.\n <\/div>\n <\/div>\n\n <script>\n \/\/ Elements\n const hangingEl = document.getElementById('hanging');\n const frontEl = document.getElementById('front');\n const ceilingEl = document.getElementById('ceiling');\n const closureEl = document.getElementById('closure');\n const closureFeetEl = document.getElementById('closureFeet');\n const errorEl = document.getElementById('error');\n\n \/\/ compute result (assumed formula: ceiling - (hanging + front))\n function compute() {\n errorEl.textContent = '';\n closureFeetEl.textContent = '';\n\n const hanging = parseFloat(hangingEl.value);\n const front = parseFloat(frontEl.value);\n const ceiling = parseFloat(ceilingEl.value);\n\n \/\/ If all fields empty -> clear\n if (isNaN(hanging) && isNaN(front) && isNaN(ceiling)) {\n closureEl.textContent = '\u2014';\n return;\n }\n\n \/\/ require ceiling + at least one other input to compute meaningfully\n if (isNaN(ceiling) || isNaN(hanging) || isNaN(front)) {\n closureEl.textContent = '\u2014';\n errorEl.textContent = 'Enter all three values to calculate closure panel height.';\n return;\n }\n\n const closure = ceiling - (hanging + front);\n\n \/\/ formatting and validation\n const closureRounded = Math.round(closure * 100) \/ 100; \/\/ two decimals\n closureEl.textContent = closureRounded.toLocaleString(undefined, {minimumFractionDigits: 0, maximumFractionDigits: 2}) + ' in';\n\n \/\/ convert to feet + inches (for easier reading)\n const sign = closureRounded < 0 ? -1 : 1;\n const abs = Math.abs(closureRounded);\n const feet = Math.floor(abs \/ 12);\n const inches = Math.round((abs - feet * 12) * 100) \/ 100; \/\/ round to 2 decimals\n\n const feetStr = feet > 0 ? feet + ' ft' : '';\n const inchesStr = inches > 0 ? (inches % 1 === 0 ? inches.toFixed(0) : inches.toFixed(2)) + ' in' : (feet === 0 ? '0 in' : '');\n closureFeetEl.textContent = (sign < 0 ? '-' : '') + [feetStr, inchesStr].filter(Boolean).join(' ');\n\n if (closureRounded < 0) {\n errorEl.textContent = 'Result is negative \u2014 check your inputs (ceiling too low for given hanging\/front).';\n } else {\n errorEl.textContent = '';\n }\n }\n\n \/\/ attach events for live calculation\n [hangingEl, frontEl, ceilingEl].forEach(el => {\n el.addEventListener('input', compute);\n el.addEventListener('change', compute);\n });\n\n \/\/ initial compute (in case fields are pre-filled)\n compute();\n <\/script>\n<\/body>\n<\/html>\n\n<\/div>\n\n<style>\n.calculator-wrapper {\n border: 1px solid #ccc; \/* grey border *\/\n padding: 15px; \/* space inside border *\/\n margin: 20px 0; \/* space above\/below *\/\n border-radius: 6px; \/* optional rounded corners *\/\n width: 100%; \/* span full content width *\/\n box-sizing: border-box; \n text-align: center; \/* centers the calculator content *\/\n}\n<\/style>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"384\" src=\"https:\/\/selectairsystemsinc.com\/selectwp\/wp-content\/uploads\/2025\/10\/Closure-Panels1.png\" alt=\"\" class=\"wp-image-1509\" srcset=\"https:\/\/selectairsystemsinc.com\/selectwp\/wp-content\/uploads\/2025\/10\/Closure-Panels1.png 598w, https:\/\/selectairsystemsinc.com\/selectwp\/wp-content\/uploads\/2025\/10\/Closure-Panels1-300x193.png 300w\" sizes=\"auto, (max-width: 598px) 100vw, 598px\" \/><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Closure Panel Height Calculator Closure Panel Height Calculator Hanging height (inches) Front of hood (inches) Ceiling height (inches) Closure panel height \u2014 Formula used: closure = ceiling height \u2212 (hanging height + front of hood).<\/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-1567","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/selectairsystemsinc.com\/selectwp\/wp-json\/wp\/v2\/pages\/1567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selectairsystemsinc.com\/selectwp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/selectairsystemsinc.com\/selectwp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/selectairsystemsinc.com\/selectwp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selectairsystemsinc.com\/selectwp\/wp-json\/wp\/v2\/comments?post=1567"}],"version-history":[{"count":4,"href":"https:\/\/selectairsystemsinc.com\/selectwp\/wp-json\/wp\/v2\/pages\/1567\/revisions"}],"predecessor-version":[{"id":1574,"href":"https:\/\/selectairsystemsinc.com\/selectwp\/wp-json\/wp\/v2\/pages\/1567\/revisions\/1574"}],"wp:attachment":[{"href":"https:\/\/selectairsystemsinc.com\/selectwp\/wp-json\/wp\/v2\/media?parent=1567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}