diff --git a/README.md b/README.md deleted file mode 100644 index 20395898..00000000 --- a/README.md +++ /dev/null @@ -1,5 +0,0 @@ -## Project Reddit - -This project has been created by a student at Parsity, an online software engineering course. The work in this repository is wholly of the student based on a sample starter project that can be accessed by looking at the repository that this project forks. - -If you have any questions about this project or the program in general, visit [parsity.io](https://parsity.io/) or email hello@parsity.io. diff --git a/buildMethods.js b/buildMethods.js new file mode 100644 index 00000000..35230220 --- /dev/null +++ b/buildMethods.js @@ -0,0 +1,41 @@ +import { getFormInput } from './formMethods.js'; + +export function buildConst(eventTarget, template) { + const formEl = eventTarget.closest('form'); + const obj = getFormInput(formEl); + if (obj) { + const el = buildFragment(template); + return { formEl, obj, el }; + } +} + +export function buildFragment(arrayObj) { + const fr = new DocumentFragment(); + arrayObj.forEach((obj) => { + fr.appendChild(buildElement(obj)); + }); + return fr; + + function buildElement(obj) { + const el = document.createElement(obj.type); + if (obj.attributes) { + for (const key in obj.attributes) { + const a = document.createAttribute(key); + a.value = obj.attributes[key]; + el.setAttributeNode(a); + } + } + if (obj.children) { + if (typeof obj.children[0] === 'string') { + const newContent = document.createTextNode(obj.children); + el.appendChild(newContent); + } else { + obj.children.forEach((element) => { + const child = buildElement(element); + el.appendChild(child); + }); + } + } + return el; + } +} \ No newline at end of file diff --git a/commentMethods.js b/commentMethods.js new file mode 100644 index 00000000..4917875e --- /dev/null +++ b/commentMethods.js @@ -0,0 +1,21 @@ +import { buildConst } from './buildMethods.js'; + +export function addComment(eventTarget) { + const p = buildConst(eventTarget, [{ type: 'p' }]); + if (p) { + const { formEl, obj, el } = p; + el.querySelector('p').innerText = `${obj.comment} - Posted by: ${obj.name}`; + formEl.insertBefore(el, formEl.firstChild); + } +} + +export function showComments(eventTarget) { + const cl = eventTarget.nextSibling.classList; + if (cl.contains('d-none')) { + cl.remove('d-none'); + eventTarget.innerText = 'Hide Comments'; + } else { + cl.add('d-none'); + eventTarget.innerText = 'Show Comments'; + } +} diff --git a/commentTemplate.js b/commentTemplate.js new file mode 100644 index 00000000..2e4845dc --- /dev/null +++ b/commentTemplate.js @@ -0,0 +1,73 @@ +export const commentTemplate = [ + { + type: 'form', + attributes: { class: 'mt-2 d-none needs-validation comment-form' }, + children: [ + { + type: 'div', + attributes: { class: 'mb-2' }, + children: [ + { + type: 'input', + attributes: { + type: 'text', + name: 'name', + placeholder: 'Name', + class: 'form-control', + required: true, + }, + }, + { + type: 'div', + attributes: { + class: 'invalid-feedback', + }, + children: ['Please provide a name.'], + }, + { + type: 'div', + attributes: { + class: 'valid-feedback', + }, + children: ['Looks good.'], + }, + ], + }, + { + type: 'div', + attributes: { class: 'mb-2' }, + children: [ + { + type: 'input', + attributes: { + type: 'text', + name: 'comment', + placeholder: 'Comment', + class: 'form-control', + required: true, + }, + }, + { + type: 'div', + attributes: { + class: 'invalid-feedback', + }, + children: ['Please provide a comment.'], + }, + { + type: 'div', + attributes: { + class: 'valid-feedback', + }, + children: ['Looks good.'], + }, + ], + }, + { + type: 'button', + attributes: { class: 'btn btn-primary add-comment' }, + children: ['Add Comment'], + }, + ], + }, +]; diff --git a/formMethods.js b/formMethods.js new file mode 100644 index 00000000..1387dfce --- /dev/null +++ b/formMethods.js @@ -0,0 +1,23 @@ +export function getFormInput(formEl) { + if (!formEl.checkValidity()) { + formEl.classList.add('was-validated'); + return; + } else { + const input = Array.from(formEl.querySelectorAll('.form-control')).reduce( + (struct, current) => { + struct[current.name] = current.value; + return struct; + }, + {} + ); + clearInput(formEl); + formEl.classList.remove('was-validated'); + return input; + } + + function clearInput(formEl) { + formEl.querySelectorAll('.form-control').forEach((input) => { + input.value = ''; + }); + } +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..abfe79af --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + Document + + + + + +
+

ReReddit

+
+
+
+

Add a post

+
+ +
+ Please provide a post title. +
+
+ Looks good! +
+
+
+ +
+ Post must be between 5 and 200 characters. +
+
+ Looks good! +
+
+
+ +
+ Please provide a name. +
+
+ Looks good! +
+
+ +
+
+ + + diff --git a/main.js b/main.js new file mode 100644 index 00000000..e095eeb8 --- /dev/null +++ b/main.js @@ -0,0 +1,21 @@ +import { addPost, deletePost } from './postMethods.js'; +import { showComments, addComment } from './commentMethods.js'; + +const main = document.querySelector('.main'); +const posts = document.querySelector('.posts'); + +main.addEventListener('click', (e) => { + e.preventDefault(); + if (e.target.classList.contains('add-post')) { + addPost(e.target, posts); + } + if (e.target.classList.contains('delete-btn')) { + deletePost(e.target); + } + if (e.target.classList.contains('show-comments')) { + showComments(e.target); + } + if (e.target.classList.contains('add-comment')) { + addComment(e.target); + } +}); diff --git a/postMethods.js b/postMethods.js new file mode 100644 index 00000000..83b5419c --- /dev/null +++ b/postMethods.js @@ -0,0 +1,19 @@ +import { commentTemplate } from './commentTemplate.js'; +import { postTemplate } from './postTemplate.js'; +import { buildConst, buildFragment } from './buildMethods.js'; + +export function addPost(eventTarget, appendTo) { + const p = buildConst(eventTarget, postTemplate); + if (p) { + const { _, obj, el } = p; + el.querySelector('.card-title').innerText = `${obj.title}`; + el.querySelector('.card-subtitle').innerText = `Posted by: ${obj.name}`; + el.querySelector('.card-text').innerText = `${obj.text}`; + el.querySelector('.card-body').appendChild(buildFragment(commentTemplate)); + appendTo.insertBefore(el, appendTo.firstChild); + } +} + +export function deletePost(eventTarget) { + eventTarget.closest('.card').remove(); +} diff --git a/postTemplate.js b/postTemplate.js new file mode 100644 index 00000000..98027829 --- /dev/null +++ b/postTemplate.js @@ -0,0 +1,39 @@ +export const postTemplate = [ + { + type: 'div', + attributes: { class: 'card mb-3' }, + children: [ + { + type: 'div', + attributes: { class: 'card-body' }, + children: [ + { + type: 'h5', + attributes: { class: 'card-title' }, + }, + { + type: 'h6', + attributes: { class: 'card-subtitle mb-2 text-body-secondary' }, + }, + { type: 'p', attributes: { class: 'card-text' } }, + { + type: 'a', + attributes: { + class: 'card-link delete-btn', + style: 'cursor: pointer', + }, + children: ['Delete Post'], + }, + { + type: 'a', + attributes: { + class: 'card-link show-comments', + style: 'cursor: pointer', + }, + children: ['Show Comments'], + }, + ], + }, + ], + }, +]; diff --git a/readme.md b/readme.md new file mode 100644 index 00000000..129a8dc3 --- /dev/null +++ b/readme.md @@ -0,0 +1,32 @@ +# Simple Post & Comment App + +This project provides a basic structure for creating, displaying, and managing posts and comments dynamically using JavaScript. + +## How to Run + +Code is split into different files and uses import and export statements. The code uses `