diff --git a/index.html b/index.html
new file mode 100644
index 00000000..4a486428
--- /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..59c8ed73
--- /dev/null
+++ b/script.js
@@ -0,0 +1,107 @@
+const posts = document.querySelector('.posts');
+const form = document.querySelector('form');
+
+function createCommentInput(labelText, inputName) {
+ const id = crypto.randomUUID();
+
+ 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;
+
+ return {label, input};
+}
+
+function createCommentForm() {
+ const commentForm = document.createElement('form');
+
+ const commentText = createCommentInput('Comment Text', 'text');
+
+ const commentName = createCommentInput('Your Name', 'name');
+
+ const commentSubmit = document.createElement('button');
+ commentSubmit.textContent = 'Submit Comment';
+
+ commentForm.append(commentText.label, commentText.input, commentName.label, commentName.input, commentSubmit);
+ return commentForm;
+}
+
+function createPost(text, name) {
+ const li = document.createElement('li');
+
+ 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 commentsDiv = document.createElement('div');
+ commentsDiv.classList.add('hidden');
+
+ const commentsList = document.createElement('ul');
+
+ const commentForm = createCommentForm();
+
+ commentsDiv.append(commentsList, commentForm);
+ li.append(remove, comments, post, commentsDiv);
+ return li;
+}
+
+function createCommentPost(text, name) {
+ const li = document.createElement('li');
+ li.textContent = `${text} - Posted By: ${name}`;
+
+ const remove = document.createElement('button');
+ remove.textContent = 'remove';
+
+ li.prepend(remove);
+ return 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);
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..cc8abae9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,88 @@
+*,
+*::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,
+.posts>li {
+ border-block-end: 4px double;
+ padding-block-end: 1rem;
+ margin-block-end: 1rem;
+}
+
+ul {
+ list-style-type: none;
+}
+
+li {
+ overflow-wrap: break-word;
+
+ li {
+ margin-block-start: 1ch;
+ }
+}
+
+button {
+ --blue: #007bff;
+ font-size: 1rem;
+ font-weight: bold;
+ border: none;
+ cursor: pointer;
+
+ 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;
+ }
+}
+
+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;
+}
+
+.hidden {
+ display: none;
+}
+
+.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