Upload Forms Files

a7med3sam · Jul 7, 2024 · 30f84b8 · 30f84b8
1 parent 6386919
commit 30f84b8
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 0 deletions.
diff --git a/js/login.js b/js/login.js
@@ -0,0 +1,11 @@
+let email = document.getElementById("email");
+let spanEmail = document.getElementById("span-email");
+
+let passWord = document.getElementById("password");
+let spanPass = document.getElementById("span-pw");
+
+function validate(e){
+    e.preventDefault();
+
+}
+
diff --git a/js/register.js b/js/register.js
@@ -0,0 +1,106 @@
+let form = document.getElementsByClassName("form")[0];
+
+let firstName = document.getElementById("firstName");
+let spanFirstName = document.getElementById("span-first-name");
+let rejxname = /^[a-zA-Z ]{2,30}$/;
+
+let lastName = document.getElementById("lastName");
+let spanLastName = document.getElementById("span-last-name");
+
+let email = document.getElementById("email");
+let regxEmail = new RegExp("[a-z0-9]+@[a-z]+.[a-z]{2,3}");
+let spanEmail = document.getElementById("span-email");
+
+let passWord = document.getElementById("password");
+let rejxPass = /^(?=.*[0-9]).*$/;
+let spanPass = document.getElementById("span-pw");
+
+let reEnterPass = document.getElementById("reEnterPassword");
+let spanReEnterPw = document.getElementById("span-reEnter");
+let err = false;
+
+function validation(event) {
+  event.preventDefault();
+
+  if (firstName.value === "") {
+    spanFirstName.textContent = "Required!";
+    err = true;
+  } else if (!rejxname.test(firstName.value)) {
+    spanFirstName.textContent = "Enter A Character!";
+    err = true;
+  } else {
+    spanFirstName.textContent = "";
+    err = false;
+  }
+
+  if (lastName.value === "") {
+    spanLastName.textContent = "Required!";
+    err = true;
+  } else if (!rejxname.test(lastName.value)) {
+    spanLastName.textContent = "Enter A Character!";
+    err = true;
+  } else {
+    spanLastName.textContent = "";
+    err = false;
+  }
+
+  if (email.value === "") {
+    spanEmail.textContent = "Required!";
+    err = true;
+  } else if (!regxEmail.test(email.value)) {
+    spanEmail.textContent = "Enter A Character!";
+    err = true;
+  } else {
+    spanEmail.textContent = "";
+    err = false;
+  }
+
+  if (passWord.value === "") {
+    spanPass.textContent = "Required!";
+    err = true;
+  } else if (!rejxPass.test(passWord.value)) {
+    spanPass.textContent = "Enter A Password!";
+    err = true;
+  } else {
+    spanPass.textContent = "";
+    err = false;
+  }
+
+  if (reEnterPass.value === "") {
+    spanPass.textContent = "Required!";
+    err = true;
+  } else if (reEnterPass.value !== passWord.value) {
+    spanReEnterPw.textContent = "Passwords do not match!";
+    err = true;
+  } else {
+    spanPass.textContent = "";
+    err = false;
+  }
+
+  if (!err) {
+    const u = new User(
+      firstName.value,
+      lastName.value,
+      email.value,
+      passWord.value
+    );
+    let users = getUsersArr();
+    users.push(u);
+    localStorage.setItem("users", JSON.stringify(users));
+  }
+}
+function getUsersArr() {
+  let users = localStorage.getItem("users");
+  return users ? JSON.parse(users) : []; // law fe users array hatha lw mafesh e3mle array
+}
+
+form.addEventListener("submit", validation);
+
+class User {
+  constructor(f, l, e, p) {
+    this.firstName = f;
+    this.lastName = l;
+    this.email = e;
+    this.password = p;
+  }
+}
diff --git a/login.html b/login.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Log In</title>
+  </head>
+  <body>
+    <div class="container">
+      <h2>Log In</h2>
+      <div class="form-group">
+        <label for="email">Email Address:</label>
+        <input type="email" id="email" name="email" />
+        <span id="span-email"></span>
+      </div>
+      <div class="form-group">
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password" />
+        <span id="span-pw"></span>
+      </div>
+      <div class="from-group">
+        <input id="submit" type="submit" value="Log In">
+      </div>
+    </div>
+    <script src="js/login.js"></script>
+  </body>
+</html>
diff --git a/register.html b/register.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register</title>
+    <style>
+        #span-first-name {
+            color: red;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Sign Up</h2>
+        <form class="form">
+            <div class="form-group">
+                <label for="firstName">First Name:</label>
+                <input type="text" id="firstName" name="firstName">
+                <span id="span-first-name"></span>
+            </div>
+            <div class="form-group">
+                <label for="lastName">Last Name:</label>
+                <input type="text" id="lastName" name="lastName">
+                <span id="span-last-name"></span>
+            </div>
+            <div class="form-group">
+                <label for="email">Email Address:</label>
+                <input type="email" id="email" name="email">
+                <span id="span-email"></span>
+            </div>
+            <div class="form-group">
+                <label for="password">Password:</label>
+                <input type="password" id="password" name="password">
+                <span id="span-pw"></span>
+            </div>
+            <div class="form-group">
+                <label for="reEnterPassword">Re-enter Password:</label>
+                <input type="password" id="reEnterPassword" name="reEnterPassword">
+                <span id="span-reEnter"></span>
+            </div>
+            <div class="form-group">
+                <input id="submit" type="submit" value="Register">
+            </div>
+        </form>
+    </div>
+    <script src="js/register.js"></script>
+</body>
+</html>