From 8bcaf72af072bdb9ee351997b0e9dda840251555 Mon Sep 17 00:00:00 2001 From: Rahat Rahman <63892310+rahatbd@users.noreply.github.com> Date: Thu, 4 Jun 2026 13:57:23 -0400 Subject: [PATCH 1/4] Part 1 --- index.html | 25 ++++++++++++++++++++++ script.js | 13 +++++++++++ style.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..0bc35926 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + ReReddit + + + +

ReReddit

+ +
+ + + + + +
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..09c91782 --- /dev/null +++ b/script.js @@ -0,0 +1,13 @@ +const posts = document.querySelector('.posts'); +const form = document.querySelector('form'); + +form.addEventListener('submit', event => { + event.preventDefault(); + const data = new FormData(form); + const text = data.get('text'); + const name = data.get('name'); + const li = document.createElement('li'); + li.textContent = `${text} - Posted By: ${name}`; + posts.append(li); + form.reset(); +}); diff --git a/style.css b/style.css new file mode 100644 index 00000000..3a75d0d4 --- /dev/null +++ b/style.css @@ -0,0 +1,63 @@ +*, +*::before, +*::after { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + display: grid; + grid-template-columns: min(500px, 100%); + place-content: center; + margin: 1rem; +} + +h1, +li { + border-block-end: 1px solid; + padding-block-end: 1rem; +} + +ul { + list-style-type: none; + margin-block-start: 2rem; +} + +li { + margin-block-end: 1rem; + + &:last-child { + margin-block-end: 2rem; + } +} + +form { + display: flex; + flex-direction: column; + row-gap: 1.5rem; +} + +input { + border: 1px solid; + border-radius: 4px; + padding: 12px 8px; +} + +button { + inline-size: max-content; + cursor: pointer; + padding: 8px; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} \ No newline at end of file From bccd1808631440d29bba8cc67efb40e5f735a3e2 Mon Sep 17 00:00:00 2001 From: Rahat Rahman <63892310+rahatbd@users.noreply.github.com> Date: Thu, 4 Jun 2026 18:00:05 -0400 Subject: [PATCH 2/4] Part 2 --- script.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- style.css | 41 ++++++++++++++++++++++++-------- 2 files changed, 100 insertions(+), 11 deletions(-) diff --git a/script.js b/script.js index 09c91782..11afb5ed 100644 --- a/script.js +++ b/script.js @@ -3,11 +3,79 @@ const form = document.querySelector('form'); form.addEventListener('submit', event => { event.preventDefault(); + const data = new FormData(form); const text = data.get('text'); const name = data.get('name'); + const li = document.createElement('li'); - li.textContent = `${text} - Posted By: ${name}`; + + const remove = document.createElement('button'); + remove.textContent = 'remove'; + + const comments = document.createElement('button'); + comments.textContent = 'comments'; + + const post = document.createElement('span'); + post.textContent = `${text} - Posted By: ${name}`; + + const commentDiv = document.createElement('div'); + commentDiv.classList.add('hidden'); + + const commentList = document.createElement('ul'); + + const commentForm = document.createElement('form'); + + const id = crypto.randomUUID(); + + const commentLabel = document.createElement('label'); + commentLabel.htmlFor = `comment-${id}`; + commentLabel.classList.add('sr-only'); + commentLabel.textContent = 'Comment Text'; + + const comment = document.createElement('input'); + comment.id = commentLabel.htmlFor; + comment.name = 'comment'; + comment.placeholder = commentLabel.textContent; + comment.required = true; + + const nameLabel = document.createElement('label'); + nameLabel.htmlFor = `name-${id}`; + nameLabel.classList.add('sr-only'); + nameLabel.textContent = 'Your Name'; + + const commentName = document.createElement('input'); + commentName.id = nameLabel.htmlFor; + commentName.name = 'comment-name'; + commentName.placeholder = nameLabel.textContent; + commentName.required = true; + + const commentSubmit = document.createElement('button'); + commentSubmit.textContent = 'Submit Comment'; + + commentForm.append(commentLabel, comment, nameLabel, commentName, commentSubmit); + commentDiv.append(commentList, commentForm); + + remove.addEventListener('click', () => li.remove()); + comments.addEventListener('click', () => commentDiv.classList.toggle('hidden')); + + commentForm.addEventListener('submit', event => { + event.preventDefault(); + const data = new FormData(commentForm); + const comment = data.get('comment'); + const name = data.get('comment-name'); + const li = document.createElement('li'); + li.textContent = `${comment} - Posted By: ${name}`; + const remove = document.createElement('button'); + remove.textContent = 'remove'; + remove.addEventListener('click', () => li.remove()); + li.prepend(remove); + commentList.append(li); + commentForm.reset(); + }); + + li.append(remove, comments, post, commentDiv); posts.append(li); + form.reset(); }); diff --git a/style.css b/style.css index 3a75d0d4..172d2434 100644 --- a/style.css +++ b/style.css @@ -14,21 +14,39 @@ body { } h1, -li { +.posts>li { border-block-end: 1px solid; padding-block-end: 1rem; + margin-block-end: 1rem; } ul { list-style-type: none; - margin-block-start: 2rem; } -li { - margin-block-end: 1rem; +li li { + padding-block-start: 1ch; +} + +button { + --blue: #007bff; + font-size: 1rem; + font-weight: bold; + border: none; + cursor: pointer; - &:last-child { - margin-block-end: 2rem; + li & { + color: var(--blue); + background: none; + margin-inline-end: 0.5ch; + } + + form & { + background-color: var(--blue); + color: snow; + border-radius: 4px; + inline-size: max-content; + padding: 12px; } } @@ -36,18 +54,21 @@ form { display: flex; flex-direction: column; row-gap: 1.5rem; + + li & { + margin-block-start: 1rem; + } } input { + font-size: 1rem; border: 1px solid; border-radius: 4px; padding: 12px 8px; } -button { - inline-size: max-content; - cursor: pointer; - padding: 8px; +.hidden { + display: none; } .sr-only { From 198a7e8798d66f422f6db0bdf20b915b777c5cb2 Mon Sep 17 00:00:00 2001 From: Rahat Rahman <63892310+rahatbd@users.noreply.github.com> Date: Sun, 7 Jun 2026 01:09:29 -0400 Subject: [PATCH 3/4] refactor --- index.html | 4 +- script.js | 141 ++++++++++++++++++++++++++++++++--------------------- 2 files changed, 87 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index 0bc35926..7f72e0df 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,8 @@

ReReddit

- - + + diff --git a/script.js b/script.js index 11afb5ed..48a8b51f 100644 --- a/script.js +++ b/script.js @@ -1,13 +1,41 @@ const posts = document.querySelector('.posts'); const form = document.querySelector('form'); -form.addEventListener('submit', event => { - event.preventDefault(); +function createCommentForm() { + const id = crypto.randomUUID(); - const data = new FormData(form); - const text = data.get('text'); - const name = data.get('name'); + const commentForm = document.createElement('form'); + const commentTextLabel = document.createElement('label'); + commentTextLabel.htmlFor = `comment-${id}`; + commentTextLabel.classList.add('sr-only'); + commentTextLabel.textContent = 'Comment'; + + const commentText = document.createElement('input'); + commentText.id = commentTextLabel.htmlFor; + commentText.name = 'text'; + commentText.placeholder = 'Comment Text'; + commentText.required = true; + + const commentNameLabel = document.createElement('label'); + commentNameLabel.htmlFor = `name-${id}`; + commentNameLabel.classList.add('sr-only'); + commentNameLabel.textContent = 'Name'; + + const commentName = document.createElement('input'); + commentName.id = commentNameLabel.htmlFor; + commentName.name = 'name'; + commentName.placeholder = 'Your Name'; + commentName.required = true; + + const commentSubmit = document.createElement('button'); + commentSubmit.textContent = 'Submit Comment'; + + commentForm.append(commentTextLabel, commentText, commentNameLabel, commentName, commentSubmit); + return commentForm; +} + +function createPost(text, name) { const li = document.createElement('li'); const remove = document.createElement('button'); @@ -19,63 +47,64 @@ form.addEventListener('submit', event => { const post = document.createElement('span'); post.textContent = `${text} - Posted By: ${name}`; - const commentDiv = document.createElement('div'); - commentDiv.classList.add('hidden'); - - const commentList = document.createElement('ul'); + const commentsDiv = document.createElement('div'); + commentsDiv.classList.add('hidden'); - const commentForm = document.createElement('form'); + const commentsList = document.createElement('ul'); - const id = crypto.randomUUID(); + const commentForm = createCommentForm(); - const commentLabel = document.createElement('label'); - commentLabel.htmlFor = `comment-${id}`; - commentLabel.classList.add('sr-only'); - commentLabel.textContent = 'Comment Text'; + commentsDiv.append(commentsList, commentForm); + li.append(remove, comments, post, commentsDiv); + return li; +} - const comment = document.createElement('input'); - comment.id = commentLabel.htmlFor; - comment.name = 'comment'; - comment.placeholder = commentLabel.textContent; - comment.required = true; +function createCommentPost(text, name) { + const li = document.createElement('li'); + li.textContent = `${text} - Posted By: ${name}`; - const nameLabel = document.createElement('label'); - nameLabel.htmlFor = `name-${id}`; - nameLabel.classList.add('sr-only'); - nameLabel.textContent = 'Your Name'; + const remove = document.createElement('button'); + remove.textContent = 'remove'; - const commentName = document.createElement('input'); - commentName.id = nameLabel.htmlFor; - commentName.name = 'comment-name'; - commentName.placeholder = nameLabel.textContent; - commentName.required = true; + li.prepend(remove); + return li; +} - const commentSubmit = document.createElement('button'); - commentSubmit.textContent = 'Submit Comment'; - - commentForm.append(commentLabel, comment, nameLabel, commentName, commentSubmit); - commentDiv.append(commentList, commentForm); - - remove.addEventListener('click', () => li.remove()); - comments.addEventListener('click', () => commentDiv.classList.toggle('hidden')); - - commentForm.addEventListener('submit', event => { - event.preventDefault(); - const data = new FormData(commentForm); - const comment = data.get('comment'); - const name = data.get('comment-name'); - const li = document.createElement('li'); - li.textContent = `${comment} - Posted By: ${name}`; - const remove = document.createElement('button'); - remove.textContent = 'remove'; - remove.addEventListener('click', () => li.remove()); - li.prepend(remove); - commentList.append(li); - commentForm.reset(); - }); - - li.append(remove, comments, post, commentDiv); - posts.append(li); +function getFormData(form) { + const data = new FormData(form); + const text = data.get('text')?.trim(); + const name = data.get('name')?.trim(); + return {text, name}; +} + +function handlePostClick(event) { + const button = event.target.closest('button'); + if (!button) return; + const post = button.closest('li'); + if (button.textContent === 'remove') return post.remove(); + if (button.textContent === 'comments') post.querySelector('div').classList.toggle('hidden'); +} + +function handleCommentSubmit(event) { + event.preventDefault(); + const form = event.target; + const {text, name} = getFormData(form); + if (!text || !name) return alert('Fields cannot be empty.'); + const comments = form.previousElementSibling; + const comment = createCommentPost(text, name); + comments.append(comment); + form.reset(); +} +function handlePostSubmit(event) { + event.preventDefault(); + const {text, name} = getFormData(form); + if (!text || !name) return alert('Fields cannot be empty.'); + const post = createPost(text, name); + posts.append(post); form.reset(); -}); +} + +posts.addEventListener('click', handlePostClick); +posts.addEventListener('submit', handleCommentSubmit); +form.addEventListener('submit', handlePostSubmit); From 103ae47412378e7fb4153070b82ef08094cbee17 Mon Sep 17 00:00:00 2001 From: Rahat Rahman <63892310+rahatbd@users.noreply.github.com> Date: Mon, 8 Jun 2026 02:44:13 -0400 Subject: [PATCH 4/4] refactor --- index.html | 4 ++-- script.js | 39 ++++++++++++++++++--------------------- style.css | 10 +++++++--- 3 files changed, 27 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 7f72e0df..4a486428 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,9 @@

ReReddit

- + - +
diff --git a/script.js b/script.js index 48a8b51f..59c8ed73 100644 --- a/script.js +++ b/script.js @@ -1,37 +1,34 @@ const posts = document.querySelector('.posts'); const form = document.querySelector('form'); -function createCommentForm() { +function createCommentInput(labelText, inputName) { const id = crypto.randomUUID(); - const commentForm = document.createElement('form'); + const label = document.createElement('label'); + label.htmlFor = id; + label.classList.add('sr-only'); + label.textContent = labelText; + + const input = document.createElement('input'); + input.id = id; + input.name = inputName; + input.placeholder = labelText; + input.required = true; - const commentTextLabel = document.createElement('label'); - commentTextLabel.htmlFor = `comment-${id}`; - commentTextLabel.classList.add('sr-only'); - commentTextLabel.textContent = 'Comment'; + return {label, input}; +} - const commentText = document.createElement('input'); - commentText.id = commentTextLabel.htmlFor; - commentText.name = 'text'; - commentText.placeholder = 'Comment Text'; - commentText.required = true; +function createCommentForm() { + const commentForm = document.createElement('form'); - const commentNameLabel = document.createElement('label'); - commentNameLabel.htmlFor = `name-${id}`; - commentNameLabel.classList.add('sr-only'); - commentNameLabel.textContent = 'Name'; + const commentText = createCommentInput('Comment Text', 'text'); - const commentName = document.createElement('input'); - commentName.id = commentNameLabel.htmlFor; - commentName.name = 'name'; - commentName.placeholder = 'Your Name'; - commentName.required = true; + const commentName = createCommentInput('Your Name', 'name'); const commentSubmit = document.createElement('button'); commentSubmit.textContent = 'Submit Comment'; - commentForm.append(commentTextLabel, commentText, commentNameLabel, commentName, commentSubmit); + commentForm.append(commentText.label, commentText.input, commentName.label, commentName.input, commentSubmit); return commentForm; } diff --git a/style.css b/style.css index 172d2434..cc8abae9 100644 --- a/style.css +++ b/style.css @@ -15,7 +15,7 @@ body { h1, .posts>li { - border-block-end: 1px solid; + border-block-end: 4px double; padding-block-end: 1rem; margin-block-end: 1rem; } @@ -24,8 +24,12 @@ ul { list-style-type: none; } -li li { - padding-block-start: 1ch; +li { + overflow-wrap: break-word; + + li { + margin-block-start: 1ch; + } } button {