From 6bb203ca7b163babb8f493d290d36c9cfa1d4d8a Mon Sep 17 00:00:00 2001 From: areebakwas <32884881+areebakwas@users.noreply.github.com> Date: Fri, 23 Aug 2024 14:15:59 -0400 Subject: [PATCH] initial commit --- index.html | 28 ++++++++++++++ main.js | 107 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 4 ++ 3 files changed, 139 insertions(+) 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..a19178f5 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + + + Module 2-Project Reddit + + +
+

ReReddit

+
+
+
+
+ +
+
+ +
+ +
+
+ + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 00000000..aee2e6df --- /dev/null +++ b/main.js @@ -0,0 +1,107 @@ +// Add event listener +// prevent default and const for inputs +document.getElementById('form-post').addEventListener('submit', function(e) { + e.preventDefault(); + + + const textFromPost = document.getElementById('text-from-post').value; + const writerPosted = document.getElementById('writer-posted').value; + + postToAdd(textFromPost, writerPosted); + + + document.getElementById('text-from-post').value = ''; + document.getElementById('writer-posted').value = ''; +}); + +// Fxn to make post add to page html +function postToAdd(post, writer) { + + const containerOfMessages = document.createElement('div'); + containerOfMessages.classList.add('mb-4', 'border', 'p-3'); + + + const messagesPost = document.createElement('p'); + messagesPost.textContent = `${post} - Posted by ${writer}`; + + + const withdrawMessagesHere = document.createElement('a'); + withdrawMessagesHere.href = '#'; + withdrawMessagesHere.textContent = 'remove'; + withdrawMessagesHere.classList.add('text-danger', 'mr-2'); + withdrawMessagesHere.addEventListener('click', function () { + containerOfMessages.remove(); + }); + + + const postSwitchFromPage = document.createElement('a'); + postSwitchFromPage.href = '#'; + postSwitchFromPage.textContent = 'comments'; + postSwitchFromPage.classList.add('post-page'); + postSwitchFromPage.addEventListener('click', function () { + messagesAreHere.style.display = messagesAreHere.style.display === 'none' ? 'block' : 'none'; + }); + + + const messagesAreHere = document.createElement('div'); + messagesAreHere.classList.add('messages-are-here'); + + + const listOfComments = document.createElement('ul'); + listOfComments.classList.add('webpage-of-lists'); + + //create form + const formView = document.createElement('form'); + formView.classList.add('module-2'); + formView.innerHTML = ` +
+ +
+
+ +
+ + `; + + // use eventlistenr + formView.addEventListener('submit', function (e) { + e.preventDefault(); + + const inputPost = formView.querySelector('.input-post').value; + const inputComment = formView.querySelector('.input-comment').value; + + commentJoin(listOfComments, inputPost, inputComment); + formView.reset(); + }); + + // creat new fxn to join evertyhing/append + messagesAreHere.appendChild(listOfComments); + messagesAreHere.appendChild(formView); + containerOfMessages.appendChild(withdrawMessagesHere); + containerOfMessages.appendChild(postSwitchFromPage); + containerOfMessages.appendChild(messagesPost); + containerOfMessages.appendChild(messagesAreHere); + document.getElementById('cont-posts').appendChild(containerOfMessages); +} + + +function commentJoin(listOfComments, post, writer) { + const opinionUser = document.createElement('li'); + opinionUser.classList.add('my-2'); + + const viewRegarding = document.createElement('p'); + viewRegarding.textContent = `${post} - Posted by ${writer}`; + + const deleteOpinionL = document.createElement('a'); + deleteOpinionL.href = '#'; + deleteOpinionL.textContent = 'remove'; + deleteOpinionL.classList.add('text-danger', 'mr-2'); + + deleteOpinionL.addEventListener('click', function () { + opinionUser.remove(); + }); + + opinionUser.appendChild(deleteOpinionL); + opinionUser.appendChild(viewRegarding); + listOfComments.appendChild(opinionUser); +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..fd113dfd --- /dev/null +++ b/style.css @@ -0,0 +1,4 @@ +.messagesAreHere { + display: none; + margin-left: 18px; +} \ No newline at end of file