\u0645\u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a | Bootstrap + JS<\/title>\r\n \r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" \/>\r\n \r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.css\" rel=\"stylesheet\" \/>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/choices.js\/public\/assets\/styles\/choices.min.css\" \/>\r\n <style>\r\n body{background: #f6f7fb}\r\n .converter-card{max-width: 900px}\r\n .rate-badge{font-size: .9rem}\r\n .choices__list--dropdown .choices__item{direction:ltr}\r\n footer a{color:inherit;text-decoration:underline}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"container py-5\">\r\n <div class=\"mx-auto converter-card\">\r\n <div class=\"card shadow-sm border-0\">\r\n <div class=\"card-body p-4 p-md-5\">\r\n <div class=\"d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4\">\r\n <h1 class=\"h4 m-0\">\u0645\u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a<\/h1>\r\n <span id=\"last-updated\" class=\"text-secondary small\">\u2026<\/span>\r\n <\/div>\r\n\r\n <div class=\"row g-3 align-items-end\">\r\n <div class=\"col-12 col-md-4\">\r\n <label class=\"form-label\" for=\"amount\">\u0627\u0644\u0645\u0628\u0644\u063a<\/label>\r\n <div class=\"input-group\">\r\n <span class=\"input-group-text\"><i class=\"bi bi-calculator\"><\/i><\/span>\r\n <input id=\"amount\" type=\"number\" inputmode=\"decimal\" step=\"0.01\" min=\"0\" class=\"form-control\" placeholder=\"0.00\" value=\"1\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"col-12 col-md-3\">\r\n <label class=\"form-label\" for=\"from\">\u0645\u0646<\/label>\r\n <select id=\"from\" class=\"form-select\" aria-label=\"\u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\"><\/select>\r\n <\/div>\r\n\r\n <div class=\"col-12 col-md-1 d-flex justify-content-center\">\r\n <button id=\"swap\" class=\"btn btn-outline-secondary w-100 mt-4\" title=\"\u062a\u0628\u062f\u064a\u0644\"><i class=\"bi bi-arrow-left-right\"><\/i><\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 col-md-3\">\r\n <label class=\"form-label\" for=\"to\">\u0625\u0644\u0649<\/label>\r\n <select id=\"to\" class=\"form-select\" aria-label=\"\u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0647\u062f\u0641\"><\/select>\r\n <\/div>\r\n\r\n <div class=\"col-12 col-md-1 d-grid\">\r\n <button id=\"convert\" class=\"btn btn-primary mt-4\"><i class=\"bi bi-play-fill me-1\"><\/i>\u062a\u062d\u0648\u064a\u0644<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <hr class=\"my-4\" \/>\r\n\r\n <div class=\"d-flex flex-wrap align-items-center justify-content-between gap-3\">\r\n <div>\r\n <div class=\"h5 mb-1\" id=\"result\">\u2014<\/div>\r\n <div class=\"text-secondary small\" id=\"rate-line\">\u0633\u0639\u0631 \u0627\u0644\u0635\u0631\u0641: \u2014<\/div>\r\n <\/div>\r\n <div class=\"d-flex gap-2\">\r\n <button id=\"copy\" class=\"btn btn-outline-secondary\"><i class=\"bi bi-clipboard\"><\/i> \u0646\u0633\u062e \u0627\u0644\u0646\u062a\u064a\u062c\u0629<\/button>\r\n <span id=\"inverse\" class=\"badge bg-light text-dark border rate-badge\">\u2014<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-center text-muted mt-3 mb-0 small\">\r\n \u064a\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u062d\u064a\u0629 \u0645\u0646 <a href=\"#\" id=\"source-link\" rel=\"noopener\">exchangerate.host<\/a>. \u0641\u064a \u062d\u0627\u0644 \u0639\u062f\u0645 \u062a\u0648\u0641\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a\u060c \u0633\u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0633\u0639\u0627\u0631 \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 \u0645\u062d\u0644\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n <\/main>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/choices.js\/public\/assets\/scripts\/choices.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/currency.js@2.0.4\/dist\/currency.min.js\"><\/script>\r\n\r\n <script>\r\n \/\/ --- Popular currencies appear first ---\r\n const POPULAR = [\"USD\",\"EUR\",\"SAR\",\"AED\",\"KWD\",\"QAR\",\"BHD\",\"EGP\",\"GBP\",\"TRY\",\"MAD\",\"JOD\"];\r\n\r\n \/\/ --- Local fallback rates vs USD (approx, for offline use) ---\r\n const FALLBACK = {\r\n base: \"USD\", date: \"2025-01-01\",\r\n rates: { USD:1, EUR:0.92, SAR:3.75, AED:3.67, KWD:0.31, QAR:3.64, BHD:0.376, EGP:48, GBP:0.77, TRY:33, MAD:9.8, JOD:0.71 }\r\n };\r\n\r\n const els = {\r\n amount: document.getElementById('amount'),\r\n from: document.getElementById('from'),\r\n to: document.getElementById('to'),\r\n result: document.getElementById('result'),\r\n rateLine: document.getElementById('rate-line'),\r\n inverse: document.getElementById('inverse'),\r\n last: document.getElementById('last-updated'),\r\n swap: document.getElementById('swap'),\r\n convert: document.getElementById('convert'),\r\n copy: document.getElementById('copy'),\r\n sourceLink: document.getElementById('source-link')\r\n };\r\n\r\n let ratesData = null; \/\/ { base, date, rates }\r\n let choiceFrom, choiceTo;\r\n\r\n function formatMoney(value, code){\r\n try{\r\n \/\/ Basic symbol mapping; extend as needed\r\n const symbols = { USD:'$', EUR:'\u20ac', GBP:'\u00a3', SAR:'\ufdfc', AED:'\u062f.\u0625', EGP:'\u062c.\u0645', KWD:'\u062f.\u0643', QAR:'\u0631.\u0642', BHD:'\u062f.\u0628', TRY:'\u20ba', MAD:'\u062f.\u0645', JOD:'\u062f.\u0623' };\r\n const symbol = symbols[code] || code + ' ';\r\n return currency(value, { precision: 4 }).format();\r\n }catch{ return Number(value).toFixed(4); }\r\n }\r\n\r\n function buildOptions(codes){\r\n const frag = document.createDocumentFragment();\r\n const ordered = [...new Set([...POPULAR, ...codes])];\r\n for(const code of ordered){\r\n const opt = document.createElement('option');\r\n opt.value = code; opt.textContent = code; \/\/ keep LTR by default\r\n frag.appendChild(opt);\r\n }\r\n els.from.appendChild(frag.cloneNode(true));\r\n els.to.appendChild(frag);\r\n }\r\n\r\n async function loadRates(){\r\n const endpoint = 'https:\/\/api.exchangerate.host\/latest?base=USD';\r\n try{\r\n const res = await fetch(endpoint, { cache: 'no-store' });\r\n if(!res.ok) throw new Error('HTTP '+res.status);\r\n const data = await res.json();\r\n if(!data || !data.rates) throw new Error('Bad payload');\r\n ratesData = { base: data.base || 'USD', date: data.date, rates: data.rates };\r\n els.sourceLink.href = 'https:\/\/exchangerate.host';\r\n }catch(err){\r\n console.warn('Falling back to local rates:', err);\r\n ratesData = FALLBACK;\r\n els.sourceLink.removeAttribute('href');\r\n }\r\n const codes = Object.keys(ratesData.rates).sort();\r\n buildOptions(codes);\r\n\r\n \/\/ Initialize choices.js (searchable)\r\n choiceFrom = new Choices('#from', { searchEnabled:true, itemSelectText:'', shouldSort:false });\r\n choiceTo = new Choices('#to', { searchEnabled:true, itemSelectText:'', shouldSort:false });\r\n\r\n \/\/ Defaults\r\n choiceFrom.setChoiceByValue('USD');\r\n choiceTo.setChoiceByValue('EGP');\r\n\r\n convert();\r\n els.last.textContent = `\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b: ${ratesData.date || '\u2014'}`;\r\n }\r\n\r\n function getCrossRate(from, to){\r\n if(!ratesData) return null;\r\n const r = ratesData.rates;\r\n if(!r[from] || !r[to]) return null;\r\n \/\/ Cross rate using USD base\r\n return r[to] \/ r[from];\r\n }\r\n\r\n function convert(){\r\n const amount = parseFloat(els.amount.value || '0');\r\n const from = els.from.value; const to = els.to.value;\r\n const rate = getCrossRate(from, to);\r\n if(rate == null){\r\n els.result.textContent = '\u062a\u0639\u0630\u0631 \u0627\u0644\u062d\u0633\u0627\u0628';\r\n els.rateLine.textContent = '\u0633\u0639\u0631 \u0627\u0644\u0635\u0631\u0641: \u2014';\r\n els.inverse.textContent = '\u2014';\r\n return;\r\n }\r\n const out = amount * rate;\r\n els.result.textContent = `${amount} ${from} = ${formatMoney(out, to)} ${to}`;\r\n els.rateLine.textContent = `1 ${from} = ${rate.toFixed(6)} ${to}`;\r\n els.inverse.textContent = `1 ${to} = ${(1\/rate).toFixed(6)} ${from}`;\r\n }\r\n\r\n \/\/ --- Events ---\r\n els.convert.addEventListener('click', convert);\r\n els.amount.addEventListener('input', convert);\r\n els.from.addEventListener('change', convert);\r\n els.to.addEventListener('change', convert);\r\n els.swap.addEventListener('click', () => {\r\n const f = els.from.value, t = els.to.value;\r\n choiceFrom.setChoiceByValue(t);\r\n choiceTo.setChoiceByValue(f);\r\n convert();\r\n });\r\n els.copy.addEventListener('click', async () => {\r\n try{ await navigator.clipboard.writeText(els.result.textContent); \r\n els.copy.innerHTML = '<i class=\"bi bi-check2\"><\/i> \u062a\u0645 \u0627\u0644\u0646\u0633\u062e';\r\n setTimeout(()=> els.copy.innerHTML = '<i class=\"bi bi-clipboard\"><\/i> \u0646\u0633\u062e \u0627\u0644\u0646\u062a\u064a\u062c\u0629', 1600);\r\n }catch{}\r\n });\r\n\r\n loadRates();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a | Bootstrap + JS \u0645\u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u2026 \u0627\u0644\u0645\u0628\u0644\u063a \u0645\u0646 \u0625\u0644\u0649 \u062a\u062d\u0648\u064a\u0644 \u2014 \u0633\u0639\u0631 \u0627\u0644\u0635\u0631\u0641: \u2014 \u0646\u0633\u062e \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u2014 \u064a\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u062d\u064a\u0629 \u0645\u0646 exchangerate.host. \u0641\u064a \u062d\u0627\u0644 \u0639\u062f\u0645 \u062a\u0648\u0641\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a\u060c \u0633\u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0633\u0639\u0627\u0631 \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 \u0645\u062d\u0644\u064a\u0629.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2794","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/pages\/2794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/comments?post=2794"}],"version-history":[{"count":4,"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/pages\/2794\/revisions"}],"predecessor-version":[{"id":2915,"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/pages\/2794\/revisions\/2915"}],"wp:attachment":[{"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/media?parent=2794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2794,"date":"2025-08-17T13:41:48","date_gmt":"2025-08-17T13:41:48","guid":{"rendered":"https:\/\/abdullah-hassan.com\/cart\/"},"modified":"2025-08-18T14:17:28","modified_gmt":"2025-08-18T14:17:28","slug":"cart","status":"publish","type":"page","link":"https:\/\/abdullah-hassan.com\/en\/cart\/","title":{"rendered":"\u0633\u0644\u0629 \u0627\u0644\u0645\u0634\u062a\u0631\u064a\u0627\u062a"},"content":{"rendered":"\n\r\n\r\n\r\n\r\n \r\n \r\n \u0645\u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a | Bootstrap + JS<\/title>\r\n \r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" \/>\r\n \r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.css\" rel=\"stylesheet\" \/>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/choices.js\/public\/assets\/styles\/choices.min.css\" \/>\r\n <style>\r\n body{background: #f6f7fb}\r\n .converter-card{max-width: 900px}\r\n .rate-badge{font-size: .9rem}\r\n .choices__list--dropdown .choices__item{direction:ltr}\r\n footer a{color:inherit;text-decoration:underline}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <main class=\"container py-5\">\r\n <div class=\"mx-auto converter-card\">\r\n <div class=\"card shadow-sm border-0\">\r\n <div class=\"card-body p-4 p-md-5\">\r\n <div class=\"d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4\">\r\n <h1 class=\"h4 m-0\">\u0645\u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a<\/h1>\r\n <span id=\"last-updated\" class=\"text-secondary small\">\u2026<\/span>\r\n <\/div>\r\n\r\n <div class=\"row g-3 align-items-end\">\r\n <div class=\"col-12 col-md-4\">\r\n <label class=\"form-label\" for=\"amount\">\u0627\u0644\u0645\u0628\u0644\u063a<\/label>\r\n <div class=\"input-group\">\r\n <span class=\"input-group-text\"><i class=\"bi bi-calculator\"><\/i><\/span>\r\n <input id=\"amount\" type=\"number\" inputmode=\"decimal\" step=\"0.01\" min=\"0\" class=\"form-control\" placeholder=\"0.00\" value=\"1\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"col-12 col-md-3\">\r\n <label class=\"form-label\" for=\"from\">\u0645\u0646<\/label>\r\n <select id=\"from\" class=\"form-select\" aria-label=\"\u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\"><\/select>\r\n <\/div>\r\n\r\n <div class=\"col-12 col-md-1 d-flex justify-content-center\">\r\n <button id=\"swap\" class=\"btn btn-outline-secondary w-100 mt-4\" title=\"\u062a\u0628\u062f\u064a\u0644\"><i class=\"bi bi-arrow-left-right\"><\/i><\/button>\r\n <\/div>\r\n\r\n <div class=\"col-12 col-md-3\">\r\n <label class=\"form-label\" for=\"to\">\u0625\u0644\u0649<\/label>\r\n <select id=\"to\" class=\"form-select\" aria-label=\"\u0627\u0644\u0639\u0645\u0644\u0629 \u0627\u0644\u0647\u062f\u0641\"><\/select>\r\n <\/div>\r\n\r\n <div class=\"col-12 col-md-1 d-grid\">\r\n <button id=\"convert\" class=\"btn btn-primary mt-4\"><i class=\"bi bi-play-fill me-1\"><\/i>\u062a\u062d\u0648\u064a\u0644<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <hr class=\"my-4\" \/>\r\n\r\n <div class=\"d-flex flex-wrap align-items-center justify-content-between gap-3\">\r\n <div>\r\n <div class=\"h5 mb-1\" id=\"result\">\u2014<\/div>\r\n <div class=\"text-secondary small\" id=\"rate-line\">\u0633\u0639\u0631 \u0627\u0644\u0635\u0631\u0641: \u2014<\/div>\r\n <\/div>\r\n <div class=\"d-flex gap-2\">\r\n <button id=\"copy\" class=\"btn btn-outline-secondary\"><i class=\"bi bi-clipboard\"><\/i> \u0646\u0633\u062e \u0627\u0644\u0646\u062a\u064a\u062c\u0629<\/button>\r\n <span id=\"inverse\" class=\"badge bg-light text-dark border rate-badge\">\u2014<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"text-center text-muted mt-3 mb-0 small\">\r\n \u064a\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u062d\u064a\u0629 \u0645\u0646 <a href=\"#\" id=\"source-link\" rel=\"noopener\">exchangerate.host<\/a>. \u0641\u064a \u062d\u0627\u0644 \u0639\u062f\u0645 \u062a\u0648\u0641\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a\u060c \u0633\u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0633\u0639\u0627\u0631 \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 \u0645\u062d\u0644\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n <\/main>\r\n\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/choices.js\/public\/assets\/scripts\/choices.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/currency.js@2.0.4\/dist\/currency.min.js\"><\/script>\r\n\r\n <script>\r\n \/\/ --- Popular currencies appear first ---\r\n const POPULAR = [\"USD\",\"EUR\",\"SAR\",\"AED\",\"KWD\",\"QAR\",\"BHD\",\"EGP\",\"GBP\",\"TRY\",\"MAD\",\"JOD\"];\r\n\r\n \/\/ --- Local fallback rates vs USD (approx, for offline use) ---\r\n const FALLBACK = {\r\n base: \"USD\", date: \"2025-01-01\",\r\n rates: { USD:1, EUR:0.92, SAR:3.75, AED:3.67, KWD:0.31, QAR:3.64, BHD:0.376, EGP:48, GBP:0.77, TRY:33, MAD:9.8, JOD:0.71 }\r\n };\r\n\r\n const els = {\r\n amount: document.getElementById('amount'),\r\n from: document.getElementById('from'),\r\n to: document.getElementById('to'),\r\n result: document.getElementById('result'),\r\n rateLine: document.getElementById('rate-line'),\r\n inverse: document.getElementById('inverse'),\r\n last: document.getElementById('last-updated'),\r\n swap: document.getElementById('swap'),\r\n convert: document.getElementById('convert'),\r\n copy: document.getElementById('copy'),\r\n sourceLink: document.getElementById('source-link')\r\n };\r\n\r\n let ratesData = null; \/\/ { base, date, rates }\r\n let choiceFrom, choiceTo;\r\n\r\n function formatMoney(value, code){\r\n try{\r\n \/\/ Basic symbol mapping; extend as needed\r\n const symbols = { USD:'$', EUR:'\u20ac', GBP:'\u00a3', SAR:'\ufdfc', AED:'\u062f.\u0625', EGP:'\u062c.\u0645', KWD:'\u062f.\u0643', QAR:'\u0631.\u0642', BHD:'\u062f.\u0628', TRY:'\u20ba', MAD:'\u062f.\u0645', JOD:'\u062f.\u0623' };\r\n const symbol = symbols[code] || code + ' ';\r\n return currency(value, { precision: 4 }).format();\r\n }catch{ return Number(value).toFixed(4); }\r\n }\r\n\r\n function buildOptions(codes){\r\n const frag = document.createDocumentFragment();\r\n const ordered = [...new Set([...POPULAR, ...codes])];\r\n for(const code of ordered){\r\n const opt = document.createElement('option');\r\n opt.value = code; opt.textContent = code; \/\/ keep LTR by default\r\n frag.appendChild(opt);\r\n }\r\n els.from.appendChild(frag.cloneNode(true));\r\n els.to.appendChild(frag);\r\n }\r\n\r\n async function loadRates(){\r\n const endpoint = 'https:\/\/api.exchangerate.host\/latest?base=USD';\r\n try{\r\n const res = await fetch(endpoint, { cache: 'no-store' });\r\n if(!res.ok) throw new Error('HTTP '+res.status);\r\n const data = await res.json();\r\n if(!data || !data.rates) throw new Error('Bad payload');\r\n ratesData = { base: data.base || 'USD', date: data.date, rates: data.rates };\r\n els.sourceLink.href = 'https:\/\/exchangerate.host';\r\n }catch(err){\r\n console.warn('Falling back to local rates:', err);\r\n ratesData = FALLBACK;\r\n els.sourceLink.removeAttribute('href');\r\n }\r\n const codes = Object.keys(ratesData.rates).sort();\r\n buildOptions(codes);\r\n\r\n \/\/ Initialize choices.js (searchable)\r\n choiceFrom = new Choices('#from', { searchEnabled:true, itemSelectText:'', shouldSort:false });\r\n choiceTo = new Choices('#to', { searchEnabled:true, itemSelectText:'', shouldSort:false });\r\n\r\n \/\/ Defaults\r\n choiceFrom.setChoiceByValue('USD');\r\n choiceTo.setChoiceByValue('EGP');\r\n\r\n convert();\r\n els.last.textContent = `\u0622\u062e\u0631 \u062a\u062d\u062f\u064a\u062b: ${ratesData.date || '\u2014'}`;\r\n }\r\n\r\n function getCrossRate(from, to){\r\n if(!ratesData) return null;\r\n const r = ratesData.rates;\r\n if(!r[from] || !r[to]) return null;\r\n \/\/ Cross rate using USD base\r\n return r[to] \/ r[from];\r\n }\r\n\r\n function convert(){\r\n const amount = parseFloat(els.amount.value || '0');\r\n const from = els.from.value; const to = els.to.value;\r\n const rate = getCrossRate(from, to);\r\n if(rate == null){\r\n els.result.textContent = '\u062a\u0639\u0630\u0631 \u0627\u0644\u062d\u0633\u0627\u0628';\r\n els.rateLine.textContent = '\u0633\u0639\u0631 \u0627\u0644\u0635\u0631\u0641: \u2014';\r\n els.inverse.textContent = '\u2014';\r\n return;\r\n }\r\n const out = amount * rate;\r\n els.result.textContent = `${amount} ${from} = ${formatMoney(out, to)} ${to}`;\r\n els.rateLine.textContent = `1 ${from} = ${rate.toFixed(6)} ${to}`;\r\n els.inverse.textContent = `1 ${to} = ${(1\/rate).toFixed(6)} ${from}`;\r\n }\r\n\r\n \/\/ --- Events ---\r\n els.convert.addEventListener('click', convert);\r\n els.amount.addEventListener('input', convert);\r\n els.from.addEventListener('change', convert);\r\n els.to.addEventListener('change', convert);\r\n els.swap.addEventListener('click', () => {\r\n const f = els.from.value, t = els.to.value;\r\n choiceFrom.setChoiceByValue(t);\r\n choiceTo.setChoiceByValue(f);\r\n convert();\r\n });\r\n els.copy.addEventListener('click', async () => {\r\n try{ await navigator.clipboard.writeText(els.result.textContent); \r\n els.copy.innerHTML = '<i class=\"bi bi-check2\"><\/i> \u062a\u0645 \u0627\u0644\u0646\u0633\u062e';\r\n setTimeout(()=> els.copy.innerHTML = '<i class=\"bi bi-clipboard\"><\/i> \u0646\u0633\u062e \u0627\u0644\u0646\u062a\u064a\u062c\u0629', 1600);\r\n }catch{}\r\n });\r\n\r\n loadRates();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a | Bootstrap + JS \u0645\u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u0644\u0627\u062a \u2026 \u0627\u0644\u0645\u0628\u0644\u063a \u0645\u0646 \u0625\u0644\u0649 \u062a\u062d\u0648\u064a\u0644 \u2014 \u0633\u0639\u0631 \u0627\u0644\u0635\u0631\u0641: \u2014 \u0646\u0633\u062e \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u2014 \u064a\u0633\u062a\u062e\u062f\u0645 \u0647\u0630\u0627 \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0623\u0633\u0639\u0627\u0631 \u0635\u0631\u0641 \u062d\u064a\u0629 \u0645\u0646 exchangerate.host. \u0641\u064a \u062d\u0627\u0644 \u0639\u062f\u0645 \u062a\u0648\u0641\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a\u060c \u0633\u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0633\u0639\u0627\u0631 \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 \u0645\u062d\u0644\u064a\u0629.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2794","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/pages\/2794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/comments?post=2794"}],"version-history":[{"count":4,"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/pages\/2794\/revisions"}],"predecessor-version":[{"id":2915,"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/pages\/2794\/revisions\/2915"}],"wp:attachment":[{"href":"https:\/\/abdullah-hassan.com\/en\/wp-json\/wp\/v2\/media?parent=2794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}