{"id":99,"date":"2025-12-05T21:19:00","date_gmt":"2025-12-05T21:19:00","guid":{"rendered":"https:\/\/alhasubat.com\/en\/?page_id=99"},"modified":"2025-12-05T21:23:19","modified_gmt":"2025-12-05T21:23:19","slug":"average-price-calculator","status":"publish","type":"page","link":"https:\/\/alhasubat.com\/en\/average-price-calculator\/","title":{"rendered":"Average Price Calculator"},"content":{"rendered":"  <style>\n  :root{\n    --bg:#0e0f13; --card:#11131a; --cell:#141827;\n    --border:#272a3a; --vio:#7b3aed; --vioSoft: rgba(123,58,237,.45);\n    --txt:#e7e9ee; --muted:#b9bfcb; --r:18px; --rCell:12px;\n\n    --cell-h:52px;\n    --fz-num:18px;\n    --fz-label:12px;\n  }\n  .dca2-wrap{direction:rtl;font-family:\"Inter\",system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--txt)}\n  .dca2-card{background:var(--bg);border:1px solid var(--vioSoft);border-radius:var(--r);padding:16px}\n\n  .dca2-toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;margin-bottom:10px}\n  .dca2-btn{background:#1a1d2a;border:1px solid var(--vioSoft);color:var(--txt);border-radius:14px;padding:8px 14px;font-weight:800;text-decoration:none;font-size:14px}\n  .dca2-btn.primary{background:var(--vio);border-color:var(--vio);color:#fff}\n  .dca2-btn:hover{background:#202336}.dca2-btn.primary:hover{background:#8f5cf4;border-color:#8f5cf4}\n\n  .dca2-table{width:100%;border-collapse:separate;border-spacing:12px 10px}\n  .dca2-head .dca2-th{color:#cdd2de;font-size:var(--fz-label);text-align:center}\n  .dca2-td,.dca2-th{\n    background:var(--cell);\n    border:1px solid var(--vioSoft);\n    border-radius:var(--rCell);\n    padding:8px 10px;\n    text-align:center;\n    vertical-align:middle;\n  }\n  .dca2-row .dca2-td{height:var(--cell-h)}\n  .dca2-input{\n    width:100%;height:calc(var(--cell-h) - 18px);\n    background:transparent;border:none;outline:none;color:var(--txt);\n    text-align:center;font-size:var(--fz-num);font-weight:800;line-height:1;\n  }\n  .dca2-input::-webkit-outer-spin-button,.dca2-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n  .dca2-input[type=number]{-moz-appearance:textfield}\n  .dca2-del{background:#3a1a1a;border:1px solid #5a2a2a;color:#fff;border-radius:10px;padding:6px 10px;font-weight:800;cursor:pointer;font-size:13px}\n\n  .dca2-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}\n  .dca2-box{background:#121420;border:1px solid var(--vioSoft);border-radius:14px;padding:12px;text-align:center}\n  .dca2-box .t{color:#c9cfda;font-size:var(--fz-label);margin-bottom:4px}\n  .dca2-box .v{font-size:24px;font-weight:900}\n  .dca2-muted{color:var(--muted);font-size:11px}\n  @media (max-width:780px){ .dca2-summary{grid-template-columns:1fr} }\n  <\/style>\n\n  <div class=\"dca2-card dca2-wrap\">\n    <div class=\"dca2-toolbar\">\n      <a href=\"#\" class=\"dca2-btn primary\" id=\"dca2-add\">Add row +<\/a>\n      <a href=\"#\" class=\"dca2-btn\" id=\"dca2-clear\">Clear rows<\/a>\n      <a href=\"#\" class=\"dca2-btn\" id=\"dca2-print\">Print\/Show table<\/a>\n    <\/div>\n\n    <table class=\"dca2-table\" id=\"dca2-table\">\n      <thead class=\"dca2-head\">\n        <tr class=\"dca2-row\">\n          <th class=\"dca2-th\">#<\/th>\n          <th class=\"dca2-th\">Quantity<\/th>\n          <th class=\"dca2-th\">Entry price<\/th>\n          <th class=\"dca2-th\">Action<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody id=\"dca2-body\"><\/tbody>\n    <\/table>\n\n    <div class=\"dca2-summary\">\n      <div class=\"dca2-box\"><div class=\"t\">Total quantity<\/div><div class=\"v\" id=\"dca2_sum_qty\">0<\/div><\/div>\n      <div class=\"dca2-box\"><div class=\"t\">Total cost<\/div><div class=\"v\" id=\"dca2_sum_cost\">0<\/div><\/div>\n      <div class=\"dca2-box\"><div class=\"t\">Average price <span class=\"dca2-muted\">((without commission)<\/span><\/div><div class=\"v\" id=\"dca2_avg\">0<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n  (function(){\n    const body  = document.getElementById('dca2-body');\n    const add   = document.getElementById('dca2-add');\n    const clear = document.getElementById('dca2-clear');\n    const printBtn = document.getElementById('dca2-print');\n\n    const vQty  = document.getElementById('dca2_sum_qty');\n    const vCost = document.getElementById('dca2_sum_cost');\n    const vAvg  = document.getElementById('dca2_avg');\n\n    let rows = [\n      {qty:0.25, price:1100},\n      {qty:0.24, price:1000}\n    ];\n\n    function fmt(n,dec=8){ if(!isFinite(n)) return '0'; let s=Number(n).toFixed(dec); return s.replace(\/\\.?0+$\/,''); }\n\n    function rowEl(idx, r){\n      const tr = document.createElement('tr'); tr.className='dca2-row';\n      const tdIndex = document.createElement('td'); tdIndex.className='dca2-td'; tdIndex.innerHTML = '<strong>'+ (idx+1) +'<\/strong>';\n\n      const tdQty = document.createElement('td'); tdQty.className='dca2-td';\n      tdQty.innerHTML = '<input class=\"dca2-input\" type=\"number\" step=\"0.00000001\" value=\"'+fmt(r.qty)+'\">';\n\n      const tdPrice = document.createElement('td'); tdPrice.className='dca2-td';\n      tdPrice.innerHTML = '<input class=\"dca2-input\" type=\"number\" step=\"0.00000001\" value=\"'+fmt(r.price)+'\">';\n\n      const tdAction = document.createElement('td'); tdAction.className='dca2-td';\n      tdAction.innerHTML = '<button class=\"dca2-del\">Delete<\/button>';\n\n      const iq = tdQty.querySelector('input');\n      const ip = tdPrice.querySelector('input');\n      iq.addEventListener('input', e=>{ r.qty=parseFloat(e.target.value)||0; recalc();});\n      ip.addEventListener('input', e=>{ r.price=parseFloat(e.target.value)||0; recalc();});\n      tdAction.querySelector('button').addEventListener('click',()=>{ rows.splice(idx,1); rebuild(); });\n\n      tr.appendChild(tdIndex);\n      tr.appendChild(tdQty);\n      tr.appendChild(tdPrice);\n      tr.appendChild(tdAction);\n      return tr;\n    }\n\n    function rebuild(){\n      body.innerHTML='';\n      rows.forEach((r,i)=> body.appendChild(rowEl(i,r)));\n      recalc();\n    }\n    function recalc(){\n      let sumQ=0, sumC=0; rows.forEach(r=>{ sumQ+=(r.qty||0); sumC+=(r.qty||0)*(r.price||0); });\n      const avg = sumQ>0 ? sumC\/sumQ : 0;\n      vQty.textContent  = fmt(sumQ);\n      vCost.textContent = fmt(sumC);\n      vAvg.textContent  = fmt(avg);\n    }\n\n    add.addEventListener('click', e=>{ e.preventDefault(); rows.push({qty:0,price:0}); rebuild(); });\n    clear.addEventListener('click', e=>{ e.preventDefault(); rows=[{qty:0,price:0}]; rebuild(); });\n    printBtn.addEventListener('click', e=>{ e.preventDefault(); window.print(); });\n\n    rebuild();\n  })();\n  <\/script>\n  \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-99","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alhasubat.com\/en\/wp-json\/wp\/v2\/pages\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alhasubat.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alhasubat.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alhasubat.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alhasubat.com\/en\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":0,"href":"https:\/\/alhasubat.com\/en\/wp-json\/wp\/v2\/pages\/99\/revisions"}],"wp:attachment":[{"href":"https:\/\/alhasubat.com\/en\/wp-json\/wp\/v2\/media?parent=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}