Elena 3 years ago
commit
197764e08c
3 changed files with 149 additions and 0 deletions
  1. 72 0
      HW 2/css/main.css
  2. 25 0
      HW 2/index.html
  3. 52 0
      HW 2/js/script.js

+ 72 - 0
HW 2/css/main.css

@@ -0,0 +1,72 @@
+body {
+    background-color: rgb(12, 20, 39);
+    color: white;
+    text-align: center;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+.wrapper {
+display: flex;
+flex-direction: column;
+align-items: center;
+}
+
+.title {
+    font-size: 26px;
+    line-height: 25px;
+    margin-bottom: 30px;
+}
+
+.form {
+    max-width: 300px;
+    width: 100%;
+    background-color: white;
+    border-radius: 20px;
+    padding: 36px 33px;
+    box-shadow: 0px 5px 10px 2px rgb(34 60 80 / 31%);
+}
+
+.form__input {
+    border: none;
+    display: block;
+    background-color: #f2f2f2;
+    color: #888888;
+    border-radius: 7px;
+    padding: 17px 6px;
+    margin-bottom: 15px;
+    width: 100%;
+    outline: none;
+}
+
+.form__btn {
+    padding: 17px 62px;
+    border: none;
+    border-radius: 10px;
+    background-color: rgb(12, 20, 39);
+    color: white;
+    font-size: 16px;
+    display: block;
+    margin: 27px 0 0 auto;
+    box-shadow: 0px 5px 10px 2px rgb(34 60 80 / 20%);
+    transition: all .5s;
+    cursor: pointer;
+}
+
+.form__btn:hover {
+    box-shadow: 0px 5px 10px 2px rgb(34 60 80 / 50%);
+    background-color: #ffffff;
+    color: rgb(12, 20, 39);
+}
+
+.style__div {
+    padding: 20px;
+    width: 250px;
+    margin: 0 auto;
+    margin-top: 20px;
+    border-radius: 3px;
+}

+ 25 - 0
HW 2/index.html

@@ -0,0 +1,25 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <div class="container">
+        <div class="wrapper">
+            <h2 class="title">Form</h2>
+            <form class="form" action="#">
+                <input class="form__input input__login" type="text" placeholder="Login">
+                <input class="form__input input__password" type="tel" placeholder="Password">
+                <button class="form__btn" type="submit">Submit</button>
+            </form>
+        </div>
+    </div>
+
+    <script src="js/script.js"></script>
+</body>
+
+</html>

+ 52 - 0
HW 2/js/script.js

@@ -0,0 +1,52 @@
+"use strict";
+
+document.addEventListener("DOMContentLoaded", () => {
+    // Калькулятор подсчета каллорий для девущек 
+
+    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;
+
+        alert(`${totalCount} - это количество калорий в день позволит вам есть и худеть`);  //выводим общую сумму количества каллорий на день 
+        } else {
+        console.log('error'); //выводим в консоль сообщение об ошибке 
+          i--; //возвращаем пользователя к вопросам опять, если не прошел проверку 
+        }
+    }     
+
+
+
+
+    const btn = document.querySelector(".form__btn"),
+        inputLogin = document.querySelector(".input__login"),
+        inputPassword = document.querySelector(".input__password"),
+        trueLogin = 'admin',
+        truePassword = 'qwerty',
+        div = document.createElement("div");
+
+
+    btn.addEventListener("click", (event) => {
+        event.preventDefault()
+        if (inputLogin.value == trueLogin && inputPassword.value == truePassword) {
+            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);
+        }
+    });
+});
+
+
+