{"id":15819,"date":"2025-07-20T20:05:32","date_gmt":"2025-07-20T20:05:32","guid":{"rendered":"https:\/\/class.highsafetyts.com\/?page_id=15819"},"modified":"2025-07-20T20:42:17","modified_gmt":"2025-07-20T20:42:17","slug":"calculator","status":"publish","type":"page","link":"https:\/\/class.highsafetyts.com\/","title":{"rendered":"Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15819\" class=\"elementor elementor-15819\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-2d93701 e-flex e-con-boxed e-con e-parent\" data-id=\"2d93701\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af03b1c elementor-widget elementor-widget-html\" data-id=\"af03b1c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"calculator\" style=\"max-width: 400px; margin: auto; background: #f8fafc; border-radius: 1rem; padding: 1rem; box-shadow: 0 0 10px rgba(0,0,0,0.1);\">\r\n  <div style=\"background: #e2e8f0; border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; font-size: 1.5rem; min-height: 50px;\" id=\"calc-display\">0<\/div>\r\n  <div style=\"display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem;\">\r\n    <button onclick=\"calcInput('7')\" class=\"calc-btn\">7<\/button>\r\n    <button onclick=\"calcInput('8')\" class=\"calc-btn\">8<\/button>\r\n    <button onclick=\"calcInput('9')\" class=\"calc-btn\">9<\/button>\r\n    <button onclick=\"calcInput('\/')\" class=\"calc-btn\">\/<\/button>\r\n\r\n    <button onclick=\"calcInput('4')\" class=\"calc-btn\">4<\/button>\r\n    <button onclick=\"calcInput('5')\" class=\"calc-btn\">5<\/button>\r\n    <button onclick=\"calcInput('6')\" class=\"calc-btn\">6<\/button>\r\n    <button onclick=\"calcInput('*')\" class=\"calc-btn\">*<\/button>\r\n\r\n    <button onclick=\"calcInput('1')\" class=\"calc-btn\">1<\/button>\r\n    <button onclick=\"calcInput('2')\" class=\"calc-btn\">2<\/button>\r\n    <button onclick=\"calcInput('3')\" class=\"calc-btn\">3<\/button>\r\n    <button onclick=\"calcInput('-')\" class=\"calc-btn\">-<\/button>\r\n\r\n    <button onclick=\"calcInput('0')\" class=\"calc-btn\">0<\/button>\r\n    <button onclick=\"calcInput('.')\" class=\"calc-btn\">.<\/button>\r\n    <button onclick=\"calculate()\" class=\"calc-btn\" style=\"background:#3b82f6; color:white;\">=<\/button>\r\n    <button onclick=\"calcInput('+')\" class=\"calc-btn\">+<\/button>\r\n  <\/div>\r\n  <button onclick=\"clearCalc()\" class=\"calc-btn\" style=\"margin-top: 0.5rem; width: 100%; background: #ef4444; color: white;\">Clear<\/button>\r\n<\/div>\r\n\r\n<style>\r\n  .calc-btn {\r\n    background: #f1f5f9;\r\n    border: none;\r\n    border-radius: 0.5rem;\r\n    padding: 1rem;\r\n    font-size: 1.2rem;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease;\r\n  }\r\n  .calc-btn:hover {\r\n    background: #cbd5e1;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  let calcDisplay = document.getElementById('calc-display');\r\n\r\n  function calcInput(val) {\r\n    if (calcDisplay.textContent === '0') {\r\n      calcDisplay.textContent = val;\r\n    } else {\r\n      calcDisplay.textContent += val;\r\n    }\r\n  }\r\n\r\n  function calculate() {\r\n    try {\r\n      calcDisplay.textContent = eval(calcDisplay.textContent);\r\n    } catch {\r\n      calcDisplay.textContent = 'Error';\r\n    }\r\n  }\r\n\r\n  function clearCalc() {\r\n    calcDisplay.textContent = '0';\r\n  }\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-a4ab333 e-flex e-con-boxed e-con e-parent\" data-id=\"a4ab333\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5be891 elementor-widget elementor-widget-html\" data-id=\"f5be891\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"max-w-2xl mx-auto p-4 bg-gray-50 rounded-lg shadow\">\r\n  <h2 class=\"text-2xl font-bold mb-4\">Dynamic Table Calculator<\/h2>\r\n  <button onclick=\"addRow()\" class=\"mb-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-800\">Add Item<\/button>\r\n\r\n  <table class=\"w-full border border-gray-300 rounded-lg overflow-hidden\">\r\n    <thead class=\"bg-gray-200\">\r\n      <tr>\r\n        <th class=\"p-2 border\">Item Name<\/th>\r\n        <th class=\"p-2 border\">Quantity<\/th>\r\n        <th class=\"p-2 border\">Price<\/th>\r\n        <th class=\"p-2 border\">Total<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody id=\"calcTable\">\r\n      <!-- Rows will be added here -->\r\n    <\/tbody>\r\n  <\/table>\r\n\r\n  <div class=\"mt-4 text-right text-xl font-semibold\">\r\n    Grand Total: <span id=\"grandTotal\">0<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  function addRow() {\r\n    const table = document.getElementById('calcTable');\r\n    const row = document.createElement('tr');\r\n\r\n    row.innerHTML = `\r\n      <td class=\"border p-2\"><input type=\"text\" class=\"w-full p-1 border rounded\" placeholder=\"Item\"><\/td>\r\n      <td class=\"border p-2\"><input type=\"number\" min=\"0\" class=\"w-full p-1 border rounded qty\" placeholder=\"Qty\" oninput=\"updateRow(this)\"><\/td>\r\n      <td class=\"border p-2\"><input type=\"number\" min=\"0\" class=\"w-full p-1 border rounded price\" placeholder=\"Price\" oninput=\"updateRow(this)\"><\/td>\r\n      <td class=\"border p-2 total\">0<\/td>\r\n    `;\r\n    table.appendChild(row);\r\n  }\r\n\r\n  function updateRow(input) {\r\n    const row = input.parentElement.parentElement;\r\n    const qty = row.querySelector('.qty').value;\r\n    const price = row.querySelector('.price').value;\r\n    const totalCell = row.querySelector('.total');\r\n\r\n    if (qty && price) {\r\n      const total = parseFloat(qty) * parseFloat(price);\r\n      totalCell.textContent = total.toFixed(2);\r\n    } else {\r\n      totalCell.textContent = '0';\r\n    }\r\n    updateGrandTotal();\r\n  }\r\n\r\n  function updateGrandTotal() {\r\n    const totals = document.querySelectorAll('.total');\r\n    let grandTotal = 0;\r\n    totals.forEach(cell => {\r\n      grandTotal += parseFloat(cell.textContent);\r\n    });\r\n    document.getElementById('grandTotal').textContent = grandTotal.toFixed(2);\r\n  }\r\n<\/script>\r\n\r\n<style>\r\n  input:focus {\r\n    outline: 2px solid #3b82f6;\r\n  }\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"wd-negative-gap elementor-element elementor-element-1af63c2 e-flex e-con-boxed e-con e-parent\" data-id=\"1af63c2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-5bee4e8 e-con-full e-flex e-con e-child\" data-id=\"5bee4e8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8eee541 elementor-widget elementor-widget-html\" data-id=\"8eee541\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"max-w-3xl mx-auto p-4 bg-gray-900 rounded-lg shadow text-white\">\r\n  <h2 class=\"text-2xl font-bold mb-4\">Select Items<\/h2>\r\n  <div class=\"grid grid-cols-4 gap-4\">\r\n    <div class=\"item-box p-4 bg-gray-800 rounded text-center cursor-pointer\" onclick=\"openGallery(0)\">\r\n      <div class=\"text-3xl\">+<\/div>\r\n      <div>Add Item<\/div>\r\n    <\/div>\r\n    <div class=\"item-box p-4 bg-gray-800 rounded text-center cursor-pointer\" onclick=\"openGallery(1)\">\r\n      <div class=\"text-3xl\">+<\/div>\r\n      <div>Add Item<\/div>\r\n    <\/div>\r\n    <div class=\"item-box p-4 bg-gray-800 rounded text-center cursor-pointer\" onclick=\"openGallery(2)\">\r\n      <div class=\"text-3xl\">+<\/div>\r\n      <div>Add Item<\/div>\r\n    <\/div>\r\n    <div class=\"item-box p-4 bg-gray-800 rounded text-center cursor-pointer\" onclick=\"openGallery(3)\">\r\n      <div class=\"text-3xl\">+<\/div>\r\n      <div>Add Item<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"mt-6 text-right text-xl font-semibold\">\r\n    Grand Total: <span id=\"grandTotal\">0<\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Hidden Gallery -->\r\n<div id=\"galleryModal\" class=\"fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden\">\r\n  <div class=\"bg-gray-800 p-4 rounded-lg w-96 max-h-[400px] overflow-y-auto\">\r\n    <h3 class=\"text-lg font-bold mb-2\">Select an Item<\/h3>\r\n    <div class=\"grid grid-cols-3 gap-2\">\r\n      <!-- Example items -->\r\n      <div class=\"p-2 bg-gray-700 rounded cursor-pointer hover:bg-gray-600\" onclick=\"selectItem('item1.png', 50)\">\r\n        <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/80\" alt=\"Item 1\" class=\"mx-auto mb-1\">\r\n        <div class=\"text-center\">$50<\/div>\r\n      <\/div>\r\n      <div class=\"p-2 bg-gray-700 rounded cursor-pointer hover:bg-gray-600\" onclick=\"selectItem('item2.png', 30)\">\r\n        <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/80\" alt=\"Item 2\" class=\"mx-auto mb-1\">\r\n        <div class=\"text-center\">$30<\/div>\r\n      <\/div>\r\n      <div class=\"p-2 bg-gray-700 rounded cursor-pointer hover:bg-gray-600\" onclick=\"selectItem('item3.png', 75)\">\r\n        <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/80\" alt=\"Item 3\" class=\"mx-auto mb-1\">\r\n        <div class=\"text-center\">$75<\/div>\r\n      <\/div>\r\n      <!-- Add more items here -->\r\n    <\/div>\r\n    <button onclick=\"closeGallery()\" class=\"mt-4 w-full p-2 bg-red-600 rounded hover:bg-red-800\">Close<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  let selectedBox = null;\r\n  let itemValues = [0, 0, 0, 0];\r\n\r\n  function openGallery(index) {\r\n    selectedBox = index;\r\n    document.getElementById('galleryModal').classList.remove('hidden');\r\n  }\r\n\r\n  function closeGallery() {\r\n    document.getElementById('galleryModal').classList.add('hidden');\r\n  }\r\n\r\n  function selectItem(img, price) {\r\n    const boxes = document.querySelectorAll('.item-box');\r\n    boxes[selectedBox].innerHTML = `\r\n      <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/80\" alt=\"Selected Item\" class=\"mx-auto mb-1\">\r\n      <div class=\"text-center\">$${price}<\/div>\r\n    `;\r\n    itemValues[selectedBox] = price;\r\n    updateGrandTotal();\r\n    closeGallery();\r\n  }\r\n\r\n  function updateGrandTotal() {\r\n    const total = itemValues.reduce((a, b) => a + b, 0);\r\n    document.getElementById('grandTotal').textContent = `$${total}`;\r\n  }\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>0 7 8 9 \/ 4 5 6 * 1 2 3 &#8211; 0 . = + Clear Dynamic Table<\/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-15819","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/class.highsafetyts.com\/index.php?rest_route=\/wp\/v2\/pages\/15819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/class.highsafetyts.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/class.highsafetyts.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/class.highsafetyts.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/class.highsafetyts.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15819"}],"version-history":[{"count":16,"href":"https:\/\/class.highsafetyts.com\/index.php?rest_route=\/wp\/v2\/pages\/15819\/revisions"}],"predecessor-version":[{"id":15835,"href":"https:\/\/class.highsafetyts.com\/index.php?rest_route=\/wp\/v2\/pages\/15819\/revisions\/15835"}],"wp:attachment":[{"href":"https:\/\/class.highsafetyts.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}