ilya_shyian
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!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: "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;
                    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;

                login ? removeError("Login is required") : addError("Login is required");
                password ? removeError("Password is required") : addError("Password is required");

                if (credentials.login !== login || credentials.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>