Emmanuil 5 년 전
커밋
5ccbe00e15
3개의 변경된 파일138개의 추가작업 그리고 0개의 파일을 삭제
  1. 29 0
      js-01/Vartanian-hw1/index.html
  2. 67 0
      js-01/Vartanian-hw1/js.js
  3. 42 0
      js-01/Vartanian-hw1/style.css

+ 29 - 0
js-01/Vartanian-hw1/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="all-form">
+      <form class="form" action="#">
+        Login <br />
+        <input type="text" id="log" placeholder="Введите Ваш логин" /> <br />
+        Password <br />
+        <input type="password" id="pass" placeholder="Введите Ваш пароль" />
+        <br />
+        <input
+          id="btn"
+          type="button"
+          name="b"
+          value="login"
+          onclick="buttonClick (this)"
+        />
+      </form>
+    </div>
+    
+    <script src="js.js"></script>
+  </body>
+</html>

+ 67 - 0
js-01/Vartanian-hw1/js.js

@@ -0,0 +1,67 @@
+// ЭТО Я ВАМ ПОКАЗАЛ, ЧТО Я ПРОБОВАЛ, ИЗМЕНЯЛ
+
+// var firstParameter = 25;
+// var secondParameter = 10000;
+// var somePartialResult = firstParameter*15;
+// var someOtherPartialResult = secondParameter/10;
+// var result = somePartialResult + someOtherPartialResult;
+// console.log(result);
+// alert(result);
+
+
+
+// Я ЗАКОМЕНТИЛ, ЧТОБЫ ОНО НЕ ВЫЛАЗЕЛО ПОСТОЯННО, ЭТО ПЕРВЫЙ УРОВЕНЬ ДЗ
+
+// var firstParameter = prompt('Привет Друг! Сейчас я тебе помогу решить твою задачу. Введи пожалуйста первую цифру.');
+// var secondParameter = prompt(`Отлично. Ты ввел цифру ${firstParameter}, а теперь напиши вторую цифру`);
+// var somePartialResult = prompt(`Умножь свою первую цифру ${firstParameter} на любую цифру`);var somePartialResult = firstParameter * somePartialResult;
+// alert(`Получается ${somePartialResult}`);
+// var someOtherPartialResult = prompt(`Теперь подели свою вторую цифру  ${secondParameter} на, что хочешь`);
+// var someOtherPartialResult = secondParameter/someOtherPartialResult;
+// alert(`Получается ${someOtherPartialResult}`);
+// var result = alert(`И последнее, нам нада сложить два полученых результата ${somePartialResult} на ${someOtherPartialResult}`)
+// var result = somePartialResult + someOtherPartialResult;
+// alert(`Итого, ответ ${result}`);
+// alert('Спасибо за сотрудничество!!!');
+
+
+
+// УРОВЕНЬ СИНИЙ ПОЯС
+alert('Введите пожалуйста свой логин и пароль.')
+
+function buttonClick(button) {
+  var credentials = {
+    login: "admin",
+    password: "qwerty"
+  };
+
+  var log = document.querySelector('#log').value;
+  var pass = document.querySelector('#pass').value;
+  var correct = document.querySelector('#btn').style;
+  var wrong = document.querySelector('#log').style;
+  var wrong1 = document.querySelector('#pass').style;
+  var wrong2 = document.querySelector('#btn').style;
+  
+  if (log == credentials.login){
+    wrong.border = '1px solid grey'
+  }
+  else {
+    wrong.border = '1px solid red';
+    wrong2.background = 'none';
+    alert('Вы не правильно ввели логин!!!');
+  } 
+
+  if (pass == credentials.password){
+    wrong1.border = '1px solid grey'
+  }
+  else {
+    wrong1.border = '1px solid red';
+    wrong2.background = 'none';
+    alert('Вы не правильно ввели пароль!!!');
+  } 
+
+  if (log == credentials.login && pass == credentials.password){
+    correct.background = 'green';
+    alert('Вы Успешно зарегестрировались!!!');
+  }
+}

+ 42 - 0
js-01/Vartanian-hw1/style.css

@@ -0,0 +1,42 @@
+body {
+  font-family: sans-serif;
+  margin: 0;
+}
+
+.all-form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.form {
+  width: 300px;
+  font-size: 22px;
+}
+
+input {
+  font-size: 15px;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+#log,
+#pass {
+  width: 200px;
+  margin: 5px 0;
+}
+
+#btn {
+  width: 100px;
+  margin-left: 114px;
+  font-size: 15px;
+}
+
+#btn:hover {
+  background: blue;
+  cursor: pointer;
+  border: 1px solid blue;
+  color: white;
+  font-weight: bold;
+}