Ver código fonte

Make DOM hometasks

Bonyant 2 anos atrás
pai
commit
9fe44fd422
3 arquivos alterados com 177 adições e 0 exclusões
  1. 38 0
      06/index.html
  2. 122 0
      06/index.js
  3. 17 0
      06/styles.css

+ 38 - 0
06/index.html

@@ -0,0 +1,38 @@
+<!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>JavaScript DOM</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
+    
+</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="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>
+<script src="index.js"></script>   
+</body>
+</html>

+ 122 - 0
06/index.js

@@ -0,0 +1,122 @@
+// let table = document.createElement("table");
+// table.setAttribute("border", "1");
+// let tbdy = document.createElement("tbody");
+// let tr = document.createElement("tr");
+// for (let h = 0; h < 10; h++) {
+//   let th = document.createElement("th");
+//   th.innerText = h;
+//   tr.appendChild(th);
+//   tbdy.appendChild(tr);
+// }
+// for (let i = 1; i < 10; i++) {
+//   let tr = document.createElement("tr");
+//   let td = document.createElement("td");
+//   td.innerText = i;
+//   tr.appendChild(td);
+//   for (let j = 1; j < 10; j++) {
+//     let td = document.createElement("td");
+//     td.innerText = i * j;
+//     tr.appendChild(td);
+//   }
+//   tbdy.appendChild(tr);
+// }
+// table.appendChild(tbdy);
+// document.body.appendChild(table);
+
+// let readyTable = document.querySelector("table");
+// const changeBg = (event, cellColor, rowColor) => {
+//   try {
+//     const target = event.target;
+//     const index = event.srcElement.cellIndex;
+//     const rows = document.querySelectorAll("tr");
+//     target.parentNode.style.background = rowColor;
+//     for (let i = 0; i < rows.length; i++) {
+//       rows[i].childNodes[index].style.background = rowColor;
+//       target.style.background = cellColor;
+//     }
+//   } catch (err) {}
+// };
+
+// readyTable.onmouseover = (event) => changeBg(event, "yellow", "pink");
+// readyTable.onmouseout = (event) => changeBg(event, "", "");
+
+// Calc && Calc Live
+
+// 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("selected", curArray[0]);
+//     option.setAttribute("value", curArray[i]);
+//     option.innerHTML = currencies[curArray[i]]["name"];
+//     firstSelect.appendChild(option);
+//   }
+//   return currencies;
+// }
+
+// renderCurrency();
+
+// let input = document.querySelector("#firstInput");
+// let cur1 = document.querySelector("#firstCurrency");
+// let cur2 = document.querySelector("#secondCurrency");
+// input.oninput = function () {
+//   convert();
+// };
+// cur1.oninput = function () {
+//   convert();
+// };
+// cur2.oninput = function () {
+//   convert();
+// };
+
+// 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) {
+//     currency1.value = "btc";
+//   }
+//   if (!currency2.value) {
+//     currency2.value = "usd";
+//   }
+//   if (value1.value === "" || +value1.value <= 0) {
+//     alert(
+//       "Не введено число / Введено неккоректное число\nПоставлено число по умолчанию - 1"
+//     );
+//     value1.value = 1;
+//   }
+//   if (currency1.value === currency2.value) {
+//     value2.value = value1.value;
+//   }
+//   if (currency2.value === "btc") {
+//     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"]));
+//   }
+// }

+ 17 - 0
06/styles.css

@@ -0,0 +1,17 @@
+table {
+  margin-bottom: 20px;
+  border: 1px solid #dddddd;
+  border-collapse: collapse;
+}
+table th {
+  font-weight: normal;
+  text-align: center;
+  border: 1px solid #dddddd;
+  padding: 5px;
+}
+table td {
+  font-weight: normal;
+  text-align: center;
+  border: 1px solid #dddddd;
+  padding: 5px;
+}