NoroffFEU · KineOnes · Mar 20, 2024 · Mar 20, 2024 · Apr 3, 2024 · Apr 4, 2024
diff --git a/README.md b/README.md
@@ -1,2 +1,47 @@
-# css-frameworks-ca
-Replace this text with a description of your social media project.
+# js2-ca
+
+## Brief
+
+To apply knowledge of JavaScript techniques to implement the front-end functionality for a social media application.
+
+This assignment is building on my css-framework ca.
+
+## Required features
+
+Required features
+The following user stories are required for a passing submission:
+
+- User with @noroff.no or @stud.noroff.no email can register profile
+- Registered user can login
+- User can view a post content feed
+- User can filter the post content feed
+- User can search the post content feed
+- User can view a post content item by ID
+- User can create a post content item
+- User can update a post content item
+- User can delete a post content item
+
+## Built With
+
+- Figma (prototyping)
+- HTML
+- Bootstrap
+- SASS
+- JavaScript
+
+## Getting Started
+
+### Installing
+
+Clone the repo:
+
+```
+git@github.com:KineOnes/css-frameworks-ca.git
+
+The branch: js2
+
+```
+
+## Trello board for project planning:
+
+https://trello.com/b/Ui6nlMjg/javascript2
diff --git a/feed/index.html b/feed/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FEED</title>
+    <link rel="icon" href="/images/beige-knit.png" type="image" />
+    <link rel="stylesheet" href="/dist/css/index.css" />
+    <script src="/src/js/index.mjs" type="module"></script>
+
+    <script
+      src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+      defer></script>
+  </head>
+  <body
+    data-bs-theme="dark"
+    style="min-height: 100vh"
+    class="d-flex flex-column">
+    <header>
+      <div class="container">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+          <div class="container-fluid">
+            <a class="navbar-brand" href="/profile">NØSTE</a>
+            <button
+              class="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent"
+              aria-expanded="false"
+              aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                  <a class="nav-link" href="/profile">Profile</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link active" aria-current="page" href="/feed"
+                    >Feed</a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/">Logout</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+
+    <main>
+      <div class="container" style="max-width: 700px">
+        <div class="create-post">
+          <h1 class="title d-flex justify-content-center mt-3">Create post</h1>
+          <form id="createPostForm">
+            <div class="mb-3">
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                placeholder="Title"
+                required />
+            </div>
+            <div class="mb-3">
+              <textarea
+                class="form-control"
+                name="body"
+                rows="3"
+                placeholder="What's on you mind?"></textarea>
+            </div>
+            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+              <button class="btn btn-primary me-md-2" type="submit">
+                Post
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div class="container mt-5" style="max-width: 700px">
+        <div class="row">
+          <div class="col">
+            <h3 class="title">Latest posts</h3>
+          </div>
+          <div class="col-auto">
+            <select class="form-select" id="selectForm">
+              <option value="all">All</option>
+              <option value="media">With media</option>
+              <option value="no-media">Without media</option>
+            </select>
+          </div>
+          <form id="searchForm" class="d-flex col">
+            <input
+              name="searchQuery"
+              class="form-control me-2"
+              type="text"
+              placeholder="Search"
+              aria-label="Search" />
+            <button type="submit" class="btn btn-primary">Search</button>
+          </form>
+        </div>
+      </div>
+
+      <div id="feed">
+        <!-- JS generated content -->
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/feed/post/edit/index.html b/feed/post/edit/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>EDIT POST</title>
+    <link rel="icon" href="/images/beige-knit.png" type="image" />
+    <link rel="stylesheet" href="/dist/css/index.css" />
+    <script src="/src/js/index.mjs" type="module"></script>
+
+    <script
+      src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+      defer></script>
+  </head>
+  <body
+    data-bs-theme="dark"
+    style="min-height: 100vh"
+    class="d-flex flex-column">
+    <header>
+      <div class="container">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+          <div class="container-fluid">
+            <a class="navbar-brand" href="/profile">NØSTE</a>
+            <button
+              class="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent"
+              aria-expanded="false"
+              aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                  <a class="nav-link" href="/profile">Profile</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link active" aria-current="page" href="/feed"
+                    >Feed</a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/">Logout</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+    <main>
+      <h1 class="title d-flex justify-content-center mt-3">Edit post</h1>
+      <!-- JS generated content -->
+    </main>
+  </body>
+</html>
diff --git a/feed/post/index.html b/feed/post/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>POST</title>
+    <link rel="icon" href="/images/beige-knit.png" type="image" />
+    <link rel="stylesheet" href="/dist/css/index.css" />
+    <script src="/src/js/index.mjs" type="module"></script>
+
+    <script
+      src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+      defer></script>
+  </head>
+  <body
+    data-bs-theme="dark"
+    style="min-height: 100vh"
+    class="d-flex flex-column">
+    <header>
+      <div class="container">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+          <div class="container-fluid">
+            <a class="navbar-brand" href="/profile">NØSTE</a>
+            <button
+              class="navbar-toggler"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarSupportedContent"
+              aria-controls="navbarSupportedContent"
+              aria-expanded="false"
+              aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                  <a class="nav-link" href="/profile">Profile</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link active" aria-current="page" href="/feed"
+                    >Feed</a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="/">Logout</a>
+                </li>
+              </ul>
+              <form class="d-flex" role="search">
+                <input
+                  class="form-control me-2"
+                  type="search"
+                  placeholder="Search"
+                  aria-label="Search" />
+                <button type="button" class="btn btn-primary">Search</button>
+              </form>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </header>
+    <main>
+      <!-- JS generated content -->
+    </main>
+  </body>
+</html>
diff --git a/images/beige-knit.png b/images/beige-knit.png
diff --git a/images/blue-knit-png.png b/images/blue-knit-png.png
diff --git a/images/green-knit.png b/images/green-knit.png
diff --git a/images/thumbnail1.png b/images/thumbnail1.png
diff --git a/images/thumbnail2.png b/images/thumbnail2.png
diff --git a/images/thumbnail3.png b/images/thumbnail3.png
diff --git a/images/thumbnail4.png b/images/thumbnail4.png
diff --git a/images/thumbnail5.png b/images/thumbnail5.png
diff --git a/images/thumbnails b/images/thumbnails
diff --git a/images/userImageDefault.jpg b/images/userImageDefault.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HOME</title>
+    <link rel="icon" href="images/beige-knit.png" type="image" />
+    <!--To remove error favicon in console-->
+    <link rel="stylesheet" href="dist/css/index.css" />
+    <script src="src/js/index.mjs" type="module"></script>
+
+    <script
+      src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
+      defer></script>
+  </head>
+  <body
+    data-bs-theme="dark"
+    style="min-height: 100vh"
+    class="d-flex flex-column">
+    <header>
+      <div class="container">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+          <div class="container-fluid">
+            <a class="navbar-brand" href="/">NØSTE</a>
+          </div>
+        </nav>
+      </div>
+    </header>
+
+    <main class="container flex-grow-1" style="max-width: 700px">
+      <div class="row justify-content-center border rounded-3 mt-3 mb-3">
+        <div class="title d-flex justify-content-center mt-3 mb-3">
+          <h1>Login</h1>
+        </div>
+        <div class="col-12 col md-6">
+          <form id="loginForm">
+            <div class="form-group mb-3">
+              <label for="email">Email</label>
+              <input
+                class="form-control"
+                type="email"
+                required
+                pattern="^[\w\-.]+@(stud\.)?noroff\.no$"
+                required
+                name="email"
+                placeholder="noroff valid email only" />
+            </div>
+            <div class="form-group mb-3">
+              <label for="password">Password</label>
+              <input
+                class="form-control"
+                required
+                type="password"
+                name="password"
+                minlength="8"
+                placeholder="minimum length of 8 characters" />
+            </div>
+            <button type="submit" class="btn btn-primary mb-3">Login</button>
+          </form>
+
+          <form id="signupForm" action="/profile/registration">
+            <button class="btn btn-primary mb-3">Sign up!</button>
+          </form>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>