Blog Render and CRUD Operations

Blog Render and CRUD Operations

by Kamal Rawat

HTML

<div class="header">
  <h2>My Blog</h2>
</div>

<div class="row">
  <div class="rightcolumn" id="blogcardcontainer">
    <!-- BLOG DATA RENDERS HERE -->
  </div>
  <div class="leftcolumn">
    <div class="card">
      <h2>Past Posts</h2>
      <span>07 JAN 2019 - (16)</span>
      <span>06 JAN 2019 - (26)</span>
      <span>05 JAN 2019 - (6)</span>
    </div>
  </div>
</div>

<!--<div class="footer">
  <h2>Footer</h2>
</div>-->

<div class="modal" id="modalcontainer">
  <div id="modalcontent">
    <span class="title"></span>
    <p class="blogbody"></p>
    <div>
      <input type="button" value="cancel" onclick="hideModal()" />
      <input type="button" value="Update" />
    </div>
  </div>
</div>

CSS

*{
  box-sizing: border-box;
}

/* Add a gray background color with some padding */
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 20px;
  font-size: 20px;
  text-align: center;
  background: white;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 25%;
}

/* Right column */
.rightcolumn {
  float: right;
  width: 75%;
  padding-left: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Date */
.date {
  float: right;
}

.action{
  float: right;
}

a:hover{
  color: blue;
  float: right;
  cursor: pointer;
}

.modal{
  position: fixed;
  visibility: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
  
  width: 600px;
  max-width: 100%;
  
  height: 400px;
  max-height: 100%;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {

  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

JavaScript

const HTTPMETHOD = {
	'GET'		: 'GET',
	'POST' 	: 'POST',
  'PUT'		: 'PUT',
	'DELETE': 'DELETE'
}
const BASE_URL = 'https://restedblog.herokuapp.com/kamalr/api';//'https://jsonplaceholder.typicode.com';

async function getBlogs() {
  let blogs = await fetch(BASE_URL, {method: HTTPMETHOD.GET});
  debugger;
  if (blogs.status === 200) {
    return blogs.json();
  } else {
    return new BlogError('Problem while fetching blog api');
  }

};
getBlogs().then(function(response, err) {
  drawBlogLayout(response);
});

var containerDiv = document.getElementById('blogcardcontainer');

editBlog = function(blogId){
	console.log(blogId);
	let modal = document.getElementById('modalcontainer');
  modal.style.visibility = 'visible'; // doesnt cause reflow in browser
	let modalcontent = document.getElementById('modalcontent');
  let titleplaceHolder = document.getElementsByClassName('title');
  let blogbodyPlaceHolder = document.getElementsByClassName('blogbody');
  
  titleplaceHolder[0].innerText = `Title: ${blogId}`;
  blogbodyPlaceHolder[0].innerText = 'New blog Body';
  debugger;
  fetch('https://restedblog.herokuapp.com/kamalr/api/', {
    method: 'POST',
		body: JSON.stringify({
      title: 'new title',
      text: 'new text'
    })
  })
  .then( function(response){
	debugger;
        return response.json();
	})
  .then(json => console.log(json))

}

drawBlogLayout = function(blogs) {
console.time('blogrender');
  blogs.forEach(function(blog) {

    let singleBlogPlaceHolder = document.createElement('div');
    singleBlogPlaceHolder.classList.add('card');
    singleBlogPlaceHolder.setAttribute('id', blog.id);

    let blogHeading = document.createElement('span');
    let headingText = document.createTextNode('TITLE HEADING: '+blog.id);
    let dateHolder = document.createElement('span');
    dateHolder.classList.add('date');
    let dateText = document.createTextNode('6 Jan 2019'); //

    blogHeading.appendChild(headingText);
    dateHolder.appendChild(dateText);
   ...