create view.js file and save version 3 b00tc4mp#181

Rafa0297 · Oct 9, 2024 · ba66995 · ba66995
1 parent a338b9b
commit ba66995
Show file tree

Hide file tree

Showing 14 changed files with 693 additions and 232 deletions.
diff --git a/staff/rafael-infante/unsocial.3/.gitkeep b/staff/rafael-infante/unsocial.3/.gitkeep
diff --git a/staff/rafael-infante/unsocial.3/data.js b/staff/rafael-infante/unsocial.3/data.js
@@ -0,0 +1,4 @@
+var users = [
+  { name: 'Peter Pan', email: '[email protected]', username: 'peterpan', password: '123123123' },
+  { name: 'Wendy Darling', email: '[email protected]', username: 'wendydarling', password: '123123123' }
+]
diff --git a/staff/rafael-infante/unsocial.3/images/boy.png b/staff/rafael-infante/unsocial.3/images/boy.png
diff --git a/staff/rafael-infante/unsocial.3/images/girl.png b/staff/rafael-infante/unsocial.3/images/girl.png
diff --git a/staff/rafael-infante/unsocial.3/images/users-avatar.png b/staff/rafael-infante/unsocial.3/images/users-avatar.png
diff --git a/staff/rafael-infante/unsocial.3/images/users-avatar2.png b/staff/rafael-infante/unsocial.3/images/users-avatar2.png
diff --git a/staff/rafael-infante/unsocial.3/index.html b/staff/rafael-infante/unsocial.3/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>Unsocial</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <link rel="shortcut icon" href="/staff/rafael-infante/unsocial/images/users-avatar2.png" type="image/x-icon">
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <header class="logo-container">
+    <img src="/staff/rafael-infante/unsocial/images/users-avatar.png" alt="" class="logo">
+    <h1>unSocial</h1>
+  </header>
+
+  <script src="data.js"></script>
+
+  <script src="logic.js"></script>
+
+  <script src="view.js"></script>
+
+  <script src="main.js"></script>
+
+</body>
+
+</html>
diff --git a/staff/rafael-infante/unsocial.3/logic.js b/staff/rafael-infante/unsocial.3/logic.js
@@ -0,0 +1,42 @@
+function registerUser(name, email, username, password, confirmPassword) {
+  if (name.length < 2)
+    throw new Error('Invalid name')
+
+  if (!/^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(email))
+    throw new Error('Invalid email')
+
+  var registeredUser = users.find(function (user) {
+    return user.email === email || user.username === username
+  })
+  if (registeredUser)
+    throw new Error('This user is already registered')
+
+  if (username.length < 4 || username.length > 12)
+    throw new Error('invalid user name')
+
+  if (password.length < 8)
+    throw new Error('invalid password')
+
+  if (password !== confirmPassword)
+    throw new Error('passwords do not match')
+  var user = { name: name, email: email, username: username, password: password }
+
+  users.push(user)
+}
+
+function authenticateUser(loginUsername, loginPassword) {
+  if (loginUsername.length < 4 || loginUsername.length > 12)
+    throw new Error('invalid username')
+
+  if (loginPassword < 8)
+    throw new Error('invalid password')
+
+  var user = users.find(function (user) {
+    return user.username === loginUsername && user.password === loginPassword
+  })
+
+  if (user === undefined)
+    throw new Error('wrong credentials')
+
+  return user
+}
diff --git a/staff/rafael-infante/unsocial.3/main.js b/staff/rafael-infante/unsocial.3/main.js
@@ -0,0 +1,7 @@
+var loggedUser = null
+
+var loginSection = buildLoginSection()
+
+var body = document.querySelector('body')
+
+body.appendChild(loginSection)
diff --git a/staff/rafael-infante/unsocial.3/style.css b/staff/rafael-infante/unsocial.3/style.css
@@ -0,0 +1,127 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+
+:root {
+  --font: 'Poppins';
+  font-family: var(--font);
+  background-color: #e4b834;
+}
+
+.logo-container {
+  display: flex;
+  text-decoration: none;
+  color: black;
+  align-items: center;
+  margin: 0;
+  padding-left: 15px;
+}
+
+.logo {
+  max-height: 45px;
+  margin-right: 5px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 15px 15px 15px;
+}
+
+.section-container {
+  background-color: white;
+  padding: 0 20px 20px 20px;
+  margin: 10px;
+  width: 85%;
+  max-width: 500px;
+  min-height: 500px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+label {
+  padding-bottom: 6px;
+  font-size: 14px;
+}
+
+input {
+  margin-bottom: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid gray;
+}
+
+button {
+  color: white;
+  background-color: black;
+  margin-top: 25px;
+  padding: 15px;
+  border-radius: 15px;
+  cursor: pointer;
+  font-weight: bolder;
+  border: none;
+}
+
+button:hover {
+  color: black;
+  background-color: #e7cc79;
+  border: none;
+}
+
+#btn-register {
+  margin: 0;
+}
+
+#bottom-text,
+p {
+  font-size: 13px;
+  color: grey;
+  margin-top: 15px;
+  margin-bottom: 0;
+}
+
+a {
+  text-decoration: none;
+  font-weight: bold;
+  color: black;
+  cursor: pointer;
+}
+
+a:hover {
+  color: #dda600;
+}
+
+h4 {
+  margin: 20px;
+}
+
+.password-container {
+  position: relative;
+  display: inline-block;
+}
+
+.password-container input {
+  width: 95%;
+}
+
+.password-container i {
+  position: absolute;
+  top: 40%;
+  right: 18px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+@media (max-width: 350px) {
+  .password-container input {
+    width: 92%;
+  }
+}