From a89195fff99acf057c596220635157de3730c6da Mon Sep 17 00:00:00 2001 From: EugenFM Date: Mon, 2 Mar 2026 17:46:29 -0600 Subject: [PATCH] Finish ReReddit: posts, remove, comments toggle + submit --- .vscode/settings.json | 3 ++ index.html | 48 ++++++++++++++++++++++ main.js | 96 +++++++++++++++++++++++++++++++++++++++++++ style.css | 20 +++++++++ 4 files changed, 167 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..aef84430 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..1acce3a9 --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + + + ReReddit + + +
+
+
+

ReReddit

+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..3e66de39 --- /dev/null +++ b/main.js @@ -0,0 +1,96 @@ +document.querySelector("form").addEventListener("submit", function (e) { + e.preventDefault(); +}); + +//Event Listener on the Submit button +document.querySelector("#submit").addEventListener("click", function () { + var inputText = document.querySelector("#post-text").value; + var inputName = document.querySelector("#name").value; + var postsDiv = document.querySelector(".posts"); + + // Create div for posts + var div = document.createElement("div"); + div.style.backgroundColor = "lightblue"; + div.style.marginBottom = "10px"; + div.style.padding = "10px"; + + // Create header wrapper + var headerDiv = document.createElement("div"); + headerDiv.classList.add("post-header"); + + // Create button to remove posts + var removeButton = document.createElement("button"); + removeButton.innerHTML = "remove"; + removeButton.type = "button"; + removeButton.className = "btn btn-primary"; + removeButton.addEventListener("click", function () { + div.remove(); + }); + + // Create button to add comments + var addComments = document.createElement("button"); + addComments.innerText = "comments"; + addComments.type = "button"; + addComments.className = "btn btn-primary"; + + // Comments Section + var commentsSection = document.createElement("div"); + commentsSection.classList.add("hidden"); + + var commentsTextInput = document.createElement("input"); + commentsTextInput.type = "text"; + commentsTextInput.style.margin = "10px"; + commentsTextInput.placeholder = "Comment Text"; + commentsTextInput.className = "form-control"; + + var commentsNameInput = document.createElement("input"); + commentsNameInput.type = "text"; + commentsNameInput.style.margin = "10px"; + commentsNameInput.placeholder = "Your Name"; + commentsNameInput.className = "form-control"; + + var submitCommentButton = document.createElement("button"); + submitCommentButton.type = "button"; + submitCommentButton.style.margin = "10px"; + submitCommentButton.className = "btn btn-primary"; + submitCommentButton.innerHTML = "Submit Comment"; + + commentsSection.append(commentsTextInput); + commentsSection.append(commentsNameInput); + commentsSection.append(submitCommentButton); + + addComments.addEventListener("click", function () { + commentsSection.classList.toggle("hidden"); + }); + + // Event listener on the submit comments button + submitCommentButton.addEventListener("click", function () { + var commentTextValue = commentsTextInput.value; + var commentNameValue = commentsNameInput.value; + + var commentText = document.createElement("p"); + commentText.innerText = `${commentTextValue} - Posted By: ${commentNameValue}`; + + commentsSection.append(commentText); + + commentsTextInput.value = ""; + commentsNameInput.value = ""; + }); + + var text = document.createElement("p"); + text.innerText = `${inputText} - Posted By: ${inputName}`; + + // Append comments and button to the header div + headerDiv.append(removeButton); + headerDiv.append(addComments); + headerDiv.append(text); + + // Append the header div + the comments section plus the posts + div.append(headerDiv); + div.append(commentsSection); + postsDiv.append(div); + + // Clear the input placeholders + document.querySelector("#name").value = ""; + document.querySelector("#post-text").value = ""; +}); diff --git a/style.css b/style.css new file mode 100644 index 00000000..2c4cd668 --- /dev/null +++ b/style.css @@ -0,0 +1,20 @@ +.form-group { + padding-bottom: 0; +} +.hidden { + display: none; +} + +.post-header { + display: flex; + align-items: center; + gap: 15px; +} + +.posts button { + background: none; + border: none; + color: blue; + cursor: pointer; + padding: 0; +}