From 8ab9849188517cc7984f8f30d77d1af90df733aa Mon Sep 17 00:00:00 2001 From: martinsalinas0 Date: Tue, 11 Feb 2025 20:53:19 -0600 Subject: [PATCH 1/3] initial commit --- index.html | 0 main.js | 0 style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b diff --git a/main.js b/main.js new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b From d5f56cb964fca5f02d7cee79ddee842064365510 Mon Sep 17 00:00:00 2001 From: martinsalinas0 Date: Tue, 11 Feb 2025 21:37:41 -0600 Subject: [PATCH 2/3] added html in index.html --- index.html | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/index.html b/index.html index e69de29b..eeafd7b4 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + ReReddit + + + + + + + + +
+
+

ReReddit

+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+ +
+
+
+ + + + + + From 710da9d7b23d3a6f4fbd8051df5c591d70854258 Mon Sep 17 00:00:00 2001 From: martinsalinas0 Date: Thu, 13 Feb 2025 00:21:12 -0600 Subject: [PATCH 3/3] added button on html and code for main.js --- index.html | 2 +- main.js | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 111 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index eeafd7b4..dab41a2c 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@

ReReddit

placeholder="Your Name" /> - diff --git a/main.js b/main.js index e69de29b..a8d26975 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,110 @@ +let posts = []; + +const renderPosts = () => { + const allPosts = document.getElementById("all-posts"); + allPosts.innerHTML = ""; + + posts.forEach((post, index) => { + let postDiv = document.createElement("div"); + postDiv.classList.add("list-group-item", "post-in-list"); + + let postTextSpan = document.createElement("span"); + postTextSpan.innerHTML = `${post.postText} - Posted By: ${post.userName}`; + + let removeEntirePostBtn = document.createElement("button"); + removeEntirePostBtn.classList.add( + "btn", + "btn-link", + "remove-post-btn", + "btn-xs" + ); + removeEntirePostBtn.innerHTML = ``; + + removeEntirePostBtn.addEventListener("click", () => { + posts.splice(index, 1); + renderPosts(); + }); + + let commentSectionContainer = document.createElement("div"); + commentSectionContainer.classList.add("cmnt-container"); + + let commentSectionDiv = document.createElement("div"); + commentSectionDiv.classList.add("cmnt-section"); + commentSectionDiv.style.display = "none"; + + let commentTextInput = document.createElement("input"); + commentTextInput.type = "text"; + commentTextInput.classList.add("form-control"); + commentTextInput.placeholder = "Comment Text"; + + let commentUserInput = document.createElement("input"); + commentUserInput.type = "text"; + commentUserInput.classList.add("form-control"); + commentUserInput.placeholder = "Your Name"; + + let submitCmntBtn = document.createElement("button"); + submitCmntBtn.classList.add("btn", "btn-primary", "submit-cmt-btn"); + submitCmntBtn.innerText = "Submit Comment"; + + const addComment = () => { + let commentUserName = commentUserInput.value; + let commentText = commentTextInput.value; + let commentDiv = document.createElement("div"); + commentDiv.classList.add("comment-on-post"); + + let removeCmntBtn = document.createElement("button"); + removeCmntBtn.classList.add( + "btn", + "btn-link", + "remove-cmnt-btn", + "btn-xs" + ); + removeCmntBtn.innerHTML = ``; + let commentSpan = document.createElement("span"); + commentSpan.innerText = `${commentText} - Commented by: ${commentUserName}`; + removeCmntBtn.addEventListener("click", () => { + commentSectionContainer.removeChild(commentDiv); + }); + + commentDiv.appendChild(commentSpan); + commentDiv.appendChild(removeCmntBtn); + commentSectionContainer.appendChild(commentDiv); + commentTextInput.value = ""; + commentUserInput.value = ""; + }; + + submitCmntBtn.addEventListener("click", addComment); + postDiv.addEventListener("click", (e) => { + if ( + e.target !== commentTextInput && + e.target !== commentUserInput && + e.target !== submitCmntBtn + ) { + if (commentSectionDiv.style.display === "none") { + commentSectionDiv.style.display = "block"; + } else { + commentSectionDiv.style.display = "none"; + } + } + }); + + commentSectionDiv.appendChild(commentTextInput); + commentSectionDiv.appendChild(commentUserInput); + commentSectionDiv.appendChild(submitCmntBtn); + commentSectionDiv.appendChild(commentSectionContainer); + postDiv.appendChild(removeEntirePostBtn); + postDiv.appendChild(postTextSpan); + postDiv.appendChild(commentSectionDiv); + allPosts.appendChild(postDiv); + }); +}; + +document.getElementById("submit-btn").addEventListener("click", () => { + let postText = document.getElementById("post-text-input").value; + let userName = document.getElementById("user-name-input").value; + posts.push({ postText: postText, userName: userName }); + document.getElementById("post-text-input").value = ""; + document.getElementById("user-name-input").value = ""; + + renderPosts(); +});