From f7c461cfb81c77d6296f7ebae932f3d7dc2d67a7 Mon Sep 17 00:00:00 2001 From: Emily Lam Date: Mon, 19 May 2025 13:53:51 -0700 Subject: [PATCH 1/6] Create app3.js --- app3.js | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 app3.js diff --git a/app3.js b/app3.js new file mode 100644 index 00000000..b89f586e --- /dev/null +++ b/app3.js @@ -0,0 +1,168 @@ +// Get references to DOM elements +const postForm = document.getElementById('postForm'); +const postTitleInput = document.getElementById('postTitle'); +const postAuthorInput = document.getElementById('postAuthor'); +const postsList = document.getElementById('postsList'); + +// Load posts from localStorage on page load +window.addEventListener('DOMContentLoaded', () => { + const posts = JSON.parse(localStorage.getItem('posts')) || []; + posts.forEach(post => addPostToDOM(post)); +}); + +// Handle form submission +postForm.addEventListener('submit', function (e) { + e.preventDefault(); + + const title = postTitleInput.value.trim(); + const author = postAuthorInput.value.trim(); + + if (!title || !author) return; + + const post = { + title, + author, + timestamp: new Date().toISOString(), + comments: [] // Add a comments array to store comments for this post + }; + + addPostToDOM(post); + savePost(post); + + postForm.reset(); +}); + +// Add a post to the DOM +function addPostToDOM(post) { + const postCard = document.createElement('div'); + postCard.className = 'card mb-3'; + + const postTime = new Date(post.timestamp).toLocaleString(); + + postCard.innerHTML = ` +
+
${escapeHTML(post.title)}
+
Posted by ${escapeHTML(post.author)} on ${postTime}
+ + + + + + + + + +
+ `; + + // Toggle comments visibility + postCard.querySelector('.toggle-comments-btn').addEventListener('click', () => { + const commentsSection = postCard.querySelector('.comments-section'); + commentsSection.style.display = commentsSection.style.display === 'none' ? 'block' : 'none'; + }); + + // Remove Post button functionality + postCard.querySelector('.remove-post-btn').addEventListener('click', () => { + postCard.remove(); + removePost(post.timestamp); + }); + + // Post comment functionality + postCard.querySelector('.post-comment-btn').addEventListener('click', () => { + const commentAuthor = postCard.querySelector('.comment-author').value.trim(); + const commentText = postCard.querySelector('.comment-text').value.trim(); + + if (!commentAuthor || !commentText) return; + + const comment = { + author: commentAuthor, + text: commentText, + timestamp: new Date().toISOString() + }; + + addCommentToDOM(post, comment); + saveComment(post, comment); + + // Clear input fields + postCard.querySelector('.comment-author').value = ''; + postCard.querySelector('.comment-text').value = ''; + }); + + postsList.prepend(postCard); +} + +// Add a comment to the DOM +function addCommentToDOM(post, comment) { + const postCard = [...postsList.children].find(card => { + const postTitle = card.querySelector('.card-title').textContent; + return postTitle === post.title; + }); + + const commentsList = postCard.querySelector('.comments-list'); + + const commentDiv = document.createElement('div'); + commentDiv.className = 'comment mb-2'; + commentDiv.innerHTML = ` +

${escapeHTML(comment.author)}: ${escapeHTML(comment.text)}

+ + `; + + // Delete comment functionality + commentDiv.querySelector('.delete-comment-btn').addEventListener('click', () => { + commentDiv.remove(); + deleteComment(post, comment.timestamp); + }); + + commentsList.appendChild(commentDiv); +} + +// Save a post to localStorage +function savePost(post) { + const posts = JSON.parse(localStorage.getItem('posts')) || []; + posts.push(post); + localStorage.setItem('posts', JSON.stringify(posts)); +} + +// Save a comment to localStorage +function saveComment(post, comment) { + const posts = JSON.parse(localStorage.getItem('posts')) || []; + const postIndex = posts.findIndex(p => p.timestamp === post.timestamp); + if (postIndex !== -1) { + posts[postIndex].comments.push(comment); + localStorage.setItem('posts', JSON.stringify(posts)); + } +} + +// Delete a comment from localStorage +function deleteComment(post, commentTimestamp) { + const posts = JSON.parse(localStorage.getItem('posts')) || []; + const postIndex = posts.findIndex(p => p.timestamp === post.timestamp); + if (postIndex !== -1) { + posts[postIndex].comments = posts[postIndex].comments.filter(c => c.timestamp !== commentTimestamp); + localStorage.setItem('posts', JSON.stringify(posts)); + } +} + +// Remove a post from localStorage +function removePost(timestamp) { + const posts = JSON.parse(localStorage.getItem('posts')) || []; + const updatedPosts = posts.filter(post => post.timestamp !== timestamp); + localStorage.setItem('posts', JSON.stringify(updatedPosts)); +} + +// Simple HTML escaping to prevent XSS +function escapeHTML(str) { + const div = document.createElement('div'); + div.textContent = str; + return div.innerHTML; +} From c5c4efe11f49e64345a3b5972490b7d14f346173 Mon Sep 17 00:00:00 2001 From: littlepuppi Date: Mon, 19 May 2025 15:38:44 -0700 Subject: [PATCH 2/6] Create index.html --- index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b From 8460a1c570f5ff68123b5c7465cc18613fe380a6 Mon Sep 17 00:00:00 2001 From: littlepuppi Date: Wed, 21 May 2025 14:49:49 -0700 Subject: [PATCH 3/6] Add index.html file --- css/style.css | 0 js/app.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 css/style.css create mode 100644 js/app.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..e69de29b diff --git a/js/app.js b/js/app.js new file mode 100644 index 00000000..e69de29b From da9f5641d6db78c457d174632870caabd8641331 Mon Sep 17 00:00:00 2001 From: Emily Lam Date: Wed, 21 May 2025 14:52:01 -0700 Subject: [PATCH 4/6] Delete js/app.js --- js/app.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 js/app.js diff --git a/js/app.js b/js/app.js deleted file mode 100644 index e69de29b..00000000 From 6c304f9e9e6f5e144f9296a2faf3e1cb6db5cf5e Mon Sep 17 00:00:00 2001 From: Emily Lam Date: Wed, 21 May 2025 14:52:21 -0700 Subject: [PATCH 5/6] Delete css directory --- css/style.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 css/style.css diff --git a/css/style.css b/css/style.css deleted file mode 100644 index e69de29b..00000000 From 7bce3d546bfd234912eb6cf3b2ef32dc6c44bafa Mon Sep 17 00:00:00 2001 From: littlepuppi Date: Wed, 21 May 2025 15:02:47 -0700 Subject: [PATCH 6/6] Add index.html --- index.html | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/index.html b/index.html index e69de29b..a2ebd20b 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,33 @@ + + + + ReReddit + + + + + + +
+

ReReddit

+
+ +
+
+
+ + +
+
+ + +
+ +
+ + +
+ + + +