Browse Source

new dz js join menu

mmertalagoz 3 years ago
commit
8ac9b938ce
3 changed files with 129 additions and 0 deletions
  1. 48 0
      css/style.css
  2. 29 0
      index.html
  3. 52 0
      script.js

+ 48 - 0
css/style.css

@@ -0,0 +1,48 @@
+form {
+	width: 600px;
+	margin: 200px auto;
+}
+div {
+	width: 100%;
+	margin: 15px auto;
+}
+label {
+	display: block;
+	padding: 20px;
+	font-size: 25px;
+}
+input {
+	width: 96%;
+	padding: 10px;
+	border: 1px solid #797979;
+	font-size: 20px;
+	margin-left: 20px;
+	border-radius: 3px;
+}
+button {
+	margin: 20px;
+	padding: 20px;
+	width: 100px;
+	border: none;
+	outline: none;
+	cursor: pointer;
+	border-radius: 5px;
+	font-size: 20px;
+	font-weight: bold;
+	color: whitesmoke;
+	background-color: darkblue;
+	text-align: center;
+}
+span {
+	display: block;
+	margin-left: 20px;
+	color: red;
+	font-style: italic;
+}
+.formbox {
+	display: flex;
+	align-items: center;
+	width: 800px;
+	height: 600px;
+	background-color: rgba(157, 240, 255, 0.747);
+}

+ 29 - 0
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">
+    <link rel="stylesheet" href="./css/style.css">
+    <title>DzJsJoinMenu</title>
+</head>
+<body>
+    
+
+    <div class="formbox">
+    <form action="https://a-level.com.ua" method="POST">
+        <div>
+            <label for="username">Имя</label>
+            <input type="text" name="username" placeholder="Имя с латинскими буквами">
+            <span></span>
+        </div>
+        <div>
+            <label for="password">Пароль</label>
+            <input type="password" name="password" placeholder="Пароль с латинскими буквами">
+            <span></span>
+        </div>
+        <button id="log-in">Вход</button>
+    </form>
+</div>
+</body>
+</html>
+<script src="./script.js"></script>

+ 52 - 0
script.js

@@ -0,0 +1,52 @@
+window.onload = () =>{
+    this.sessionStorage.setItem("username", "admin");
+    this.sessionStorage.setItem("password", "qwerty");
+}
+var input = document.getElementsByTagName('input');
+var login = document.getElementById('log-in');
+var form = document.querySelector('form');
+form.onsubmit = ()=>{return false}
+
+login.onclick = ()=>{
+    if ((input[0].value != "") && (input[1].value != "")) 
+    {
+        if ((input[0].value == sessionStorage.getItem("username")) && (input[1].value == sessionStorage.getItem("password"))) 
+        {
+            form.onsubmit = ()=>{return 1}
+        }
+        else
+        {
+            if ((input[0].value != sessionStorage.getItem("username"))) 
+            {
+                input[0].nextElementSibling.textContent = "Имя не правильно";
+                 setTimeout(()=>{
+                     input[0].nextElementSibling.textContent = "";
+                 }, 2000);
+            }
+            if ((input[1].value != sessionStorage.getItem("password"))) 
+            {
+                input[1].nextElementSibling.textContent = "Пароль не правильно";
+                 setTimeout(()=>{
+                     input[1].nextElementSibling.textContent = "";
+                 }, 2000);
+            }
+        }
+    }
+    else
+    {
+        if (input[0].value == "")
+        {
+            input[0].nextElementSibling.textContent = "Ведите имя";
+            setTimeout(()=>{
+                input[0].nextElementSibling.textContent = "";
+            }, 2000);
+        }
+        if (input[1].value == "")
+        {
+            input[1].nextElementSibling.textContent = "Ведите пароль";
+            setTimeout(()=>{
+                input[1].nextElementSibling.textContent = "";
+            }, 2000);
+        }
+    }
+}