projectshft · rahatbd · Jun 4, 2026 · Jun 4, 2026 · Jun 7, 2026 · Jun 8, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-CA">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="color-scheme" content="light dark">
+    <link href="style.css" rel="stylesheet">
+    <script src="script.js" defer></script>
+    <title>ReReddit</title>
+</head>
+
+<body>
+    <h1>ReReddit</h1>
+    <ul class="posts"></ul>
+    <form>
+        <label for="post" class="sr-only">Post Text</label>
+        <input id="post" name="text" placeholder="Post Text" required>
+        <label for="name" class="sr-only">Your Name</label>
+        <input id="name" name="name" placeholder="Your Name" required>
+        <button>Submit Post</button>
+    </form>
+</body>
+
+</html>
diff --git a/script.js 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
@@ -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;
+}