DLSU-CCAPDEV · GcpAps · Jun 26, 2023 · Jun 24, 2023 · Jun 24, 2023 · Jun 24, 2023
diff --git a/css/styles.css b/css/styles.css
@@ -354,7 +354,7 @@ input.form-control, textarea.form-control {
     overflow-y: auto;
 }
 
-#login-wrapper {
+#login-wrapper,#register-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -369,7 +369,7 @@ input.form-control, textarea.form-control {
     font-weight: 600;
 }
 
-#login-container {
+#login-container,#register-container {
     min-width: 25%;
     background-color: var(--color-secondary);
     border-radius: var(--radius);
@@ -419,4 +419,53 @@ input.form-control, textarea.form-control {
     width: 100%;
     text-transform: uppercase;
     font-weight: 700;
-}
+}
+
+#btn-register {
+    background-color: var(--color-accent);
+    width: 20%;
+    text-transform: uppercase;
+    font-weight: 700;
+    float: right;
+
+}
+
+ #avatars {
+    display: flex;
+    overflow-x: scroll;
+    scroll-behavior: smooth;
+    white-space: nowrap;
+    width: 400px; 
+  }
+
+.avatar-selection{
+    height: 100px;
+    width: 100px;
+    cursor: pointer;
+    border: 1px solid var(--color-secondary);
+}
+
+.avatar-selection:hover {
+    border-color:  var(--color-accent);
+
+}
+
+.avatar-selection.selected {
+    border-color: red;
+  }
+
+#submit-register{
+    background-color: var(--color-accent);
+    width: 30%;
+    text-transform: uppercase;
+    font-weight: 700;
+    float: right;
+}
+
+#cancel-register{
+    background-color: var(--color-accent);
+    width: 30%;
+    text-transform: uppercase;
+    font-weight: 700;
+
+}
diff --git a/html/login.html b/html/login.html
@@ -15,6 +15,12 @@
     <script src="../js/login.js"></script>
 </head>
 <body>
+
+<div id="regHeader">
+    <button class="btn" id="btn-register" onclick="location.href='register.html'">Dont have an account?</button>
+</div>
+
+
 <div id="login-wrapper">
     <h1 id="main-branding">forum.</h1>
     <div id="login-container">
@@ -42,4 +48,4 @@ <h3 id="login-heading">LOGIN</h3>
     </div>
 </div>
 </body>
-</html>
+</html>
diff --git a/html/register.html b/html/register.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en" dark>
+<head>
+	<meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Forum - Register</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css">
+    <link rel="stylesheet" href="../css/styles.css">
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+    <script src="../js/scripts.js"></script>
+
+</head>
+<body>
+
+
+
+
+<div id="register-wrapper">
+	<h1 id="main-branding">Forum Registration</h1>
+
+ <div id="register-container">
+
+
+  <form action="login.html" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
+    <h2>Account Information</h2>
+
+
+    <label for="username" class="form-label">Username:</label>
+    <input type="text" id="username" name="username" class="form-control" required>
+    <br><br>
+
+    <label for="email" class="form-label">Email:</label>
+    <input type="email" id="email" name="email" class="form-control" required>
+    <br><br>
+
+    <label for="password" class="form-label">Password:</label>
+    <input type="password" id="password" name="password" class="form-control" required>
+    <br><br>
+
+    <label for="confirm_password" class="form-label">Confirm Password:</label>
+    <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
+    <span id="password_error" style="color:red"></span>
+    <br><br>
+
+
+    <h2>Avatar Preference</h2>
+
+  	<div id="avatars">
+  		<img class="avatar-selection" src="https://api.dicebear.com/6.x/avataaars/svg?seed=davidmiller" >
+  		<img class="avatar-selection" src="https://api.dicebear.com/6.x/avataaars/svg?seed=davidmay" >
+  		<img class="avatar-selection" src="https://api.dicebear.com/6.x/avataaars/svg?seed=Sarahg" >
+  		<img class="avatar-selection" src="https://api.dicebear.com/6.x/avataaars/svg?seed=May" >
+      <img class="avatar-selection" src="https://api.dicebear.com/6.x/avataaars/svg?seed=Mayssw" >
+      <img class="avatar-selection" src="https://api.dicebear.com/6.x/avataaars/svg?seed=May23" >
+      <img class="avatar-selection" src="https://api.dicebear.com/6.x/avataaars/svg?seed=Mayasd" >
+
+  	</div>
+    <span id="avatar_error" style="color:red"></span>
+
+    <h2>Terms and Conditions</h2>
+    <input type="checkbox" id="terms" name="terms" required>
+    <label for="terms">I agree to the terms and conditions</label><br><br>
+
+    <input type="submit" value="Submit" class="btn" id="submit-register" onclick="matchPassword()">
+    <input type="reset" value="Cancel" class="btn" id="cancel-register" onclick="location.href='login.html'">
+  </form>
+  </div>
+</div>
+
+<script src="../js/register.js"></script>
+</body>
+</html>
diff --git a/js/register.js b/js/register.js
@@ -0,0 +1,41 @@
+
+const avatars = document.querySelectorAll('.avatar-selection');
+let lastClickedAvatar = null;
+
+avatars.forEach(avatar => {
+  avatar.addEventListener('click', function handleClick(event) {
+
+    if (lastClickedAvatar) {
+      lastClickedAvatar.style.borderColor = ''; 
+    }
+
+    avatar.style.borderColor = 'var(--color-accent)'; 
+    lastClickedAvatar = avatar; 
+  });
+});
+
+
+ function validateForm() {
+      var password = document.getElementById("password").value;
+      var confirm_password = document.getElementById("confirm_password").value;
+      var password_error = document.getElementById("password_error");
+      var avatar_error = document.getElementById("avatar_error");
+
+      if (password !== confirm_password) {
+        password_error.innerHTML = "Passwords do not match.";
+        return false;
+      } 
+      else {
+
+        password_error.innerHTML = "";
+        if (!lastClickedAvatar) {
+          avatar_error.innerHTML = "Pick an avatar";
+          return false;
+      }
+          return true;
+
+      }
+
+
+}
+