<!DOCTYPE html>
<html>
  <body>
    <main>
      <article>
        <h1>The Joy of Programming</h1>
        <p>
          This is an example of formatting a blog-type website with Javascript; complete with "like" and commenting capabilities.
        </p>
			<hr>
		<h4>Blog Post 1</h4>
        <p>
			  Bacon ipsum dolor amet mollit bresaola brisket rump, irure quis anim ea fatback deserunt swine jerky. Nostrud ball tip bresaola short loin veniam, shank do id capicola qui beef ribs. Pork chop sausage cillum magna, ullamco pig hamburger. Cupidatat burgdoggen qui jerky est sirloin. Quis voluptate kielbasa mollit.
		</p>
		<p>
Strip steak voluptate biltong ground round, landjaeger short loin salami buffalo cow dolor. Aliqua pork belly aliquip beef sirloin, fatback commodo burgdoggen strip steak in velit. Biltong do bacon, boudin leberkas beef porchetta eu culpa brisket fugiat ex. Pork belly chuck ea do, fugiat ham consectetur tri-tip shankle turkey cupidatat. Alcatra beef commodo, fugiat exercitation anim short ribs kevin ad frankfurter. Chicken frankfurter pastrami pork chop.
        </p>
      </article>
      <div class="like">
         <a href="#" class="like-link"> 🚀</a>
			<span id="likeCount" class="like-count"></span>
      </div>
		 <h5>Comments</h5>
      <div id="comments" class="comments">
      </div>
      <form id="new-comment">
        <textarea id="new-comment-body" class="new-comment" placeholder="Spicy jalapeno bacon ipsum dolor amet duis anim minim shank pork spare ribs corned beef. Fatback elit in shankle ea sed frankfurter irure exercitation cow kevin. Flank occaecat rump frankfurter ipsum doner duis kevin ut drumstick do. Officia fugiat do reprehenderit ribeye."></textarea>
        <button type="submit" class="submit">Submit</button>
      </form>
    </main>
  </body>
</html>
html {
	margin: 50px;
	font-family: Avenir;
}

.like-link {
	font-size: 25px;
}

.like-count {
	font-size: 20px;
	font-family: Courier;
}

a {
	text-decoration: none;
}

.comments {
	margin-top: 25px;
}

.comment {
	margin-bottom: 25px;
	border-bottom: 1px solid slategray;
}

.new-comment {
	width: 100%;
	height: 100px;
	padding: 5px;
	font-size: 14px;
	line-height: 1.1;
}

.submit {
	color: darkred;
	cursor: pointer;
	height: 25px;
	width: 150px;
	background-color: #efefef;
	border: 1px solid white;
  	box-shadow: 2px 2px lightgray;
	font-family: Courier;
	font-size: 14px;
}
var link = document.querySelector('.like-link');
var count = document.querySelector('#likeCount');
var form = document.querySelector('#new-comment');
var body = document.querySelector('#new-comment-body');
var comments = document.querySelector('#comments');
var parseStoredLikes = JSON.parse(localStorage.getItem('likes')) || [];
count.textContent = parseStoredLikes.length;
var parseStoredComments = JSON.parse(localStorage.getItem('comments')) || [];

function like(event) {
  event.preventDefault();
  var parsedContent = parseInt(count.textContent);
  count.textContent = parsedContent + 1;
  var likeCount = {
      parsedContent
  };
  parseStoredLikes.push(likeCount);
  localStorage.setItem('likes', JSON.stringify(parseStoredLikes));
}

function comment(e) {
    e.preventDefault();
    var commentText = (this.querySelector('#new-comment-body')).value;
    var commentObj = {
        commentText,
        deleted: false
    };
    parseStoredComments.push(commentObj);
    populateComments(parseStoredComments, comments);
    localStorage.setItem('comments', JSON.stringify(parseStoredComments));
    this.reset();
}

function populateComments(commentArray = [], commentList) {
    commentList.innerHTML = commentArray.map((commentObj, i) => {
    return `
		<span class="quotes" style="color:slategray;font-size:20px;">❝</span><span id="${i}" onclick="deleteComment(id);" style="float:right;cursor:pointer;color:red;font-size:12px;">delete</span>
        <div data-index=${i} id="comment${i}" class='comment'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${commentObj.commentText}</div>
    `;
    }).join('');
}

function deleteComment(id) {
    var i = parseInt(id);
    parseStoredComments[i].deleted = !parseStoredComments[i].deleted;
    parseStoredComments.splice([i],1);
    localStorage.setItem('comments', JSON.stringify(parseStoredComments));
    populateComments(parseStoredComments, comments);
}

link.addEventListener('click', like);
form.addEventListener('submit', comment);

populateComments(parseStoredComments, comments);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.