ilya_shyian
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!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="alerts"></div>
            <div class="container-form"></div>
        </div>

        <script>
            let alerts = [];
            let exchangeRates = {};
            const _alert = (el) => `
                <div class="alert ${el.type}">${el.text}</div>
            `;

            const currency = (name, selected) => {
                return selected
                    ? `<option value="${name}" selected>${name}</option>`
                    : `<option value="${name}">${name}</option>`;
            };

            function updateCurrencyBlock() {
                let currencyBlock = document.querySelector("#currency");
                currencyBlock.innerHTML = "";
                Object.keys(exchangeRates)
                    .filter((key) => key !== "USD")
                    .forEach((el) => {
                        let isSelected = el === "UAH";
                        currencyBlock.insertAdjacentHTML("beforeend", currency(el, isSelected));
                    });
            }
            const exchangeForm = `
            <form action="" class="form" >
                <div class="form-body">
                    <label for="">Currency:</label>
                    <select type="number" name="currency" class="form-input" id = "currency" onchange = "calculate()">
                    </select>
                    <label for="#amount">Amount</label>
                    <input type="number" name="amount" id="amount" class="form-input" id="" value="1" oninput = "calculate()"/>
                </div>
                <div class="form-footer">
                    <label for="USD">USD</label>
                    <input type="text" name="USD" placeholder="0" id="USD" class="form-input" oninput = "reverseCalculate()"/>
                </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 btnLogout = `
                <button class="btn btn-logout" onclick="logout()">Logout</button>
            `;
            const credentials = { login: "admin", password: "qwerty" };

            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;
                    updateCurrencyBlock();
                    removeAlert("", "error");
                    calculate();
                } else {
                    document.querySelector("div.container-form").innerHTML = authForm;
                    document.querySelector("div.header").innerHTML = "";
                }
            }

            function updateAlerts() {
                let alerts_block = document.querySelector("div.alerts");
                alerts_block.innerHTML = "";
                alerts.forEach((el) => {
                    alerts_block.insertAdjacentHTML("beforeend", _alert(el));
                });
            }

            function auth(e) {
                e.preventDefault();
                let login = e.target.elements.login.value;
                let password = e.target.elements.password.value;

                login ? removeAlert("Login is required", "error") : addAlert("Login is required", "error");
                password ? removeAlert("Password is required", "error") : removeAlert("Password is required", "error");

                if (credentials.login !== login || credentials.password !== password) {
                    localStorage.setItem("isAuth", false);
                    addAlert("The username or password is incorrect", "error");
                    return;
                }

                localStorage.setItem("isAuth", true);
                checkIsAuth();
                addAlert("Successfull auth", (type = "success"), 5000);

                return;
            }

            function addAlert(text, type, timeout) {
                !alerts.some((el) => el.text === text && el.type === type)
                    ? alerts.push({ text: text, type: type })
                    : null;
                updateAlerts();
                if (timeout) {
                    setTimeout(() => removeAlert(text, type), timeout);
                }
            }

            function removeAlert(text = "", type = "") {
                if (text === "" && type === "") {
                    alerts = [];
                }
                if (text === "" && type !== "") {
                    alerts = alerts.filter((el) => el.type !== type);
                }

                if (text !== "" && type === "") {
                    alerts = alerts.filter((el) => el.text !== text);
                }
                if (text !== "" && type !== "") {
                    alerts = alerts.filter((el) => el.text !== text || el.type !== type);
                }

                updateAlerts();
            }

            function logout() {
                localStorage.setItem("isAuth", false);
                isAuth = false;
                removeAlert();
                checkIsAuth();
            }

            function reverseCalculate(e) {
                let currency = document.querySelector('select[name="currency"]').selectedOptions[0].value;
                let amount = +document.querySelector('input[name="USD"]')?.value ?? 0;

                if (amount <= 0) {
                    addAlert("Amount field value should be greater than 0!", "error");
                    return;
                }

                removeAlert("Amount field value should be greater than 0!", "error");

                document.querySelector('input[name="amount"]').value = (amount * +exchangeRates[currency]).toFixed(3);
            }

            function calculate(e) {
                let currency = document.querySelector('select[name="currency"]').selectedOptions[0].value;
                let amount = +document.querySelector('input[name="amount"]')?.value ?? 0;

                if (amount <= 0) {
                    addAlert("Amount field value should be greater than 0!", "error");
                    return;
                }

                removeAlert("Amount field value should be greater than 0!", "error");

                document.querySelector('input[name="USD"]').value = (amount / +exchangeRates[currency]).toFixed(3);
            }
        </script>
    </body>
</html>