diff --git a/index.html b/index.html new file mode 100644 index 00000000..f44cdbf3 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + Page + + + + + +
+
+

Reddit

+
+
+
+
+
+ remove + comments: +
+ I'm a comment - Posted By: Jeff +
+
+
+ remove + comments: +
+ Here's a comment - Posted By: Jeff
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 00000000..94364de2 --- /dev/null +++ b/main.js @@ -0,0 +1,39 @@ +const submitButton = document.getElementsByClassName('active')[0]; + +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); +}); + +const rmButton = document.getElementsByClassName('rm-comments-btn')[0]; +rmButton.addEventListener('click', function () { + const commentsContainer = document.querySelector('.new-comments'); + commentsContainer.innerHTML = ''; +}) + +const toggleButtons = document.querySelectorAll('.show-comments-btn'); + + +toggleButtons.forEach(button => { + button.addEventListener('click', function () { + + const comments = this.parentElement.nextElementSibling; + + + if (comments.style.display === 'none' || comments.style.display === '') { + comments.style.display = 'block'; + } else { + comments.style.display = 'none'; + } + }); +}); + diff --git a/style.css b/style.css new file mode 100644 index 00000000..754cc790 --- /dev/null +++ b/style.css @@ -0,0 +1,49 @@ +.container { + display: grid; + justify-content: center; +} + +hr { + background-color: black; + color: black; +} + +.rm-comments-btn { + background-color: blue; + border-radius: 5px; + padding: 2px; + font-size: 80%; + color: white; +} + +.show-comments-btn { + margin-left: 5px; + background-color: blue; + border-radius: 5px; + padding: 2px; + font-size: 80%; + color: white; +} + +input { + width: 400px; + margin: 5px; +} + +hr { + width: 95%; +} + +.active { + margin-left: 4px; +} + +/* button { + background-color: royalblue; + color: white; + border-radius: 5px; + margin-left: 7px; + width: 24%; + font-size:70%; +} */ +