Browse Source

HW <01> Отладка, переменные done

Vladimir 2 years ago
commit
69ffdf6ce2
4 changed files with 118 additions and 0 deletions
  1. 40 0
      HW 01/calc.js
  2. 50 0
      HW 01/index.html
  3. 21 0
      HW 01/login.js
  4. 7 0
      HW 01/style.css

+ 40 - 0
HW 01/calc.js

@@ -0,0 +1,40 @@
+const AMOUNT = 1000; //Младший вес от старшего отличается на 1000, т.к. эта цифра не меняется я объявил ее как константу
+
+let firstInput  = document.querySelector("#first-input"); //Нашел первый инпут в который пользователь будет вводить данные для дальнейшей работы
+let secondInput = document.querySelector("#second-input"); //Нашел второй инпут, по анологии с первым
+let firstType   = document.querySelector("#first-type"); //Select, пользователь будет выбирать тип веса для первого инпута
+let secondType  = document.querySelector("#second-type"); //Select для выбора веса второго инпута
+
+let countFirstWeight = function() { // Функция которая переводит вес первого инпута во второй инпут
+    let number = firstInput.value;
+
+    for(let i = 0; i < firstType.selectedIndex; i++) { // Счетчик, тут я смотрю какой тип выбрал пользователь и перевожу его вес в милиграмы
+        number *= AMOUNT;
+    }
+    for(let i = 0; i < secondType.selectedIndex; i++) { // Перевожу милиграмы из первого счетчика в вес который выбран во втором инпуте
+        number /= AMOUNT;
+    }
+
+    secondInput.value = number; // Вывожу полученое число во второй инпут
+};
+
+let countSecondWeight = function() { // Аналогичная функция, перевожу вес второго инпута в первый
+    let number = secondInput.value;
+
+    for(let i = 0; i < secondType.selectedIndex; i++) {
+        number *= AMOUNT;
+    }
+    for(let i = 0; i < firstType.selectedIndex; i++) {
+        number /= AMOUNT;
+    }
+
+    firstInput.value = number;
+}
+
+
+// Запуск функций countFirstWeight и countSecondWeight при изменениях в инпутах
+
+firstInput.addEventListener("input", countFirstWeight);
+secondInput.addEventListener("input", countSecondWeight);
+firstType.addEventListener("input", countFirstWeight);
+secondType.addEventListener("input", countSecondWeight);

+ 50 - 0
HW 01/index.html

@@ -0,0 +1,50 @@
+<!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="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body class="body">
+    <div class="calc">
+        <h1>Конвертер веса</h1>
+        <div>
+            <input type="number" id="first-input" size="1" value="1">
+            <select id="first-type">
+                <option value="Milligram">Миллиграмм</option>
+                <option value="Gram">Грамм</option>
+                <option value="Kilogram" selected>Килограмм</option>
+                <option value="Ton">Тонна</option>
+            </select>
+        </div>
+        <div>
+            <input type="number" id="second-input" size="1" value="1000">
+            <select id="second-type">
+                <option value="Milligram">Миллиграмм</option>
+                <option value="Gram" selected>Грамм</option>
+                <option value="Kilogram">Килограмм</option>
+                <option value="Ton">Тонна</option>
+            </select>
+        </div>
+    </div>
+    <div class="login">
+        <h1>Форма логина</h1>
+        <p>Введите ваш логин и пароль, пожалуйста (</p>
+        <form class="form">
+            <p>
+                <label for="login">Логин</label>
+                <input type="login" id="login">
+            </p>
+            <p>
+                <label for="password">Пароль</label>
+                <input type="password" name="" id="password">
+            </p>
+            <button type="submit">Вход</button>
+        </form>
+    </div>
+    <script src="calc.js"></script>
+    <script src="login.js"></script>
+</body>
+</html>

+ 21 - 0
HW 01/login.js

@@ -0,0 +1,21 @@
+var credentials = {
+    login: 'admin',
+    password: 'qwerty',
+};
+
+//Нахожу все элементы с которыми буду работать
+let login    = document.querySelector("#login");
+let password = document.querySelector("#password");
+let form     = document.querySelector(".form");
+
+//Функция которая проверяет правильно ли введены логин и пароль
+let checkPersonalData = function() {
+    if(login.value == credentials.login && password.value == credentials.password) {
+        alert("Жесть, все верно, добро пожаловать !!!");
+    } else {
+        alert("Жесть, что то не верно, попробуй еще раз");
+    }
+};
+
+//Запуск функции checkPersonalData при отправки формы
+form.addEventListener("submit", checkPersonalData);

+ 7 - 0
HW 01/style.css

@@ -0,0 +1,7 @@
+.green {
+    background-color: greenyellow;
+}
+
+.red {
+    background-color: red;
+}