|
|
@@ -0,0 +1,154 @@
|
|
|
+<!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 href="style.css" rel="stylesheet" />
|
|
|
+ <title>js/01</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="header"></div>
|
|
|
+ <div class="container">
|
|
|
+ <div class="errors"></div>
|
|
|
+ <div class="container-form"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ let errors = [];
|
|
|
+ let exchangeRate = {};
|
|
|
+ const exchangeForm = `
|
|
|
+ <form action="" class="form" onsubmit="calculate(event)">
|
|
|
+ <div class="form-body">
|
|
|
+ <label for="">Currency:</label>
|
|
|
+ <select type="number" name="currency" class="form-input">
|
|
|
+ <option value="RUB">RUB</option>
|
|
|
+ <option value="UAH">UAH</option>
|
|
|
+ <option value="EUR">EUR</option>
|
|
|
+ </select>
|
|
|
+ <label for="#amount">Amount</label>
|
|
|
+ <input type="number" name="Amount" id="amount" class="form-input" id="" value="0" />
|
|
|
+ <button type="submit" class="form-btn btn">Calculate</button>
|
|
|
+ </div>
|
|
|
+ <div class="form-footer">
|
|
|
+ <label for="USD">USD</label>
|
|
|
+ <input type="text" name="USD" placeholder="0" id="USD" class="form-input" readonly />
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ `;
|
|
|
+ const authForm = `
|
|
|
+ <form action="" onsubmit="auth(event)" class="form">
|
|
|
+ <div class="form-body">
|
|
|
+ <input type="text" placeholder="Login" name="login" class="form-input" />
|
|
|
+ <input type="password" placeholder = "Password" name="password" class="form-input" />
|
|
|
+ <button type="submit" class="btn btn-login">Login</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ `;
|
|
|
+
|
|
|
+ const error = (text = "") => {
|
|
|
+ return `
|
|
|
+ <div class="errors">
|
|
|
+ <div class="error">${text}</div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ };
|
|
|
+
|
|
|
+ const btnLogout = `
|
|
|
+ <button class="btn btn-logout" onclick="logout()">Logout</button>
|
|
|
+ `;
|
|
|
+ const credentials = [
|
|
|
+ { login: "test1", password: "test1" },
|
|
|
+ { login: "test2", password: "test3" },
|
|
|
+ { login: "test3", password: "test2" },
|
|
|
+ ];
|
|
|
+
|
|
|
+ document.querySelector(".container-form").innerHTML = "loading...";
|
|
|
+ fetch("https://open.er-api.com/v6/latest/USD", {
|
|
|
+ method: "GET",
|
|
|
+ })
|
|
|
+ .then((r) => r.json())
|
|
|
+ .then(({ rates }) => {
|
|
|
+ exchangeRates = rates;
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ checkIsAuth();
|
|
|
+ });
|
|
|
+
|
|
|
+ function checkIsAuth() {
|
|
|
+ const isAuth = JSON.parse(localStorage.getItem("isAuth"));
|
|
|
+ if (isAuth === true) {
|
|
|
+ document.querySelector("div.header").innerHTML = btnLogout;
|
|
|
+ document.querySelector("div.container-form").innerHTML = exchangeForm;
|
|
|
+ removeError();
|
|
|
+ } else {
|
|
|
+ document.querySelector("div.container-form").innerHTML = authForm;
|
|
|
+ document.querySelector("div.header").innerHTML = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateErrors() {
|
|
|
+ let errors_block = document.querySelector("div.errors");
|
|
|
+ errors_block.innerHTML = "";
|
|
|
+ errors.forEach((err) => {
|
|
|
+ errors_block.insertAdjacentHTML("beforeend", error(err));
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function auth(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ let login = e.target.elements.login.value;
|
|
|
+ let password = e.target.elements.password.value;
|
|
|
+ let accountCredentials = credentials.filter((el) => el.login === login)[0];
|
|
|
+
|
|
|
+ if (!accountCredentials || accountCredentials?.password !== password) {
|
|
|
+ localStorage.setItem("isAuth", false);
|
|
|
+ addError("The username or password is incorrect");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ localStorage.setItem("isAuth", true);
|
|
|
+ checkIsAuth();
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ function addError(text = "") {
|
|
|
+ !errors.includes(text) ? errors.push(text) : null;
|
|
|
+ updateErrors();
|
|
|
+ }
|
|
|
+
|
|
|
+ function removeError(text = "") {
|
|
|
+ if (text === "") {
|
|
|
+ errors = [];
|
|
|
+ } else {
|
|
|
+ errors = errors.filter((el) => el !== text);
|
|
|
+ }
|
|
|
+
|
|
|
+ updateErrors();
|
|
|
+ }
|
|
|
+
|
|
|
+ function logout() {
|
|
|
+ localStorage.setItem("isAuth", false);
|
|
|
+ isAuth = false;
|
|
|
+ removeError();
|
|
|
+ checkIsAuth();
|
|
|
+ }
|
|
|
+
|
|
|
+ function calculate(e) {
|
|
|
+ e?.preventDefault();
|
|
|
+ let currency = e.target.elements.currency.selectedOptions[0].value;
|
|
|
+ let amount = +e.target.elements.amount?.value ?? 0;
|
|
|
+
|
|
|
+ if (amount < 0) {
|
|
|
+ addError("Amount field value should be greater than 0!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ removeError("Amount field value should be greater than 0!");
|
|
|
+
|
|
|
+ document.querySelector('input[name="USD"]').value = (amount / +exchangeRates[currency]).toFixed(3);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
ilya_shyian