Module 2 Eval: ReReddit #224
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| # ReReddit Eval | ||
|
|
||
| ## Cohort 14 | ||
|
|
||
| ### Part Time |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <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="style.css" /> | ||
| <title>Forum</title> | ||
| </head> | ||
| <body> | ||
| <div class="container-fluid"> | ||
| <h1>Forum</h1> | ||
| </div> | ||
| <section class="container-fluid post-form"> | ||
| <h2>Make a post</h2> | ||
| <div class="mb-3"> | ||
| <label for="exampleFormControlInput1" class="form-label">Name</label> | ||
| <input type="user" class="form-control" id="user" placeholder="Name" /> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label for="post" class="form-label">Post</label> | ||
| <textarea | ||
| class="form-control" | ||
| id="post" | ||
| rows="3" | ||
| placeholder="Today I learned..." | ||
| ></textarea> | ||
| </div> | ||
| <button type="button" class="btn btn-primary" id="post-btn">Post</button> | ||
| </section> | ||
| <hr class="headerBreak" /> | ||
| <section class="container-fluid posts-container"> | ||
| <div id="posts-feed" class="container-fluid"></div> | ||
| </section> | ||
| <script src="main.js"></script> | ||
| <script | ||
| src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" | ||
| integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" | ||
| crossorigin="anonymous" | ||
| ></script> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,224 @@ | ||
| const postsFeed = document.getElementById("posts-feed"); | ||
| const user = document.getElementById("user"); | ||
| const post = document.getElementById("post"); | ||
| const submitBtn = document.getElementById("post-btn"); | ||
| const username = document.getElementById("username"); | ||
| const postText = document.getElementById("postText"); | ||
| const removeBtn = document.getElementsByClassName("removePost"); | ||
| const singlePost = document.getElementsByClassName("posts"); | ||
| const addComment = document.getElementsByClassName("addComment"); | ||
|
|
||
| const postStr = `<div class="conatiner-fluid postUtilities"> | ||
| <span class="removePost">delete</span> | ||
| <span class="addComment">comment</span> | ||
| <div class="conatiner-fluid commentForm"> | ||
| <div class="mb-3"> | ||
| <label for="exampleFormControlInput1" class="form-label">Name</label> | ||
| <input type="user" class="form-control commentName" placeholder="@username"/> | ||
| </div> | ||
| <div class="mb-3"> | ||
| <label for="post" class="form-label">Post</label> | ||
| <textarea class="form-control commentText" rows="3" placeholder="This post is cool because..."></textarea> | ||
| </div> | ||
| <button type="button" class="btn btn-primary" id="post-btn">Add Comment</button> | ||
| </div> | ||
| </div>`; | ||
|
|
||
| let posts = [ | ||
|
There was a problem hiding this comment. great, good practice to decouple logic |
||
| { | ||
| id: 1, | ||
| user: "My name", | ||
| post: "This is a post", | ||
| comments: [ | ||
| { | ||
| id: 1, | ||
| comment: "This is a comment", | ||
| user: "User", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 2, | ||
| user: "User 2", | ||
| post: "Post 2", | ||
| comments: [ | ||
| { | ||
| id: 1, | ||
| comment: "This is a comment 2", | ||
| user: "Name", | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| const stringToHTML = function (str) { | ||
| let div = document.createElement("div"); | ||
| div.innerHTML = str; | ||
| div.className = "conatiner-fluid posts"; | ||
| return div; | ||
| }; | ||
|
|
||
| const uniqueID = function () { | ||
| const timestamp = Date.now(); | ||
| const random = Math.floor(Math.random() * 10000); | ||
| const newId = `${timestamp}-${random}`; | ||
|
|
||
| const existingIds = []; | ||
| posts.forEach((post) => { | ||
| existingIds.push(post.id); | ||
| if (post.comments) { | ||
| post.comments.forEach((comment) => existingIds.push(comment.id)); | ||
| } | ||
| }); | ||
|
|
||
| if (existingIds.includes(newId)) { | ||
| return uniqueID(); | ||
| } | ||
|
|
||
| return newId; | ||
| }; | ||
|
|
||
| const preloadPosts = function () { | ||
| for (let i = 0; i < posts.length; i++) { | ||
| let commentsHTML = ""; | ||
| if (posts[i].comments && posts[i].comments.length > 0) { | ||
| commentsHTML = ` | ||
| <div class="comments-section" style="display: none;"> | ||
| ${posts[i].comments | ||
| .map( | ||
| (comment) => ` | ||
| <div class="comment" data-comment-id="${comment.id}"> | ||
| <strong>${comment.user || "Anonymous"}:</strong> | ||
| <p>${comment.comment}</p> | ||
| <span class="deleteComment">delete</span> | ||
| </div> | ||
| ` | ||
| ) | ||
| .join("")} | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| let postString = ` | ||
| <h3>Posted by: ${posts[i].user}</h3> | ||
| <p>${posts[i].post}</p> | ||
| ${postStr} | ||
| ${commentsHTML} | ||
| `; | ||
| let postHTML = stringToHTML(postString); | ||
| postsFeed.prepend(postHTML); | ||
| } | ||
| }; | ||
|
|
||
| const getPostInputs = function () { | ||
| submitBtn.addEventListener("click", function () { | ||
| posts.push({ id: uniqueID(), user: user.value, post: post.value }); | ||
| let latestPost = posts.length - 1; | ||
| let postString = ` | ||
| <h3>Posted by: ${posts[latestPost].user}</h3> | ||
| <p>${posts[latestPost].post}</p> | ||
| ${postStr}`; | ||
| let postHTML = stringToHTML(postString); | ||
| postsFeed.prepend(postHTML); | ||
| }); | ||
| }; | ||
|
|
||
| const handleComments = function () { | ||
|
There was a problem hiding this comment. this function is too big and its handling too much, you can extract some responsibilities to other functions like toggling visibility, adding comments, deleting comments. This will be very hard to debug or maintain and scale. Whenever you see such a big function in your code, that should turn a red or yellow flag. |
||
| postsFeed.addEventListener("click", function (event) { | ||
| if (event.target.classList.contains("addComment")) { | ||
| const post = event.target.closest(".posts"); | ||
| const commentForm = event.target.nextElementSibling; | ||
| const commentsSection = post.querySelector(".comments-section"); | ||
|
|
||
| if (commentForm.style.display === "block") { | ||
| commentForm.style.display = "none"; | ||
| if (commentsSection) { | ||
| commentsSection.style.display = "none"; | ||
| } | ||
| } else { | ||
| commentForm.style.display = "block"; | ||
| if (commentsSection) { | ||
| commentsSection.style.display = "block"; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if ( | ||
| event.target.id === "post-btn" && | ||
| event.target.closest(".commentForm") | ||
| ) { | ||
| const post = event.target.closest(".posts"); | ||
| const commentName = post.querySelector(".commentName").value; | ||
| const commentText = post.querySelector(".commentText").value; | ||
|
|
||
| const postIndex = Array.from(postsFeed.children).indexOf(post); | ||
| const currentPost = posts[posts.length - 1 - postIndex]; | ||
|
|
||
| if (!currentPost.comments) { | ||
| currentPost.comments = []; | ||
| } | ||
|
|
||
| currentPost.comments.push({ | ||
| id: uniqueID(), | ||
| user: commentName, | ||
| comment: commentText, | ||
| }); | ||
|
|
||
| let commentsSection = post.querySelector(".comments-section"); | ||
| if (!commentsSection) { | ||
| commentsSection = document.createElement("div"); | ||
| commentsSection.className = "comments-section"; | ||
| post.appendChild(commentsSection); | ||
| } | ||
|
|
||
| const commentHTML = ` | ||
| <div class="comment" data-comment-id="${ | ||
| currentPost.comments[currentPost.comments.length - 1].id | ||
| }"> | ||
| <strong>${commentName || "Anonymous"}:</strong> | ||
| <p>${commentText}</p> | ||
| <span class="deleteComment">delete</span> | ||
| </div> | ||
| `; | ||
|
|
||
| commentsSection.insertAdjacentHTML("afterbegin", commentHTML); | ||
|
|
||
| post.querySelector(".commentName").value = ""; | ||
| post.querySelector(".commentText").value = ""; | ||
| } | ||
|
|
||
| if (event.target.classList.contains("deleteComment")) { | ||
| const commentElement = event.target.closest(".comment"); | ||
| const post = event.target.closest(".posts"); | ||
| const commentId = commentElement.dataset.commentId; | ||
|
|
||
| const postIndex = Array.from(postsFeed.children).indexOf(post); | ||
| const currentPost = posts[posts.length - 1 - postIndex]; | ||
|
|
||
| currentPost.comments = currentPost.comments.filter( | ||
| (comment) => comment.id !== commentId | ||
| ); | ||
|
|
||
| commentElement.remove(); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const deletePost = function () { | ||
| postsFeed.addEventListener("click", function (event) { | ||
| if (event.target.classList.contains("removePost")) { | ||
| const postToDelete = event.target.closest(".posts"); | ||
| if (postToDelete) { | ||
| postToDelete.remove(); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| preloadPosts(); | ||
|
|
||
| getPostInputs(); | ||
|
|
||
| deletePost(); | ||
|
|
||
| handleComments(); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| body { | ||
| background-color: #000; | ||
| color: #fff; | ||
| } | ||
|
|
||
| h1 { | ||
| text-align: center; | ||
| margin-top: 30px; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| p { | ||
| font-size: 17px; | ||
| } | ||
|
|
||
| .post-form { | ||
| width: 80%; | ||
| } | ||
|
|
||
| .posts-feed { | ||
| width: 80%; | ||
| } | ||
|
|
||
| .posts-container { | ||
| width: 80%; | ||
| } | ||
|
|
||
| .removePost { | ||
| color: red; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .removePost:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .addComment { | ||
| cursor: pointer; | ||
| color: yellow; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .addComment:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
||
| .commentForm { | ||
| display: none; | ||
| margin-top: 15px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .postUtilities { | ||
| margin-bottom: 50px; | ||
| } | ||
|
|
||
| .headerBreak { | ||
| border-top: 3px solid white; | ||
| margin-top: 30px; | ||
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| .posts { | ||
| padding: 12px; | ||
| margin-bottom: 30px; | ||
| border-left: 3px solid white; | ||
| } | ||
|
|
||
| .comment { | ||
| border-left: 2px solid white; | ||
| padding-left: 10px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .deleteComment { | ||
| cursor: pointer; | ||
| color: red; | ||
| } | ||
|
|
||
| .deleteComment:hover { | ||
| text-decoration: underline; | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
instead of h1 and h2, you can use display-1, display-2 from bootstrap.