From 927f222deb01f5cf835f137bf847aeaa8cccba1b Mon Sep 17 00:00:00 2001 From: jlneuser Date: Mon, 18 Nov 2024 18:47:26 -0600 Subject: [PATCH 01/10] 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 6c4c0e3dc90d719b46b263a5e5cb156a0da89af7 Mon Sep 17 00:00:00 2001 From: jlneuser Date: Mon, 18 Nov 2024 18:53:12 -0600 Subject: [PATCH 02/10] add html/css --- index.html | 26 ++++++++++++++++++++++++++ style.css | 26 ++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/index.html b/index.html index e69de29b..4d83a9d9 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,26 @@ + + + + + Page + + + + +
+
+

ReReddit

+
+
+
+
+ I like cheese - Posted By: Jeff +
+ I like cheese - Posted By: Jeff +
+ + + +
+ + \ No newline at end of file diff --git a/style.css b/style.css index e69de29b..e8f17434 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,26 @@ +.container { + display: grid; + justify-content: center; +} + +span { + margin: 8px; +} + +input { + width: 400px; + margin: 8px; +} + +hr { + width: 95%; +} + +button { + background-color: royalblue; + color: white; + border-radius: 5px; + margin-left: 7px; + width: 24%; + font-size:70%; +} \ No newline at end of file From 1ef4efb40ff9bcfeae769788115053cdbd7a843b Mon Sep 17 00:00:00 2001 From: jlneuser Date: Mon, 18 Nov 2024 19:07:33 -0600 Subject: [PATCH 03/10] add bootstrap source --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 4d83a9d9..b1cb86a5 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Page + From 12ef797edd4b53078cfb6c8312a76ca9819ae028 Mon Sep 17 00:00:00 2001 From: jlneuser Date: Wed, 20 Nov 2024 21:04:22 -0600 Subject: [PATCH 04/10] add bootstrap and submit button --- index.html | 4 +++- style.css | 11 ++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b1cb86a5..beaa785d 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,9 @@

ReReddit

- + \ No newline at end of file diff --git a/style.css b/style.css index e8f17434..1fa8e995 100644 --- a/style.css +++ b/style.css @@ -9,18 +9,23 @@ span { input { width: 400px; - margin: 8px; + margin: 5px; } hr { width: 95%; } -button { +.active { + margin-left: 4px; +} + +/* button { background-color: royalblue; color: white; border-radius: 5px; margin-left: 7px; width: 24%; font-size:70%; -} \ No newline at end of file +} */ + From 9202a5cc9289ad03407d3c8f3904ccba5427f772 Mon Sep 17 00:00:00 2001 From: jlneuser Date: Wed, 20 Nov 2024 21:27:53 -0600 Subject: [PATCH 05/10] add styled button text to remove and add comments --- index.html | 12 ++++++++++-- style.css | 13 +++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index beaa785d..536fa71a 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,17 @@

ReReddit

- I like cheese - Posted By: Jeff +
+ remove + comments +
+ "I'm a comment" - Posted By: Jeff
- I like cheese - Posted By: Jeff +
+ remove + comments +
+ "Here's a comment" - Posted By: Jeff
diff --git a/style.css b/style.css index 1fa8e995..ed8a903f 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,19 @@ justify-content: center; } +.comment-btns { + color: blue; +} + +.rm-comments { + box-shadow: 1px 1px 3px rgba(90, 90, 176, .9); +} + +.show-comments { + margin-left: 5px; + box-shadow: 1px 1px 3px rgba(90, 90, 176, .9); +} + span { margin: 8px; } From 84ca51b339c1d0798ac6d2ba4b0cac124a839b15 Mon Sep 17 00:00:00 2001 From: jlneuser Date: Wed, 20 Nov 2024 21:32:08 -0600 Subject: [PATCH 06/10] add more styling to remove and comments buttons --- style.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index ed8a903f..94b96af8 100644 --- a/style.css +++ b/style.css @@ -4,16 +4,24 @@ } .comment-btns { - color: blue; + } .rm-comments { - box-shadow: 1px 1px 3px rgba(90, 90, 176, .9); + background-color: blue; + border-radius: 5px; + padding: 2px; + font-size: 80%; + color: white; } .show-comments { margin-left: 5px; - box-shadow: 1px 1px 3px rgba(90, 90, 176, .9); + background-color: blue; + border-radius: 5px; + padding: 2px; + font-size: 80%; + color: white; } span { From 61da120cb8b2c5e1392b0639a2ad61ed1ea32326 Mon Sep 17 00:00:00 2001 From: jlneuser Date: Wed, 20 Nov 2024 21:49:42 -0600 Subject: [PATCH 07/10] clean up HTML --- index.html | 10 +++++----- style.css | 8 ++------ 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 536fa71a..41aba487 100644 --- a/index.html +++ b/index.html @@ -10,20 +10,20 @@
-

ReReddit

+

Reddit

- remove - comments + remove + comments
"I'm a comment" - Posted By: Jeff
- remove - comments + remove + comments
"Here's a comment" - Posted By: Jeff
diff --git a/style.css b/style.css index 94b96af8..da2d89e5 100644 --- a/style.css +++ b/style.css @@ -3,11 +3,7 @@ justify-content: center; } -.comment-btns { - -} - -.rm-comments { +.rm-comments-btn { background-color: blue; border-radius: 5px; padding: 2px; @@ -15,7 +11,7 @@ color: white; } -.show-comments { +.show-comments-btn { margin-left: 5px; background-color: blue; border-radius: 5px; From 831114f087732a9145dcbc5cdcbca4f92ed999d0 Mon Sep 17 00:00:00 2001 From: jlneuser Date: Wed, 20 Nov 2024 22:50:40 -0600 Subject: [PATCH 08/10] add functionality to post comments after clicking Submit --- index.html | 14 +++++++------- main.js | 30 ++++++++++++++++++++++++++++++ style.css | 4 ++++ 3 files changed, 41 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 41aba487..6610ca6b 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ Page -
@@ -17,21 +16,22 @@

Reddit

remove - comments + comments:
- "I'm a comment" - Posted By: Jeff + "I'm a comment" - Posted By: Jeff
remove - comments + comments:
- "Here's a comment" - Posted By: Jeff + "Here's a comment" - Posted By: Jeff
- - + +
+ \ No newline at end of file diff --git a/main.js b/main.js index e69de29b..76fb5e7b 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,30 @@ +// JS event listener for when a person clicks 'Submit' + + +const submitComment = document.getElementsByClassName('active')[0]; + +submitComment.addEventListener('click', function() { + + // capture input field text + const inputPost = document.getElementsByClassName('post')[0]; + const inputName = document.getElementsByClassName('name')[0]; + + // Get the values of these elements + const postText = inputPost.value; + const nameText = inputName.value; + + // create a new with this input under the span class "new-comments" + const newSpan = document.createElement('span'); + newSpan.textContent = `"${postText}, posted by ${nameText}"`; + + const lineBreak = document.createElement('br'); + + const commentContainer = document.querySelector('.new-comments'); + commentContainer.appendChild(lineBreak); + commentContainer.appendChild(newSpan); + + +}) + + + diff --git a/style.css b/style.css index da2d89e5..71c8e4a8 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,10 @@ justify-content: center; } +.new-comments { + border: 1px solid blue; +} + .rm-comments-btn { background-color: blue; border-radius: 5px; From 1392c024fc3a8973f84b2ced2fe3a47c19d07157 Mon Sep 17 00:00:00 2001 From: jlneuser Date: Thu, 21 Nov 2024 22:21:22 -0600 Subject: [PATCH 09/10] add comment toggle functionality and remove functionality --- index.html | 15 +++++++++---- main.js | 62 ++++++++++++++++++++++++++++++++++++------------------ style.css | 7 +++--- 3 files changed, 57 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 6610ca6b..40c49351 100644 --- a/index.html +++ b/index.html @@ -18,16 +18,23 @@

Reddit

remove comments: - "I'm a comment" - Posted By: Jeff -
+ I'm a comment - Posted By: Jeff +
+
+
remove comments:
- "Here's a comment" - Posted By: Jeff + Here's a comment - Posted By: Jeff
+
+ + - + + + diff --git a/main.js b/main.js index 76fb5e7b..dffd9047 100644 --- a/main.js +++ b/main.js @@ -1,30 +1,52 @@ -// JS event listener for when a person clicks 'Submit' +const submitButton = document.getElementsByClassName('active')[0]; +submitButton.addEventListener('click', function () { -const submitComment = document.getElementsByClassName('active')[0]; +const inputPost = document.getElementsByClassName('post')[0].value; +const inputName = document.getElementsByClassName('name')[0].value; -submitComment.addEventListener('click', function() { +const newSpan = document.createElement('span'); +newSpan.innerHTML = `${inputPost}, posted by ${inputName}`; +const lineBreak = document.createElement('br'); - // capture input field text - const inputPost = document.getElementsByClassName('post')[0]; - const inputName = document.getElementsByClassName('name')[0]; +const commentContainer = document.querySelector('.new-comments'); +commentContainer.appendChild(newSpan); +commentContainer.appendChild(lineBreak); +}); - // Get the values of these elements - const postText = inputPost.value; - const nameText = inputName.value; +const rmButton = document.getElementsByClassName('rm-comments-btn')[0]; +rmButton.addEventListener('click', function () { + const commentsContainer = document.querySelector('.new-comments'); + commentsContainer.innerHTML = ''; +}) - // create a new with this input under the span class "new-comments" - const newSpan = document.createElement('span'); - newSpan.textContent = `"${postText}, posted by ${nameText}"`; +const toggleButtons = document.querySelectorAll('.show-comments-btn'); - const lineBreak = document.createElement('br'); - - const commentContainer = document.querySelector('.new-comments'); - commentContainer.appendChild(lineBreak); - commentContainer.appendChild(newSpan); - - -}) +// Add event listeners to each button +toggleButtons.forEach(button => { + button.addEventListener('click', function () { + // Find the corresponding "new-comments" element (next sibling) + const comments = this.parentElement.nextElementSibling; + // Toggle the visibility of the comments + if (comments.style.display === 'none' || comments.style.display === '') { + comments.style.display = 'block'; // Show comments + } else { + comments.style.display = 'none'; // Hide comments + } + }); +}); +// submitButton.addEventListener('click', function () { +// const inputPost = document.getElementsByClassName('post')[0].value; +// const inputName = document.getElementsByClassName('name')[0].value; + +// const newSpan = document.createElement('span'); +// newSpan.innerHTML = `${inputPost}, posted by ${inputName}`; +// const lineBreak = document.createElement('br'); + +// const commentContainer = document.querySelector('.new-comments'); +// commentContainer.appendChild(newSpan); +// commentContainer.appendChild(lineBreak); +// }); \ No newline at end of file diff --git a/style.css b/style.css index 71c8e4a8..d62facea 100644 --- a/style.css +++ b/style.css @@ -3,8 +3,9 @@ justify-content: center; } -.new-comments { - border: 1px solid blue; +hr { + background-color: black; + color: black; } .rm-comments-btn { @@ -25,7 +26,7 @@ } span { - margin: 8px; + margin: } input { From 543d562dbc70d8b2bd5275816f87165704554b04 Mon Sep 17 00:00:00 2001 From: jlneuser Date: Sat, 23 Nov 2024 20:00:13 -0600 Subject: [PATCH 10/10] final touches before submit --- index.html | 63 +++++++++++++++++++++++++++--------------------------- main.js | 23 +++++--------------- style.css | 4 ---- 3 files changed, 36 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index 40c49351..f44cdbf3 100644 --- a/index.html +++ b/index.html @@ -1,44 +1,43 @@ - - - Page - - - - -
-
-

Reddit

-
-
-
+ + + + Page + + + + + +
+
+

Reddit

+
+
+
-
- remove - comments: -
- I'm a comment - Posted By: Jeff +
+ remove + comments: +
+ I'm a comment - Posted By: Jeff
-
remove comments:
- Here's a comment - Posted By: Jeff
- + Here's a comment - Posted By: Jeff
+
+ + + +
+ + - - - - - - -
- - \ No newline at end of file diff --git a/main.js b/main.js index dffd9047..94364de2 100644 --- a/main.js +++ b/main.js @@ -22,31 +22,18 @@ rmButton.addEventListener('click', function () { const toggleButtons = document.querySelectorAll('.show-comments-btn'); -// Add event listeners to each button + toggleButtons.forEach(button => { button.addEventListener('click', function () { - // Find the corresponding "new-comments" element (next sibling) + const comments = this.parentElement.nextElementSibling; - // Toggle the visibility of the comments + if (comments.style.display === 'none' || comments.style.display === '') { - comments.style.display = 'block'; // Show comments + comments.style.display = 'block'; } else { - comments.style.display = 'none'; // Hide comments + comments.style.display = 'none'; } }); }); -// submitButton.addEventListener('click', function () { - -// const inputPost = document.getElementsByClassName('post')[0].value; -// const inputName = document.getElementsByClassName('name')[0].value; - -// const newSpan = document.createElement('span'); -// newSpan.innerHTML = `${inputPost}, posted by ${inputName}`; -// const lineBreak = document.createElement('br'); - -// const commentContainer = document.querySelector('.new-comments'); -// commentContainer.appendChild(newSpan); -// commentContainer.appendChild(lineBreak); -// }); \ No newline at end of file diff --git a/style.css b/style.css index d62facea..754cc790 100644 --- a/style.css +++ b/style.css @@ -25,10 +25,6 @@ hr { color: white; } -span { - margin: -} - input { width: 400px; margin: 5px;