HW1 done

HW 1/css/main.css

@@ -79,3 +79,34 @@ align-items: center;
     margin-top: 20px;
     border-radius: 3px;
 }
+
+.btn {
+    background-color: rgb(75, 76, 78);
+    color: white;
+    width: 100px;
+    height: 30px;
+    border-radius: 5px;
+    cursor: pointer;
+    border: 2px solid rgb(255, 255, 255);
+    transition: .5s ease;
+    font-size: 14px;
+}
+
+.btn:hover {
+    background-color:rgb(255, 255, 255);
+    color: rgb(75, 76, 78);
+    border-color: rgb(75, 76, 78);
+    
+}
+
+.select__style {
+    height: 25px;
+    outline: none;
+}
+
+.input__style {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 20px;
+    outline: none;
+}

HW 1/index.html

@@ -15,22 +15,23 @@
             <div class="calc__block">
                 <form action="#">
                     <div class="input__block">
-                        <select name="" id="current__uah"></select>
-                        <input type="text" id="rawValueEx">
+                        <select class="select__style" name="" id="current__uah"></select>
+                        <input class="input__style" type="text" id="rawValueEx">
                     </div>
                     <div class="input__block">
-                        <select name="" id="current__select"></select>
-                        <input type="text" id='resulrs'>
+                        <select class="select__style" name="" id="current__select"></select>
+                        <input class="input__style" type="text" id='results'>
                     </div>
-                    <button class="btn" type="submit">submit</button>
+                    <button class="btn" type="submit">Submit</button>
                 </form>
             </div>
+
             <!-- <div class="form__block">
                 <form action="#" class="form">
-                <input type="text" class="form__input input__login">
-                <input type="text" class="form__input input__password">
-                <button class="form__btn">Отправить</button>
-            </form> 
+                    <input type="text" class="form__input input__login">
+                    <input type="text" class="form__input input__password">
+                    <button class="form__btn">Отправить</button>
+                </form>
             </div> -->
         </div>
     </div>

HW 1/js/script.js

@@ -1,80 +1,90 @@
 "use strict";
 
 document.addEventListener("DOMContentLoaded", () => {
-    //*TODO Calc
-    // Калькулятор подсчета каллорий для девущек 
+    function calc() {
+        // Калькулятор подсчета каллорий для девущек 
+        for (let i = 0; i < 1; i++) { //цикл
+            const userWeight = +prompt("Ваш вес", ""), //просим пользователя ввести его вес
+                userHeight = +prompt("Ваш рост", ""), //просим пользователя ввести его рост
+                userAge = +prompt("Ваш возраст", ""); //просим пользователя ввести его возраст
 
-    // for (let i = 0; i < 1; i++) {                 //цикл
-    // const userWeight  = +prompt("Ваш вес", ""),   //просим пользователя ввести его вес
-    //       userHeight = +prompt("Ваш рост", ""),   //просим пользователя ввести его рост
-    //       userAge = +prompt("Ваш возраст", "");   //просим пользователя ввести его возраст
+            if (userWeight != null && userHeight != null && userAge != null && userWeight != '' && userHeight != '' && userAge != '') { //делаем проверку (пользователь не может закрыть модальное окно и оставить поле пустым, пока не введет даные)
+                const weightCount = 10 * userWeight, //подсчитываем введенные данные пользователя с помощью формулы  
+                    heightCount = 6.25 * userHeight,
+                    ageCount = 5 * userAge,
+                    totalCount = (weightCount + heightCount - ageCount) - 161;
 
-    //     if (userWeight != null && userHeight != null && userAge != null && userWeight != '' && userHeight != '' && userAge != '') { //делаем проверку (пользователь не может закрыть модальное окно и оставить поле пустым, пока не введет даные)
-    //      const weightCount = 10 * userWeight,   //подсчитываем введенные данные пользователя с помощью формулы  
-    //            heightCount = 6.25 * userHeight,
-    //            ageCount = 5 * userAge,
-    //             totalCount = (weightCount + heightCount - ageCount) - 161;
-
-    //     alert(`${totalCount} - это количество калорий в день позволит вам есть и худеть`);  //выводим общую сумму количества каллорий на день 
-    //     } else {
-    //     console.log('error'); //выводим в консоль сообщение об ошибке 
-    //       i--; //возвращаем пользователя к вопросам опять, если не прошел проверку 
-    //     }
-    // }     
-
-
-    //*TODO Calc with fetch (in process...)
-    let btn = document.querySelector(".btn");
-    let resultBtn = document.getElementById('resulrs');
-    let rawValueEx = document.getElementById('rawValueEx');
-    let currentUah = document.getElementById("current__uah");
-    let str = `<option>UAH</option>`;
-    currentUah.innerHTML = str;
+                alert(`${totalCount} - это количество калорий в день позволит вам есть и худеть`); //выводим общую сумму количества каллорий на день 
+            } else {
+                console.log('error'); //выводим в консоль сообщение об ошибке 
+                i--; //возвращаем пользователя к вопросам опять, если не прошел проверку 
+            }
+        }
+    }
+    // calc()
 
 
+    function calcFetch() {
+        let btn = document.querySelector(".btn");
+        let resultBtn = document.getElementById('results');
+        let rawValueEx = document.getElementById('rawValueEx');
+        let currentUah = document.getElementById("current__uah");
+        let str = `<option>UAH</option>`;
+        currentUah.innerHTML = str;
 
-    fetch('https://open.er-api.com/v6/latest/UAH')
-        .then((response) => {
-            return response.json();
-        })
-        .then((data) => {
-            let currentSelect = document.getElementById("current__select");
-            for (let key in data.rates) {
-                let str = `<option value="${key}">${key}</option>`;
-                currentSelect.innerHTML += str;
-            }
-            btn.addEventListener("click", () => {
-                resultBtn.value = data.rates[currentSelect.value] * rawValueEx.value;
-                console.log(rawValueEx.value);
+        fetch('https://open.er-api.com/v6/latest/UAH')
+            .then((response) => {
+                return response.json();
+            })
+            .then((data) => {
+                let currentSelect = document.getElementById("current__select");
+                let currentUah = document.getElementById("current__uah");
+                for (let key in data.rates) {
+                    let str = `<option value="${key}">${key}</option>`;
+                    currentSelect.innerHTML += str;
+                    currentUah.innerHTML += str;
+                }
+                btn.addEventListener("click", () => {
+                    fetch(`https://open.er-api.com/v6/latest/${currentUah.value}`)
+                        .then((response) => {
+                            return response.json();
+                        })
+                        .then((data) => {
+                            resultBtn.setAttribute('value', data.rates[currentSelect.value] * rawValueEx.value);
+                        });
+                });
             });
-        });
+    }
+    calcFetch()
 
 
 
 
-    //*TODO Задание на синий пояс
-    // const btn = document.querySelector(".form__btn"),
-    //     inputLogin = document.querySelector(".input__login"),
-    //     inputPassword = document.querySelector(".input__password"),
-    //     div = document.createElement("div");
+    function blueBelt() {
+        const btn = document.querySelector(".form__btn"),
+            inputLogin = document.querySelector(".input__login"),
+            inputPassword = document.querySelector(".input__password"),
+            div = document.createElement("div");
 
-    // let credentials = {
-    //     login: 'admin',
-    //     password: 'qwerty',
-    // };
+        let credentials = {
+            login: 'admin',
+            password: 'qwerty',
+        };
 
-    // btn.addEventListener("click", (event) => {
-    //     event.preventDefault()
-    //     if (inputLogin.value == credentials.login && inputPassword.value == credentials.password) {
-    //         div.classList.add('style__div');
-    //         div.style.backgroundColor = "green"
-    //         div.innerHTML = "Поздравляем, Вы вошли в свой аккаунт!";
-    //         document.body.append(div);
-    //     } else {
-    //         div.classList.add('style__div');
-    //         div.style.backgroundColor = "red"
-    //         div.innerHTML = "Неверно введен логин или пароль";
-    //         document.body.append(div);
-    //     }
-    // });
+        btn.addEventListener("click", (event) => {
+            event.preventDefault()
+            if (inputLogin.value == credentials.login && inputPassword.value == credentials.password) {
+                div.classList.add('style__div');
+                div.style.backgroundColor = "green"
+                div.innerHTML = "Поздравляем, Вы вошли в свой аккаунт!";
+                document.body.append(div);
+            } else {
+                div.classList.add('style__div');
+                div.style.backgroundColor = "red"
+                div.innerHTML = "Неверно введен логин или пароль";
+                document.body.append(div);
+            }
+        });
+    }
+    // blueBelt()
 });