Project submission for post and comments

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "cSpell.words": ["Btns", "postid", "uniqueid", "uuidv"],
+  "liveServer.settings.port": 5501
+}

LICENSE

@@ -0,0 +1,21 @@
+Copyright (c) 2008-2019 Pivotal Labs
+Copyright (c) 2008-2023 The Jasmine developers
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

MyClasses.js

@@ -0,0 +1,143 @@
+
+export class SocialMedia {
+  #posts;
+  constructor() {
+    this.#posts = [];
+  }
+
+  setPost(postArray) {
+    this.#posts = postArray;
+  }
+
+  createPost(author, text) { return new Post(author, text) };
+
+  addPost(author, text){
+    const newPost = this.createPost(author, text);
+    this.#posts.push(newPost)
+    return newPost;
+  };
+
+  getPosts(){ return this.#posts };
+
+  getPost(id){
+    const post = this.#posts.find((post) => {
+      return post.getId() === id; 
+    }) 
+    return post;
+  };
+
+  deletePost(id) {
+    const postToDelete = this.getPost(id);
+    const newPostArray = [];
+    this.#posts.forEach((post) => {
+      if (post !== postToDelete ) return newPostArray.push(post);
+    });
+    this.setPost(newPostArray);
+  };
+
+}
+
+export class Post {
+  #author;
+  #text;
+  #comments;
+  #id;
+  #likes;
+  constructor(author, text) {
+    this.#author = author;
+    this.#text = text;
+    this.#comments = [];
+    this.#likes = 0;
+    this.#id = new Date().getTime() + Math.random();
+  }
+
+  getId() {return this.#id};
+
+  getPost() {return `${this.#author}\n${this.#text}`};
+
+  getText() {return this.#text};
+
+  getAuthor() {return this.#author};
+
+  getComments() {return this.#comments};
+
+  getComment(id){
+    const comment = this.#comments.find((comment) => {
+      return comment.getId() === id; 
+    }) 
+    return comment;
+  };
+
+  setComments(commentsArray) {
+    this.#comments = commentsArray;
+  }
+
+  getLikeCt() {return this.#likes};
+
+  deleteComment(id) {
+    const commentToDelete = this.getComment(id);
+    const newCommentArray = [];
+    this.#comments.forEach((comment) => {
+      if (comment !== commentToDelete ) return newCommentArray.push(comment);
+    });
+    this.setComments(newCommentArray);
+  }
+
+  likePost(type) {
+    let success = false;
+    switch (type) {
+      case "like":
+        this.#likes += 1;
+        success = true;
+        break;
+      case "dislike": 
+        this.#likes -= 1;
+        success = true;
+        break;
+    }
+    if (success)console.log("Successfully liked comment");
+    return this;
+  };
+
+  createComment(author, text) {
+    return new Comment(author, text, this);
+  };
+
+  addComment(author, text){
+    const comment = this.createComment(author, text);
+    this.#comments.push(comment);
+    return comment; 
+  };
+
+};
+
+export class Comment extends Post {
+  #author;
+  #text;
+  #parentPost;
+  #likes;
+  constructor(author, text, parentPost) {
+    super(author, text);
+    this.#author = author;
+    this.#text = text;
+    this.#likes = 0;
+    this.#parentPost = parentPost;
+  }
+
+  getParent() {return this.#parentPost};
+
+  createCommentReply(otherCommentAuthor, reply) {
+    const replyPrefix = `<strong>@${this.#author}</strong> `;
+
+    const replyText = replyPrefix + reply;
+    const newComment = this.#parentPost.addComment(otherCommentAuthor, replyText);
+
+    return newComment;
+  };
+}
+
+
+
+
+
+

README.md

@@ -3,3 +3,55 @@
 This project has been created by a student at Parsity, an online software engineering course. The work in this repository is wholly of the student based on a sample starter project that can be accessed by looking at the repository that this project forks.
 
 If you have any questions about this project or the program in general, visit [parsity.io](https://parsity.io/) or email hello@parsity.io.
+
+## How to run
+
+To run this project please use a web server to run this.
+
+1. Download the Live Server Extension from VSCode
+![LiveServer](./static/Live%20server.png)
+2. Open index.html
+3. At the bottom of your page on the right, click the "Go live" button. Alternatively you can also right click and select "start live server" as well
+![StartLiveServer](./static/goliveBtn.png)
+![StartLiveServerAlt](./static/startLiveServer.png)
+4. The app should open up in your most recent browser
+
+## What is it?
+
+A rendition of the popular social media website "reddit".
+
+### features include
+
+- View posts and comments
+  ![appview](./static/ReReddit-app-view.png)
+- Comment on a posts
+  ![comment form](./static/ReReddit-comment-form.png)
+- Reply to a comment (will append the '@[commentAuthor]' to the message)
+  ![comment reply form](./static/ReReddit-comment-reply-form.png)
+  ![appview](./static/ReReddit-comment-reply-ex.png)
+- Like/dislike Post (Like count will update on click)
+- Delete post (with confirmation page on click of delete button)
+- Delete comment (with confirmation page on click of delete button)
+
+### files overview
+
+- **index.html**: the main html page. The entrypoint of app.
+- **main.js**: houses the html manipulating logic.
+- **MyClasses.js**: houses the classes used for the app (SocialMedia, Post, Comment).
+- **style.css**: custom styles used for the app.
+- **SpecRunner.html**: entrypoint for testing suite (jasmine.js).
+- **spec/ReRedditSpec.js**: houses the tests for app.
+
+### technology used
+
+- plain old JS
+- Bootstrap v5
+- Jquery
+- uuidv4
+- Jasmine
+
+### how to run
+
+- run the "index.html"
+
+_A parsity project by Thanh_

SpecRunner.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Jasmine Spec Runner v5.1.2</title>
+
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="lib/jasmine-5.1.2/jasmine_favicon.png"
+    />
+    <link rel="stylesheet" href="lib/jasmine-5.1.2/jasmine.css" />
+
+    <script src="lib/jasmine-5.1.2/jasmine.js"></script>
+    <script src="lib/jasmine-5.1.2/jasmine-html.js"></script>
+    <script src="lib/jasmine-5.1.2/boot0.js"></script>
+    <!-- optional: include a file here that configures the Jasmine env -->
+    <script src="lib/jasmine-5.1.2/boot1.js"></script>
+
+    <script src="./src/jquery-3.7.1.min.js"></script>
+
+    <!-- include source files here... -->
+    <script type="module" src="main.js"></script>
+
+    <!-- include spec files here... -->
+    <script type="module" src="spec/ReRedditSpec.js"></script>
+  </head>
+
+  <body></body>
+</html>

index.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+    />
+    <script src="./src/jquery-3.7.1.min.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <title>Project Reddit</title>
+  </head>
+  <body>
+    <div class="container" id="content-container">
+      <header>
+        <div class="row text-center mt-3">
+          <h1>ReReddit</h1>
+        </div>
+      </header>
+
+      <article>
+        <h1>Posts</h1>
+        <!-- Post elements section -->
+        <section class="row mb-4 p-4" id="posts">
+          <div class="column" id="posts-inner"></div>
+        </section>
+        <!--Create a new Post form section -->
+        <section class="row" id="post-form">
+          <div class="col-12 post-form-header">
+            <h2>Create a post</h2>
+          </div>
+          <div class="col-12">
+            <form class="form" id="create-post-form">
+              <div class="form-group mb-2">
+                <input
+                  type="text"
+                  class="form-control"
+                  placeholder="Name"
+                  id="post-name-input"
+                />
+              </div>
+              <div class="form-group mb-2">
+                <input
+                  type="text"
+                  class="form-control"
+                  placeholder="Post text"
+                  id="post-text-inpunt"
+                />
+              </div>
+              <button
+                type="submit"
+                id="post-submit"
+                class="btn btn-primary"
+                aria-label="post submit button"
+              >
+                Post
+              </button>
+            </form>
+          </div>
+        </section>
+        <!-- Post delete confirmation modal -->
+        <div
+          class="modal fade"
+          id="confirmationModal"
+          tabindex="-1"
+          role="dialog"
+          aria-labelledby="deleteConfirmation"
+          aria-hidden="true"
+        >
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h2 class="modal-title">Are you sure?</h2>
+              </div>
+              <div class="modal-body"></div>
+              <div class="modal-footer">
+                <button
+                  type="button"
+                  class="btn btn-secondary"
+                  data-bs-dismiss="modal"
+                  id="modal-close"
+                >
+                  Close
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-danger"
+                  id="confirm-delete"
+                >
+                  Yes, delete the sucker!
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+    <script type="module" src="MyClasses.js"></script>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>