Home Explore Help
Register Sign In
Viktoriia.Yurchenko
/
HomeWork
Watch 1
Star 0
Fork 0
Files Issues 2 Pull Requests 0 Wiki
Browse Source

hw js01

Vika 2 years ago
commit
c703a9b96b
4 changed files with 127 additions and 0 deletions
Split View Show Diff Stats
  1. 1 0
      js01/img/avatarka.svg
  2. 27 0
      js01/index.html
  3. 47 0
      js01/main.js
  4. 52 0
      js01/style.css

File diff suppressed because it is too large
+ 1 - 0
js01/img/avatarka.svg


+ 27 - 0
js01/index.html
View File 

@@ -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>Document</title>
 
+  <link href="style.css" rel="stylesheet">
 
+</head>
 
+<body>
 
+  <div class="wrapperLogin">
 
+    <form name="checkPassword">
 
+      <div class="imgcontainer">
 
+        <img src="./img/avatarka.svg" alt="Avatar">
 
+      </div>
 
+      <p>Username</p>
 
+      <input id="login" name="login" type="text" value="" placeholder="Enter Username">
 
+      <p>Password</p>
 
+      <input id="password" name="password" type="password" value="" placeholder="Enter Password">
 
+      <input id="buttonLogin" name="button" type="button" value="Login"><br/>
 
+      <input id="reset" type="reset"  value="Reset">
 
+      <div id="statusLogin"></div>
 
+    </form> 
+    </div>
 
+  <script src='main.js'></script> 
+</body>
 
+</html>

+ 47 - 0
js01/main.js
View File 

@@ -0,0 +1,47 @@
 
+var credentials = {
 
+  login: 'admin',
 
+  password: 'qwerty',
 
+};
 
+const statusLogin = document.getElementById('statusLogin');
 
+
 
+const showErrorMessage = (node, message) => {
 
+  node.innerHTML = message;
 
+  node.style.background = 'red';
 
+};
 
+
 
+function checkLogin() {
 
+  const clientLogin = document.getElementById('login').value;
 
+  const clientPassword = document.getElementById('password').value;
 
+  const { login, password } = credentials;
 
+  
+  if (login !== clientLogin && password !== clientPassword) {
 
+    return showErrorMessage(statusLogin, 'wrong username and password');
 
+  };
 
+
 
+  if (login !== clientLogin) {
 
+    return showErrorMessage(statusLogin, 'wrong username');
 
+  };
 
+
 
+  if (password !== clientPassword) {
 
+    return showErrorMessage(statusLogin, 'wrong password');
 
+  };
 
+
 
+  statusLogin.innerHTML = 'authorization successful'; 
+  statusLogin.style.background = 'green';
 
+};
 
+
 
+function resetstatusLogin() {
 
+  statusLogin.innerHTML = '';
 
+  statusLogin.style.background = 'rgb(224, 239, 240)';
 
+};
 
+
 
+buttonLogin.onclick = checkLogin;
 
+reset.onclick = resetstatusLogin;
 
+
 
+// Task 1
 
+//
 
+// let distansKm = prompt('Введите расстояние км');
 
+// let speed = prompt('Введите вашу скорость');
 
+// let costGas = prompt('Ведите стоимость газа');
 
+// let money = distansKm/speed*costGas;
 
+// alert(`Возьмите с собой ${money} грн.`)

+ 52 - 0
js01/style.css
View File 

@@ -0,0 +1,52 @@
 
+.wrapperLogin {
 
+  background-color: rgb(224, 239, 240);
 
+  width: 30vw;
 
+  height: 60vh;
 
+  border: solid rgb(65, 109, 109);
 
+  margin-left: auto;
 
+  margin-right: auto;
 
+  padding-left: 15px;
 
+}
 
+form {
 
+  margin-bottom: 5%;
 
+  margin-left: auto;
 
+  margin-right: auto;
 
+}
 
+.imgcontainer img {
 
+  display: block;
 
+  margin-top: 8%;
 
+  margin-left: auto;
 
+  margin-right: auto;
 
+  background-color: rgb(185, 230, 202);
 
+  border: solid rgb(84, 86, 88);
 
+  border-radius: 50%;
 
+  width: 25%;
 
+}
 
+#statusLogin{
 
+  margin-top: 3%;
 
+  width: 95%;
 
+  height: 20px;
 
+  text-align: center;
 
+   
+ } 
+.wrapperLogin p {
 
+  font-size: 25px;
 
+}
 
+input[type=text], input[type=password] {
 
+  width: 95%;
 
+  padding: 12px;
 
+  display: inline-block;
 
+  border: 1px solid #ccc;
 
+  box-sizing: border-box;
 
+}
 
+input[type=button], input[type=reset] {
 
+  width: 95%;
 
+  padding: 12px;
 
+  margin-top: 15px;
 
+  display: inline-block;
 
+  border: 1px solid #ccc;
 
+  box-sizing: border-box; 
+} 
+input[type=button] {
 
+  background-color: rgb(30, 154, 158);
 
+}