diff --git a/index.html b/index.html new file mode 100644 index 00000000..1f7ea04a --- /dev/null +++ b/index.html @@ -0,0 +1,98 @@ + + + + + + + + + + + + ReReddit + + + +
+
+
+
+

ReReddit

+
+ +
+
+
+ + +

+ How do you like ReReddit? + - Posted By: Devin +

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

+ I like cheese... + - Posted By: Devin +

+
+ +
+
+ +
+ + + +
+
+
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..c28a99a2 --- /dev/null +++ b/main.js @@ -0,0 +1,117 @@ +// Post Submission Form // +document.getElementById('submit').addEventListener('click', function () { + var name = document.getElementById('name').value.trim(); + var text = document.getElementById('message').value.trim(); + + if (!name || !text) return; + + var postsDiv = document.querySelector('.posts'); + + var newPostDiv = document.createElement('div'); + newPostDiv.classList.add('post'); + + var postHeader = document.createElement('div'); + postHeader.classList.add('post-header'); + + var removeButton = document.createElement('button'); + removeButton.classList.add('remove-post'); + removeButton.textContent = 'remove'; + + var commentsButton = document.createElement('button'); + commentsButton.classList.add('toggle-comments'); + commentsButton.textContent = 'comments'; + + var newPostP = document.createElement('p'); + newPostP.classList.add('post-text'); + newPostP.innerHTML = `${text} - Posted By: ${name}`; + + postHeader.appendChild(removeButton); + postHeader.appendChild(commentsButton); + postHeader.appendChild(newPostP); + + var commentsSection = document.createElement('div'); + commentsSection.classList.add('comments-section'); + commentsSection.style.display = 'none'; + + var commentsList = document.createElement('div'); + commentsList.classList.add('comments-list'); + + var commentForm = document.createElement('div'); + commentForm.classList.add('comment-form'); + commentForm.innerHTML = ` + + + + `; + + commentsSection.appendChild(commentsList); + commentsSection.appendChild(commentForm); + + newPostDiv.append(postHeader); + newPostDiv.append(commentsSection); + postsDiv.append(newPostDiv); +}); + +// Toggles Comment Section // +document.addEventListener('click', function (event) { + if (event.target.classList.contains('toggle-comments')) { + var post = event.target.closest('.post'); + var commentsSection = post.querySelector('.comments-section'); + commentsSection.style.display = commentsSection.style.display === 'none' ? 'block' : 'none'; + } +}); + +// Comment Submission Form // +document.addEventListener('click', function (event) { + if (event.target.classList.contains('submit-comment')) { + var post = event.target.closest('.post'); + var commentsList = post.querySelector('.comments-list'); + var commentText = post.querySelector('.comment-text').value.trim(); + var commentName = post.querySelector('.comment-name').value.trim(); + + if (!commentText || !commentName) return; + + var newCommentDiv = document.createElement('div'); + newCommentDiv.classList.add('post'); + + var commentHeader = document.createElement('div'); + commentHeader.classList.add('post-header'); + + var deleteButton = document.createElement('button'); + deleteButton.classList.add('delete-comment'); + deleteButton.textContent = 'X'; + + var commentTextP = document.createElement('p'); + commentTextP.classList.add('post-text'); + commentTextP.innerHTML = `${commentText} - Posted By: ${commentName}`; + + commentHeader.appendChild(deleteButton); + commentHeader.appendChild(commentTextP); + + newCommentDiv.append(commentHeader); + commentsList.appendChild(newCommentDiv); + + post.querySelector('.comment-text').value = ''; + post.querySelector('.comment-name').value = ''; + } +}); + +// Comment Deletion // +document.addEventListener('click', function (event) { + if (event.target.classList.contains('delete-comment')) { + event.target.closest('.post').remove(); + } +}); + +// Removes Post // +document.addEventListener('click', function (event) { + if (event.target.classList.contains('remove-post')) { + var post = event.target.closest('.post'); + if (post) { + post.remove(); + } + } +}); + +// Extensions // + diff --git a/style.css b/style.css new file mode 100644 index 00000000..c7b9841e --- /dev/null +++ b/style.css @@ -0,0 +1,144 @@ +.container { + max-width: 1200px; + margin-top: 40px; + text-align: left; +} + +h1 { + font-size: 32px; + font-weight: bold; + margin-bottom: 20px; +} + +.posts .post { + padding: 15px 0; + border-bottom: 1px solid #ddd; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; +} + +.post-header { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 10px; + width: 100%; +} + +.remove-post, +.toggle-comments { + background: none; + border: none; + color: blue; + text-decoration: underline; + cursor: pointer; + font-size: 16px; +} + +.post-text { + flex-grow: 1; + word-break: break-word; + margin: 0; +} + +.post-author { + font-weight: normal; + color: #333; + white-space: nowrap; +} + +.comments-section { + display: none; + margin-top: 5px; + width: 100%; +} + +.comments-list { + padding-left: 20px; + margin-top: 5px; +} + +.comments-list .post { + border-bottom: 1px solid #ddd; + padding: 10px 0; + width: 100%; +} + +.comment-form { + display: flex; + flex-direction: column; + width: 100%; + gap: 10px; +} + +.comment-form input { + width: 100%; + height: 40px; + font-size: 14px; + border: 1px solid #ccc; + padding: 8px; + border-radius: 3px; + box-sizing: border-box; +} + +.submit-comment { + width: 25%; + height: 40px; + background-color: #007bff; + color: white; + border: none; + font-size: 14px; + cursor: pointer; + text-align: center; + border-radius: 3px; + margin-top: 5px; +} + +.submit-comment:hover { + background-color: #0056b3; +} + +.delete-comment { + background: none; + border: none; + color: red; + font-size: 14px; + cursor: pointer; +} + +.post-form { + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; + align-items: flex-start; +} + +.post-form input { + width: 100%; + height: 40px; + font-size: 14px; + border: 1px solid #ccc; + padding: 8px; + border-radius: 3px; + box-sizing: border-box; +} + +#submit { + width: 19%; + height: 40px; + background-color: #007bff; + color: white; + border: none; + font-size: 14px; + cursor: pointer; + text-align: center; + border-radius: 3px; + margin-top: 10px; +} + +#submit:hover { + background-color: #0056b3; +}