init

phkorn · Feb 2, 2024 · 9960197 · 9960197
1 parent 7fbc44c
commit 9960197
Showing 1 changed file with 259 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
+  <title>My Currency Converter</title>
+  <style>
+    .currency {
+      max-width: 115px;
+      min-width: auto;
+    }
+
+    .currency-grid {
+      grid-template-columns: fit-content(300px) 1fr;
+    }
+
+    .rotate {
+      rotate: 3.1416rad;
+    }
+
+    .input-form {
+      margin-top: 10vh;
+    }
+
+    .mirrored {
+      font-size: 35px;
+    }
+
+    .formated-label {
+      font-size: 25px;
+    }
+
+    .hr-line {
+      border-top: 1px dashed gray;
+      margin: 10px 0 10px 0;
+    }
+
+    .action-btns {
+      max-width: 115px;
+      min-width: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <main class="container-fluid">
+    <div class="grid currency-grid rotate">
+      <div class="currency">
+        <label>
+          Currency 1
+          <select id="currency_code_mirror">
+            <option selected>VND 🇻🇳</option>
+          </select>
+        </label>
+      </div>
+      <label>
+        Value
+        <input class="mirrored" type="text" id="currency_display_mirrored" name="currency_display_mirrored">
+      </label>
+    </div>
+
+    <div class="input-form">
+      <div class="grid currency-grid">
+        <div class="currency">
+          <label>
+            Currency 1
+            <select disabled>
+              <option selected>VND 🇻🇳</option>
+            </select>
+          </label>
+        </div>
+        <div>
+          Value 1 Formated
+          <label class="formated-label" id="currency_value_format">
+          </label>
+        </div>
+      </div>
+
+      <div class="grid currency-grid">
+        <div class="currency">
+          <label>
+            Currency 1
+            <select id="currency_code">
+              <option selected>VND 🇻🇳</option>
+            </select>
+          </label>
+        </div>
+        <label>
+          Value 1
+          <input type="number" id="currency_value" name="currency_value_1" placeholder="1000"
+            onkeyup="onCurrencyValueChange(this)">
+        </label>
+      </div>
+      <div class=" hr-line">
+      </div>
+
+      <div class="grid currency-grid">
+        <div class="currency">
+          <label>
+            Currency 2
+            <select disabled>
+              <option selected>EUR 🇪🇺</option>
+            </select>
+          </label>
+        </div>
+        <div>
+          Value 2 Formated
+          <label class="formated-label" id="currency_value_2_format">
+          </label>
+        </div>
+      </div>
+
+      <div class="grid currency-grid">
+        <div class="currency">
+          <label>
+            Currency 2
+            <select id="currency_code_2">
+              <option selected>EUR 🇪🇺</option>
+            </select>
+          </label>
+        </div>
+
+        <label>
+          Value 2
+          <input type="number" id="currency_value_2" name="currency_value_1" placeholder="1"
+            onkeyup="onCurrencyValueChange2(this)">
+        </label>
+      </div>
+      <div class="grid currency-grid">
+        <div class="action-btns">
+          <label>
+            Set manually
+            <button onclick="setRateManual()">set</button>
+          </label>
+        </div>
+        <div class="action-btns">
+          <label>
+            Reset rate
+            <button onclick="onReset()">reset</button>
+          </label>
+        </div>
+      </div>
+    </div>
+    <article id="debug"></article>
+  </main>
+  <script>
+    var rates;
+    const currencyValue = document.querySelector("#currency_value");
+    const currencyValue2 = document.querySelector("#currency_value_2");
+    const currencyValueFormat = document.querySelector("#currency_value_format");
+    const currencyValueFormat2 = document.querySelector("#currency_value_2_format");
+    const currencyCode = document.querySelector("#currency_code").value.split(" ")[0];
+    const currencyCode2 = document.querySelector("#currency_code_2").value.split(" ")[0];
+    const mirroredFormat = document.querySelector("#currency_display_mirrored");
+
+    function onCurrencyValueChange(input) {
+      const conversion = (parseFloat(input.value) * rates[currencyCode]).toFixed(2);
+      changeValue(currencyValue2, currencyValueFormat2, conversion);
+      formatSet(currencyValueFormat, input.value);
+    }
+
+    function changeValue(input, format, conversion) {
+      input.value = conversion;
+      formatSet(format, conversion);
+      mirroredFormat.value = new Intl.NumberFormat('de-AT').format(currencyValue.value);
+    }
+
+    function onCurrencyValueChange2(input) {
+      const conversion = (parseFloat(input.value) * rates[currencyCode2]).toFixed(2);
+      changeValue(currencyValue, currencyValueFormat, conversion);
+      formatSet(currencyValueFormat2, input.value);
+    }
+
+
+    function formatSet(input, value) {
+      input.innerText = new Intl.NumberFormat('de-AT').format(value);
+    }
+
+    async function onReset() {
+      localStorage.clear();
+      await init();
+    }
+
+    function setRateManual() {
+      let rate = prompt("Please enter EUR TO VND with . as comma", "");
+      const parsed = parseFloat(rate).toFixed(12)
+      localStorage.clear();
+      rates = {
+        [currencyCode]: 1 / parsed,
+        [currencyCode2]: parsed,
+        manual: true
+      }
+      const stored = localStorage.setItem("currency", JSON.stringify(rates));
+      displayDebug();
+      currencyValue.value = "";
+      currencyValue2.value = "";
+      currencyValueFormat.innerText = "";
+      currencyValueFormat2.innerText = "";
+      mirroredFormat.value = "";
+    }
+
+    function displayDebug() {
+      document.querySelector("#debug").innerText = `
+        ${rates.manual ? "RATE SET MANUAL" : ""}
+        1 ${currencyCode} to 1 ${currencyCode2} --> ${rates[currencyCode]}
+        1 ${currencyCode2} to 1 ${currencyCode} --> ${rates[currencyCode2]}
+      `;
+    }
+
+    async function loadCurrency(currency, currency2) {
+      const response = await fetch(`https://open.er-api.com/v6/latest/${currency}`);
+      const details = await response.json();
+      return details;
+    }
+
+    async function loadOrFetch(currency, currency2) {
+      const stored = JSON.parse(localStorage.getItem("currency"));
+      console.log("loaded from local storage", stored)
+      const yesterday = new Date(Date.now() - (3600 * 1000 * 24))
+      if (!stored || !stored.manual && (stored.updated < yesterday.getTime())) {
+        const response = await loadCurrency(currency);
+        const rateCurToCur2 = response.rates[currency2];
+        if (!rateCurToCur2) {
+          alert(`cannot get ${currency} to ${currency2}`);
+          return;
+        }
+        const rateCur2ToCur = 1 / rateCurToCur2;
+        item = {
+          [currencyCode]: rateCurToCur2,
+          [currencyCode2]: rateCur2ToCur,
+          updated: Date.now(),
+          manual: false
+        }
+        const stored = localStorage.setItem("currency", JSON.stringify(item));
+        return item;
+      } else {
+        return stored;
+      }
+    }
+
+    async function init() {
+      screen.orientation.lock("portrait");
+      const rateResult = await loadOrFetch(currencyCode, currencyCode2);
+      rates = {
+        [currencyCode]: parseFloat(rateResult[currencyCode]).toFixed(12),
+        [currencyCode2]: parseFloat(rateResult[currencyCode2]).toFixed(12),
+        manual: rateResult.manual
+      }
+      displayDebug();
+    }
+
+    window.onload = async () => {
+      await init();
+    }
+  </script>
+</body>
+</html>