From d2104d2e42263c56072bf09b6c4265e1244e15e3 Mon Sep 17 00:00:00 2001 From: Austin Stevens Date: Tue, 16 Jan 2018 22:40:50 -0500 Subject: [PATCH 1/3] Implemented forum with basic posting capability. It's possible to upvote, downvote, and delete posts. --- index.html | 30 +++++++++++++++-------- main.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 90 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index b446e50..3448da0 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,16 @@ Forum +
@@ -12,32 +22,32 @@

Forum

+

Add a new post

- +
+ placeholder="Name" minlength="1" required>
- +
+ placeholder="Message" minlength="1" required>
- - + +
- + - - - diff --git a/main.js b/main.js index 851493a..b707e5c 100644 --- a/main.js +++ b/main.js @@ -1 +1,70 @@ -// your code here \ No newline at end of file +// your code here +document.getElementsByClassName('post')[0].addEventListener('click', function (a) { + a.preventDefault(); + let ul = document.getElementsByClassName('posts')[0].children[0]; + let upvoteCount = 0; + let downvoteCount = 0; + + // Get the poster's name and message + let postName = document.getElementById('name').value; + if (postName.length == 0) { + return; + } + let postMessage = document.getElementById('message').value; + if (postMessage.length == 0) { + return; + } + + // Setup for elements to be created + let newPost = document.createElement('li'); + let upvoteButton = document.createElement('button'); + let downvoteButton = document.createElement('button'); + let deleteButton = document.createElement('button'); + + // Assign text values to elements + newPost.innerHTML = "" + postName + ": " + postMessage; // let newPost = document.createTextNode(postName + ': ' + postMessage + '\n'); + let upvoteText = document.createTextNode('\uD83D\uDC4D'); + let downvoteText = document.createTextNode('\uD83D\uDC4E'); + let deleteText = document.createTextNode('Delete'); + + // Append textNodes to new elements + upvoteButton.appendChild(upvoteText); + downvoteButton.appendChild(downvoteText); + deleteButton.appendChild(deleteText); + upvoteButton.className += '' + 'btn btn-default btn-xs btn-post'; + downvoteButton.className += '' + 'btn btn-default btn-xs btn-post'; + deleteButton.className += '' + 'btn btn-default btn-xs btn-post'; + + // Function to handle sorting of posts by upvotes in descending order + function sortPosts() { + let listItems = document.getElementsByClassName('posts')[0].children[0]; + listItems.sort() + }; + + // Upvote functionality :) + upvoteButton.addEventListener('click', function() { + upvoteCount++; + upvoteButton.innerHTML = '\uD83D\uDC4D ' + upvoteCount; + }); + + // Downvote functionality :( + downvoteButton.addEventListener('click', function() { + downvoteCount++; + downvoteButton.innerHTML = '\uD83D\uDC4E ' + downvoteCount; + }); + + // Delete functionality - removes the message and its + deleteButton.addEventListener('click', function() { + newPost.remove(); + upvoteButton.remove(); + downvoteButton.remove(); + deleteButton.remove(); + }); + + // Append new elements in the unordered list + ul.append(newPost); + ul.appendChild(upvoteButton); + ul.appendChild(downvoteButton); + ul.appendChild(deleteButton); + +}); From 6c583bdd0bf6ee5240a35fdcf4d94d0e89647650 Mon Sep 17 00:00:00 2001 From: Austin Stevens Date: Wed, 17 Jan 2018 00:15:02 -0500 Subject: [PATCH 2/3] Posts are now sortable by upvotes. Updated boilerplate text just a smidge! --- index.html | 9 ++++++--- main.js | 28 ++++++++++++++++++++-------- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 3448da0..1a4ee30 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,8 @@
-

Forum

+

~*hipster Forum*~

+

You've never heard of it

@@ -28,7 +29,7 @@

Forum

-

Add a new post

+

Add something... inspired

Add a new post
- + diff --git a/main.js b/main.js index b707e5c..3925746 100644 --- a/main.js +++ b/main.js @@ -22,7 +22,7 @@ document.getElementsByClassName('post')[0].addEventListener('click', function (a let deleteButton = document.createElement('button'); // Assign text values to elements - newPost.innerHTML = "" + postName + ": " + postMessage; // let newPost = document.createTextNode(postName + ': ' + postMessage + '\n'); + newPost.innerHTML = "" + postName + ": " + postMessage + '
'; // let newPost = document.createTextNode(postName + ': ' + postMessage + '\n'); let upvoteText = document.createTextNode('\uD83D\uDC4D'); let downvoteText = document.createTextNode('\uD83D\uDC4E'); let deleteText = document.createTextNode('Delete'); @@ -31,20 +31,31 @@ document.getElementsByClassName('post')[0].addEventListener('click', function (a upvoteButton.appendChild(upvoteText); downvoteButton.appendChild(downvoteText); deleteButton.appendChild(deleteText); - upvoteButton.className += '' + 'btn btn-default btn-xs btn-post'; - downvoteButton.className += '' + 'btn btn-default btn-xs btn-post'; + upvoteButton.className += '' + 'btn btn-default btn-xs btn-post upvote'; + newPost.setAttribute('upvotes', upvoteCount) + downvoteButton.className += '' + 'btn btn-default btn-xs btn-post downvote'; deleteButton.className += '' + 'btn btn-default btn-xs btn-post'; // Function to handle sorting of posts by upvotes in descending order function sortPosts() { - let listItems = document.getElementsByClassName('posts')[0].children[0]; - listItems.sort() + let listItems = document.querySelectorAll('.posts li'); + //let sortByUpvotes = function (a, b) { + // return a.getAttribute('upvotes') > b.getAttribute('upvotes') ? 1 : -1; + //}; + var listItemsArray = [].slice.call(listItems).sort( function (a, b) { + return a.getAttribute('upvotes') < b.getAttribute('upvotes') ? 1 : -1; + }); + listItemsArray.forEach( function (element) { + element.parentNode.appendChild(element); + }); }; // Upvote functionality :) upvoteButton.addEventListener('click', function() { upvoteCount++; upvoteButton.innerHTML = '\uD83D\uDC4D ' + upvoteCount; + newPost.setAttribute('upvotes', upvoteCount); + sortPosts(); }); // Downvote functionality :( @@ -63,8 +74,9 @@ document.getElementsByClassName('post')[0].addEventListener('click', function (a // Append new elements in the unordered list ul.append(newPost); - ul.appendChild(upvoteButton); - ul.appendChild(downvoteButton); - ul.appendChild(deleteButton); + let newListItem = ul.lastElementChild; + newListItem.insertAdjacentElement('beforeend', upvoteButton); + newListItem.insertAdjacentElement('beforeend', downvoteButton); + newListItem.insertAdjacentElement('beforeend', deleteButton); }); From 4dc559663e494ff97dd3572f6c2315a9c9b6ded0 Mon Sep 17 00:00:00 2001 From: Austin Stevens Date: Wed, 17 Jan 2018 23:38:33 -0500 Subject: [PATCH 3/3] Posts are now editable. Final commit. --- index.html | 19 ++++++++++++------- main.js | 43 ++++++++++++++++++++++++++++++++----------- 2 files changed, 44 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 1a4ee30..7d48086 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,16 @@ li { list-style-type: none; } + .btn-post { margin: 0.5rem 0.5rem 2rem 0; /* margin-bottom: 2rem; */ /* margin-right: 0.5rem; */ } + + [contenteditable]:focus { + outline: 0px solid transparent; + } @@ -18,8 +23,8 @@
-

~*hipster Forum*~

-

You've never heard of it

+

~*hipster forum*~

+

you've never heard of it

@@ -29,27 +34,27 @@

~*hipster Forum*~

-

Add something... inspired

+

add something... inspired

+ placeholder="name" minlength="1" required>
+ placeholder="message" minlength="1" required>
- +
diff --git a/main.js b/main.js index 3925746..392f6da 100644 --- a/main.js +++ b/main.js @@ -19,32 +19,36 @@ document.getElementsByClassName('post')[0].addEventListener('click', function (a let newPost = document.createElement('li'); let upvoteButton = document.createElement('button'); let downvoteButton = document.createElement('button'); + let editButton = document.createElement('button'); let deleteButton = document.createElement('button'); // Assign text values to elements - newPost.innerHTML = "" + postName + ": " + postMessage + '
'; // let newPost = document.createTextNode(postName + ': ' + postMessage + '\n'); + newPost.innerHTML = '' + postName + ": " + '' + postMessage + '
'; // let newPost = document.createTextNode(postName + ': ' + postMessage + '\n'); let upvoteText = document.createTextNode('\uD83D\uDC4D'); let downvoteText = document.createTextNode('\uD83D\uDC4E'); - let deleteText = document.createTextNode('Delete'); + let editText = document.createTextNode('edit'); + let deleteText = document.createTextNode('delete'); // Append textNodes to new elements upvoteButton.appendChild(upvoteText); downvoteButton.appendChild(downvoteText); + editButton.appendChild(editText); deleteButton.appendChild(deleteText); - upvoteButton.className += '' + 'btn btn-default btn-xs btn-post upvote'; + + // Modify button attributes newPost.setAttribute('upvotes', upvoteCount) - downvoteButton.className += '' + 'btn btn-default btn-xs btn-post downvote'; + upvoteButton.className += '' + 'btn btn-default btn-xs btn-post'; + downvoteButton.className += '' + 'btn btn-default btn-xs btn-post'; + editButton.className += '' + 'btn btn-default btn-xs btn-post'; deleteButton.className += '' + 'btn btn-default btn-xs btn-post'; // Function to handle sorting of posts by upvotes in descending order function sortPosts() { let listItems = document.querySelectorAll('.posts li'); - //let sortByUpvotes = function (a, b) { - // return a.getAttribute('upvotes') > b.getAttribute('upvotes') ? 1 : -1; - //}; - var listItemsArray = [].slice.call(listItems).sort( function (a, b) { - return a.getAttribute('upvotes') < b.getAttribute('upvotes') ? 1 : -1; - }); + let sortByUpvotes = function (a, b) { + return a.getAttribute('upvotes') < b.getAttribute('upvotes') ? 1 : -1; + }; + var listItemsArray = [].slice.call(listItems).sort(sortByUpvotes); listItemsArray.forEach( function (element) { element.parentNode.appendChild(element); }); @@ -64,7 +68,23 @@ document.getElementsByClassName('post')[0].addEventListener('click', function (a downvoteButton.innerHTML = '\uD83D\uDC4E ' + downvoteCount; }); - // Delete functionality - removes the message and its + // Edit functionality - edit an existing post's message + editButton.addEventListener('click', function() { + let postMessage = newListItem.children[0].lastElementChild; + + // Handle message being saved + if (editButton.textContent === 'save') { + postMessage.setAttribute('contenteditable', 'false'); + editButton.innerHTML = 'edit'; + return; + } + + // Make the message editable and change the edit text to 'save' + postMessage.setAttribute('contenteditable', 'true'); + editButton.innerHTML = 'save'; + }); + + // Delete functionality - removes the message entirely deleteButton.addEventListener('click', function() { newPost.remove(); upvoteButton.remove(); @@ -77,6 +97,7 @@ document.getElementsByClassName('post')[0].addEventListener('click', function (a let newListItem = ul.lastElementChild; newListItem.insertAdjacentElement('beforeend', upvoteButton); newListItem.insertAdjacentElement('beforeend', downvoteButton); + newListItem.insertAdjacentElement('beforeend', editButton); newListItem.insertAdjacentElement('beforeend', deleteButton); });