瀏覽代碼

add task for blue belt

serg155alternate 2 年之前
父節點
當前提交
e710f9dc03
共有 3 個文件被更改,包括 127 次插入0 次删除
  1. 27 0
      HWBLUE/index.html
  2. 37 0
      HWBLUE/script.js
  3. 63 0
      HWBLUE/style.css

+ 27 - 0
HWBLUE/index.html

@@ -0,0 +1,27 @@
+<!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>Login</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <form action="#">
+             <h4>Внесите данные </h4>
+            <input required placeholder="логин" name="login" type="text" class="form__login">
+            <input required placeholder="пароль" name="password" type="text" class="form__password">
+            <button class="btn">Login</button>
+        </form>
+
+        <div class="modal">
+            <div data-close class="close">&times;</div>
+            <span class="modal__title"></span>
+        </div>
+    </div>
+    
+    <script src="script.js"></script>
+</body>
+</html>

+ 37 - 0
HWBLUE/script.js

@@ -0,0 +1,37 @@
+let credentials = {
+    login: 'admin',
+    password: 'qwerty',
+};
+
+const btnLogin = document.querySelector('.btn'),
+    modal = document.querySelector('.modal'),
+    close = document.querySelector('.close'),
+    textMessageArea = document.querySelector('.modal__title');
+
+let inputLogin = document.querySelector('.form__login'),
+    inputPassword = document.querySelector('.form__password');
+
+/* inputPassword.addEventListener('change', () => {
+    inputPassword.value = inputPassword.value.replace(/[\s\S]/g, "*");
+}) */
+
+btnLogin.addEventListener('click', (e) => {
+    e.preventDefault();
+    if (inputLogin.value === credentials.login && inputPassword.value === credentials.password) {
+        modal.style.display = 'block';
+        modal.style.backgroundColor = 'green';
+        textMessageArea.innerText = 'Поздравляем - вы ввели верные данные';
+        inputLogin.value = '';
+        inputPassword.value = '';
+    } else {
+        modal.style.display = 'block';
+        modal.style.backgroundColor = 'red';
+        textMessageArea.innerText = 'Ошибка ввода пароля или логина. Попробуйте снова';
+        inputPassword.value = '';
+    }
+
+});
+
+close.addEventListener('click', () => {
+    modal.style.display = 'none';
+})

+ 63 - 0
HWBLUE/style.css

@@ -0,0 +1,63 @@
+*, html {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+}
+html {
+    background-color:rgb(210, 248, 248);
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 50px;
+    
+}
+form {
+
+    width: 500px;
+    height: 300px;
+    margin:  0 auto;
+    
+}
+h4 {
+    margin-bottom: 20px;
+    text-align: center;
+}
+.btn {
+    width: 80px;
+}
+
+.modal { 
+         display: none;
+         position: fixed;
+         top: 50px;
+         left: 35%;
+         width: 550px;
+         margin: 0 auto;
+         padding: 40px;
+         border: 1px solid rgba(0,0,0,.2);
+         border-radius: 4px;
+         text-align: center;
+
+        }
+.close {
+         position: absolute;
+         top: 8px;
+         right: 14px;
+         font-size: 30px;
+         color: #000;
+         opacity: .5;
+         font-weight: 700;
+         border: none;
+         background-color: transparent;
+         cursor: pointer;
+     }
+.modal__title {
+         text-align: center;
+         font-size: 18px;
+         text-transform: uppercase;
+}
+
+
+