HW 07.05

5 years ago · 8a2ed9f230
parent 7174748fdc
commit 8a2ed9f230
2 changed files with 99 additions and 0 deletions
--- a/JSadvan/index.html
+++ b/JSadvan/index.html
@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link rel="stylesheet" type="text/css" href="style.css">
+	<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
+	<title>Homework #3 Prokhorova Anna</title>
+</head>
+<body>
+	<form action="" method="post" name="test" id="form">
+		<h1>Registration form</h1>
+		<label>
+			<input onchange="validation()" type="text" name="email" placeholder="Email" id="email">
+			<div class="invalid-input" id="email_inv"></div>
+		</label>
+		<br>
+		<label>
+			<input type="password" name="password" placeholder="Password">
+		</label>
+		<br>
+		<label>
+			<input type="password" name="confirmation" placeholder="Confirm password">
+		</label>
+		<br>
+		<div>
+			<input onclick="entrance()" type="button" name="submit" value="Register">
+		</div>
+	</form>
+
+	<script>
+		var error = false;
+        function validation() {
+			let email = form.email.value;
+			let email_inv = document.getElementById("email_inv");
+			let pattern = /(@)/;
+			if(!pattern.test(email)) {
+				error = "Your email isn't valid";
+				email_inv.innerHTML = `<span>${error}</span>`;
+				document.getElementById("email").style.border = "1px solid red";
+			}
+			if(!error) {
+				document.getElementById("email_inv").innerHTML = " ";
+				document.getElementById("email").style.border = "1px solid grey";
+			}
+		}
+		function entrance() {
+			if(!error) 
+				document.location.reload(true);
+		}
+    </script>
+</body>
+</html>
--- a/JSadvan/style.css
+++ b/JSadvan/style.css
@ -0,0 +1,48 @@
+body {
+	margin: 0px;
+	padding: 0px;
+}
+#form {
+	width: 500px;
+	min-height: 100px;
+	margin: auto;
+	font-family: 'Poppins', sans-serif;
+	color: #333333;
+	font-size: 14px;
+	
+}
+h1 {
+	text-align: center;
+	font-size: 30px;
+	font-weight: bold;
+}
+label input {
+	width: 500px;
+	height: 30px;
+	border: 1px solid #bbbbbb;
+	border-radius: 3px;
+	margin-bottom: 15px;
+	outline: none;
+}
+div input {
+	background: #0077cc;
+	width: 200px;
+	height: 40px;
+	color: white;
+	border: 1px solid #bbbbbb;
+	border-radius: 10px;
+	float: left;
+	outline: none;
+}
+
+.invalid-input {
+	margin-top: -10px;
+	color: red;
+	font-size: 80%;
+}
+/* input:valid {
+	border-color: green;
+}
+input:invalid {
+	border-color: red;
+} */