Browse Source

Reloading the first task and loading the second

Bonyant 2 years ago
commit
d20a855800
4 changed files with 683 additions and 0 deletions
  1. 39 0
      01/index.html
  2. 64 0
      01/index.js
  3. 13 0
      02/index.html
  4. 567 0
      02/script.js

+ 39 - 0
01/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="https://favicon-generator.org/favicon-generator/htdocs/favicons/2015-01-28/7279ebe8ba6a76623019cc424f6c3ff6.ico" type="image/x-icon">
+    <title>Currency converter</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
+    <link rel="stylesheet" href="styles.css">
+    <script src="index.js"></script>
+</head>
+<body>
+    <div class="container h-100">
+    <div class="row h-100 w-50 mx-auto border border-dark rounded p-3 mt-5 justify-content-center">
+        <h1 class="text-center">Online currency converter</h1>
+        <hr>
+        <div class="w-50">
+            <label for="firstSelect" class="form-label">Select the currency to convert with</label>
+            <input class="form-control" list="firstSelect" placeholder="Search a currency" id="firstCurrency">
+            <datalist id="firstSelect">
+            </datalist>
+            <div class="input-group mt-3">
+                <input class="form-control" type="number" value="1" required  min="0" placeholder="Enter the number of convertible currency" id="firstInput" autofocus>
+        </div>
+        <div class="my-3 buttonBox"><button type="button" class="btn btn-outline-dark btn-lg" onclick="convert()">Convert</button></div>
+        <div class="mt-3">
+            <label for="firstSelect" class="form-label">Select the currency to convert to</label>
+            <input class="form-control" list="firstSelect" placeholder="Search a currency" id="secondCurrency">
+            <datalist id="firstSelect">
+            </datalist>
+            <div class="input-group mt-3">
+                <input class="form-control" type="number" id="secondInput" disabled>
+            </div>
+    </div>
+</div>
+</div>     
+</body>
+</html>

+ 64 - 0
01/index.js

@@ -0,0 +1,64 @@
+async function fetchCurrency() {
+  try {
+    const response = await fetch(
+      "https://api.coingecko.com/api/v3/exchange_rates"
+    );
+    const currency = await response.json();
+    return currency.rates;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+async function renderCurrency() {
+  const currencies = await fetchCurrency();
+  const curArray = [];
+  for (let key in currencies) {
+    curArray.push(key);
+  }
+  let firstSelect = document.querySelector("#firstSelect");
+  for (let i = 0; i < curArray.length; i++) {
+    let option = document.createElement("option");
+    option.setAttribute("value", curArray[i]);
+    option.innerHTML = currencies[curArray[i]]["name"];
+    firstSelect.appendChild(option);
+  }
+  return currencies;
+}
+
+renderCurrency();
+
+async function convert() {
+  const objCur = await renderCurrency();
+  const curArray = [];
+  for (let key in objCur) {
+    curArray.push(key);
+  }
+  let currency1 = document.querySelector("#firstCurrency");
+  let currency2 = document.querySelector("#secondCurrency");
+  let value1 = document.querySelector("#firstInput");
+  let value2 = document.querySelector("#secondInput");
+  if (currency1.value === currency2.value) {
+    value2.value = value1.value;
+  }
+  if (currency2.value === "btc"s) {
+    value2.value = objCur[currency1.value]["value"];
+  }
+  if (currency1.value !== currency2.value) {
+    value2.value =
+      (value1.value ** 2 * objCur[currency2.value]["value"]) /
+      (value1.value / (1 / objCur[currency1.value]["value"]));
+  }
+  currency1.disabled = true;
+  currency2.disabled = true;
+  value1.disabled = true;
+  let divButton = document.querySelector(".buttonBox");
+  divButton.firstChild.remove();
+  let reloadButton = document.createElement("button");
+  reloadButton.className = "btn btn-outline-secondary btn-lg";
+  reloadButton.innerText = "Try again";
+  divButton.appendChild(reloadButton);
+  reloadButton.onclick = function () {
+    window.location.reload();
+  };
+}

+ 13 - 0
02/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="script.js"></script>
+    <title>JavaScript</title>
+  </head>
+  <body>
+    <h1>JS Practise</h1>
+  </body>
+</html>

File diff suppressed because it is too large
+ 567 - 0
02/script.js