VildeAvloes · VildeAvloes · Dec 3, 2023 · Dec 3, 2023 · Dec 3, 2023 · Dec 3, 2023
diff --git a/README.md b/README.md
@@ -1,19 +1,29 @@
 # Hello!
 
-## _CSS Frameworks CA_
+## _JS 2 CA_
 
-![A screenshot of the portofolio page.](/src/assets/css-frameworks-screenshot.png)
+![A screenshot of the portofolio page.](/src/assets/social-media-screenshot.png)
 
 ## Description
 
-This is my delivery for the CSS Frameworks CA. It is a social media platform consisting of three pages so far:
+This is my delivery for the JS2 CA. It is a social media platform consisting of:
 
 - Authentication page
+- Log in form
+- Register form
 - Feed page
+- Create post form
+- Update post form
+- Post page
+
+Also has a non interactive:
+
 - Profile page
 
 _Built With_
 
+- JavaScript
+- JSDocs
 - HTML5
 - Bootstrap
 - SASS/SCSS

diff --git a/feed/index.html b/feed/index.html
@@ -10,17 +10,17 @@
     <link rel="stylesheet" href="../dist/css/styles.css" />
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
-      crossorigin="anonymous"
+      defer
     ></script>
+    <script src="/src/js/index.mjs" defer type="module"></script>
   </head>
   <body class="row gx-0">
     <div class="col-12 col-md-3 bg-light">
       <nav
         class="navbar navbar-expand-md bg-light d-md-flex flex-column align-items-start sticky-md-top"
       >
         <div class="container-fluid pb-1">
-          <a class="navbar-brand" href="/feed/index.html">
+          <a class="navbar-brand" href="/feed/">
             <span class="text-secondary fw-bold display-5">Hello!</span>
           </a>
           <button
@@ -40,19 +40,19 @@
           <div class="bg-light py-1">
             <ul class="navbar-nav fw-bold d-lg-flex flex-md-column">
               <li class="nav-item active mx-2">
-                <a href="/feed/index.html" class="nav-link" aria-current="page">
+                <a href="/feed/" class="nav-link" aria-current="page">
                   <i class="bi bi-house-door-fill m-1 fs-4"></i>
                   Home
                 </a>
               </li>
               <li class="nav-item mx-2">
-                <a href="/profile/index.html" class="nav-link">
+                <a href="/profile/" class="nav-link">
                   <i class="bi bi-person-fill m-1 fs-4"></i>
                   Profile
                 </a>
               </li>
               <li class="nav-item mx-2">
-                <a href="../index.html" class="nav-link">
+                <a id="logOut" class="nav-link">
                   <i class="bi bi-power m-1 fs-4"></i>
                   Log Out
                 </a>
@@ -64,20 +64,10 @@
     </div>
 
     <section class="col-12 col-md-6 flex-column justify-content-center px-3">
-      <div class="row mt-3 pb-3 align-items-center border-bottom">
-        <div class="col-2">
-          <img
-            src="/src/assets/profile/woman-profile.jpg"
-            alt="Profile photo for Tigerlily. A photo of a young woman with long and curly brown hair."
-            class="rounded-circle w-100"
-          />
-        </div>
-        <div class="col-8">
-          <h1 class="fw-light fs-5">@tigerlily</h1>
-        </div>
-      </div>
-      <form class="d-flex mb-0 mt-3" role="search">
+      <div id="profileThumbnail"></div>
+      <form id="searchForm" class="d-flex mb-0 mt-3" role="search">
         <input
+          id="searchInput"
           class="form-control me-2"
           type="search"
           placeholder="Search"
@@ -87,17 +77,19 @@ <h1 class="fw-light fs-5">@tigerlily</h1>
       </form>
       <div class="d-flex justify-content-between alig mt-3">
         <div>
-          <button
+          <a
+            href="/post/create/"
             class="btn btn-secondary"
-            data-bs-toggle="modal"
-            data-bs-target="#create-post"
+            tabindex="-1"
+            role="button"
           >
             <i class="bi bi-plus-lg me-1"></i>
             Create Post
-          </button>
+          </a>
         </div>
         <div class="dropdown">
           <button
+            id="sortButton"
             class="btn btn-secondary dropdown-toggle"
             type="button"
             data-bs-toggle="dropdown"
@@ -106,192 +98,14 @@ <h1 class="fw-light fs-5">@tigerlily</h1>
             Sort
           </button>
           <ul class="dropdown-menu dropdown-menu-end">
-            <li><a class="dropdown-item" href="#">Latest</a></li>
-            <li><a class="dropdown-item" href="#">Oldest</a></li>
+            <li><a id="latestButton" class="dropdown-item">Latest</a></li>
+            <li><a id="oldestButton" class="dropdown-item">Oldest</a></li>
           </ul>
         </div>
       </div>
 
       <div class="row justify-content-center">
-        <ul class="ps-0 list-unstyled col-md-8 mt-3">
-          <li class="card py-2 my-3">
-            <div class="align-items-center mb-3 mx-2">
-              <div class="row align-items-center">
-                <div class="col-3 col-md-2">
-                  <img
-                    src="/src/assets/profile/cute-dog.jpg"
-                    alt="Profile photo for cutedogs. A picture of a golden retriever sitting down and smiling to the camera. "
-                    class="rounded-circle w-100"
-                  />
-                </div>
-                <p class="card-title col-5 fs-5">cutedogs</p>
-              </div>
-            </div>
-            <img
-              src="/src/assets/posts/corgi.jpg"
-              alt="Corgi walking on railroads smiling happily in the rain."
-              class="img-fluid"
-            />
-            <div class="card-body">
-              <div class="d-flex align-items-center mb-2">
-                <i class="bi bi-heart fs-4 me-2"></i>
-                <i class="bi bi-chat-right fs-4 ms-2"></i>
-              </div>
-              <p class="card-text">
-                Caught this corgi in action as he was out on a walk today. He
-                looks so happy and so adorable!
-                <span class="fw-bold">#happy #dogs #cuteness #corgi</span>
-              </p>
-              <p class="card-text">
-                <small class="text-muted">1 hour ago</small>
-              </p>
-            </div>
-          </li>
-
-          <li class="card py-2 my-3">
-            <div class="align-items-center mb-3 mx-2">
-              <div class="row align-items-center">
-                <div class="col-3 col-md-2">
-                  <img
-                    src="/src/assets/profile/woman-drawing-profile.jpg"
-                    alt="Profile photo for girlwithapencil. A drawing of a blonde woman with eyes closed."
-                    class="rounded-circle w-100"
-                  />
-                </div>
-                <p class="card-title col-5 fs-5">girlwithapencil</p>
-              </div>
-            </div>
-            <img
-              src="/src/assets/posts/flower-drawing.jpg"
-              alt="Drawing of flowers in soft pastel colours and a white background."
-              class="img-fluid"
-            />
-            <div class="card-body">
-              <div class="d-flex align-items-center mb-2">
-                <i class="bi bi-heart fs-4 me-2"></i>
-                <i class="bi bi-chat-right fs-4 ms-2"></i>
-              </div>
-              <p class="card-text">
-                Just some nighttime doodles.. Summers over and I can't wait for
-                spring to arrive again. What du you think?
-                <span class="fw-bold"
-                  >#art #pastels #drawing #inspiration #flowers #spring</span
-                >
-              </p>
-              <p class="card-text">
-                <small class="text-muted">2 days ago</small>
-              </p>
-            </div>
-          </li>
-          <li class="card py-2 my-3">
-            <div class="align-items-center mb-3 mx-2">
-              <div class="row align-items-center">
-                <div class="col-3 col-md-2">
-                  <img
-                    src="/src/assets/profile/cute-dog.jpg"
-                    alt="Profile photo for cutedogs. A picture of a golden retriever sitting down and smiling to the camera."
-                    class="rounded-circle w-100"
-                  />
-                </div>
-                <p class="card-title col-5 fs-5">cutedogs</p>
-              </div>
-            </div>
-            <img
-              src="/src/assets/posts/puppy.jpg"
-              alt="Close up of a puppy lying down looking up with huge brown eyes."
-              class="img-fluid"
-            />
-            <div class="card-body">
-              <div class="d-flex align-items-center mb-2">
-                <i class="bi bi-heart fs-4 me-2"></i>
-                <i class="bi bi-chat-right fs-4 ms-2"></i>
-              </div>
-              <p class="card-text">
-                How can I resist this cuteness overload? The rain was pouring
-                down today, but with those big brown eyes looking at me I was
-                easily pursuaded to go for a walk.
-                <span class="fw-bold"
-                  >#happy #dogs #cuteness #cockerspaniel</span
-                >
-              </p>
-              <p class="card-text">
-                <small class="text-muted"> 6 days ago</small>
-              </p>
-            </div>
-          </li>
-
-          <li class="card py-2 my-3">
-            <div class="align-items-center mb-3 mx-2">
-              <div class="row align-items-center">
-                <div class="col-3 col-md-2">
-                  <img
-                    src="/src/assets/profile/yoga-profile.jpg"
-                    alt="Profile photo for yogaemilia. A woman sitting down and meditating facing a lake."
-                    class="rounded-circle w-100"
-                  />
-                </div>
-                <p class="card-title col-5 fs-5">yogaemeilia</p>
-              </div>
-            </div>
-            <img
-              src="/src/assets/posts/woman.jpg"
-              alt="A woman standing in the sunset by the ocean reaching her hands out to both sides."
-              class="img-fluid"
-            />
-            <div class="card-body">
-              <div class="d-flex align-items-center mb-2">
-                <i class="bi bi-heart fs-4 me-2"></i>
-                <i class="bi bi-chat-right fs-4 ms-2"></i>
-              </div>
-              <p class="card-text">
-                Just came back from a wonderful place. I have shot a 10 days
-                series with videos for you that will be released in a month. So
-                excited to share this experience with you guys!
-                <span class="fw-bold"
-                  >#healthy #freedom #spirit #mindfullness</span
-                >
-              </p>
-              <p class="card-text">
-                <small class="text-muted"> 3 weeks ago</small>
-              </p>
-            </div>
-          </li>
-
-          <li class="card py-2 my-3">
-            <div class="align-items-center mb-3 mx-2">
-              <div class="row align-items-center">
-                <div class="col-3 col-md-2">
-                  <img
-                    src="/src/assets/profile/yoga-profile.jpg"
-                    alt="Profile photo for yogaemilia. A woman sitting down and meditating facing a lake."
-                    class="rounded-circle w-100"
-                  />
-                </div>
-                <p class="card-title col-5 fs-5">yogaemeilia</p>
-              </div>
-            </div>
-            <img
-              src="/src/assets/posts/woman-yoga.jpg"
-              alt="A woman doing yoga on a mountain next to the ocean. She is standing on the hands."
-              class="img-fluid"
-            />
-            <div class="card-body">
-              <div class="d-flex align-items-center mb-2">
-                <i class="bi bi-heart fs-4 me-2"></i>
-                <i class="bi bi-chat-right fs-4 ms-2"></i>
-              </div>
-              <p class="card-text">
-                I'm working on something... Will share more about this soon.
-                <span class="fw-bold"
-                  >#healthy #yoga #spirit #mindfullness</span
-                >
-              </p>
-              <p class="card-text">
-                <small class="text-muted"> 1 month ago</small>
-              </p>
-            </div>
-          </li>
-        </ul>
+        <ul class="ps-0 list-unstyled col-md-8 mt-3" id="postFeed"></ul>
       </div>
     </section>
 
@@ -351,51 +165,5 @@ <h2 class="text-primary mt-3">Trending tags</h2>
         </ul>
       </div>
     </section>
-
-    <div
-      class="modal fade"
-      id="create-post"
-      tabindex="-1"
-      aria-labelledby="modal-title"
-      aria-hidden="true"
-    >
-      <div class="modal-dialog">
-        <div class="modal-content p-3">
-          <div class="modal-header">
-            <h2 class="modal-title">New post</h2>
-            <button
-              type="button"
-              class="btn-close"
-              data-bs-dismiss="modal"
-              aria-label="Close"
-            ></button>
-          </div>
-          <div class="modal-body">
-            <form action="/feed/index.html" class="needs-validation">
-              <div class="mb-4">
-                <label for="formFile" class="form-label">Image:</label>
-                <input class="form-control" type="file" id="formFile" />
-              </div>
-              <div class="mb-4">
-                <label for="text-content" class="form-label"> Text:</label>
-                <textarea
-                  type="text"
-                  class="form-control"
-                  name="text-content"
-                  id="text-content"
-                >
-                </textarea>
-              </div>
-
-              <div class="mb-4">
-                <button type="submit" class="btn btn-secondary">
-                  Add post
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
   </body>
 </html>