gistfile1.txt

const commentForm = document.forms['commentForms'];
let titleError = document.getElementById("title_error");
let commentError = document.getElementById("comment_error");

var title = commentForm.Title;
var comment = commentForm.Comment;

title.addEventListener("blur", titleVerify, true);
comment.addEventListener("blur", commentVerify, true);

function titleVerify() {
  if (title.value != "") {
    titleError.innerHTML = "";
    return true;
  }
}
function commentVerify() {
  if (comment.value != "") {
    commentError.innerHTML = "";
    return true;
  }
}

function emptyForm() {
  title.value = '';
  comment.value = '';
  commentError.innerHTML = ""
}

commentForm.addEventListener('submit', commentFunction, false)
function commentFunction(event) {
  event.preventDefault();
  let commentObj = {};
  commentObj.title = commentForm.Title.value;
  commentObj.comment = commentForm.Comment.value;
  if (title.value == "") {
    titleError.textContent = "Title is required";
    title.focus();
    return false;
  }
  if (comment.value == "") {
    commentError.textContent = "Comment is required";
    comment.focus();
    return false;
  }

  fetch(`${BaseUrl}posts`, {
    method: 'post',
    headers: {
      'Accept': 'application/json, text/plain, */*',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(commentObj)
  })
    .then(res => res.json())
    .then(data => {
      console.log(data)
    })
    .catch(err => {
      console.log(err)
    })
  emptyForm()
};




fetchBlog()
function fetchBlog(limit = 0, numberOfPosts = 5) {
  fetch(`${BaseUrl}posts?_start=${limit}&_limit=${numberOfPosts}`)
    .then((res) => res.json())
    .then((data) => userData(data))
    .catch((err) => {
      document.querySelector('.blogError').innerHTML = 'Fail to fetch:Check Your Internet Connection';
    });
}



let total_data = 100;
let currentPage = 1;
let noOfPages = 5;

let prev = document.querySelector('.previous');
let next = document.querySelector('.next');
let current = document.querySelector('.current');
let total = document.querySelector('.total');

 total.innerHTML = `${100/5 + 'pages'}`;

prev.addEventListener('click',(e)=>{
  fetchBlog(limit = 0);
  currentPage--
  current.innerHTML = `${currentPage + 'of'}`;
})
next.addEventListener('click',(e)=>{
  fetchBlog(limit = 5);
  currentPage++
  current.innerHTML = `${currentPage + 'of'}`;
})

let link = document.querySelector('.pagination');
link.addEventListener('click', paginateFunction)

function paginateFunction(e) {
  if (e.target.innerHTML == 1) {
    
    fetchBlog(limit = 5);
  }
  if (e.target.innerHTML == 2) {
    fetchBlog(limit = 10)
  }

  if (e.target.innerHTML == 3) {
    fetchBlog(limit = 15)
  }
  if (e.target.innerHTML == 4) {
    fetchBlog(limit = 20)
  }
  setTimeout(() => {
    window.scroll({
      top: 50, 
      left: 0, 
      behavior: 'smooth'
    });
  }, 1000);
}




function userData(params) {
var companyUsers = {}

params.forEach(function(user){
  companyUsers[user.companyId] = user;
});

var res = CommentRes.map(function(sub){
  var user = companyUsers[sub.companyId];  
  if(user){
    for(var key in user){
      sub[key] = user[key]
    }
  }
  return sub;
});

blogpost(res)
}


function blogpost(data) {
  const markup = ` <div class="row py-5">
        ${data.map((item, index) => `
                <div class ="col-lg-8 mt-4 mx-auto ">
                <a  href="../postComment.html?postId=${item.id}" class="aTagPost">
                <div class = "card myCard"> 
                  
                  <img src =${item.img} alt ="img" data-key='${index}' class = "blog_image"/>
                  
                  <div class = "ml-3">
                  <p class = "Comment_name">${CapitaliseFirstLetter(item.title.substring(0, 15))}</p>
                  <p class = "post_body">${CapitaliseFirstLetter(item.body.substring(0, 150))}</p>
                  
                  <span class = "float-right ml-1 font-weight-bolder">Comments</span>
                  <span class = "float-right commenNum font-weight-bolder">5</span>
                  </div>
                    </div> 
                </a>
                <div>
                  <form class = "mt-2 commentForm">
                    <div class = "d-flex">
                       <input type="text" id = "comment" class = "form-control commentInput" placeholder = "Add a comments" />
                       <button type= "submit"> Comment</button>
                    </div>
                  </form>
                </div>
                <div class = "commenting py-4">
                
                  <div class = "mr-4 sideIcons">${item.icons}</div>
                    <div>                    
                    <span class = "commentHeaderP">${item.header}</span>
                    <span class= "font-weight-bold thumbs"><em>${item.hrs}</em></span>
                    <p>${item.commentParagraph}</p>
                    
                    <ul class = "postLikes">
                    <li><a href = "">${'Reply'}</a></li>
                    <li><a href = "">Share</a></li>
                    <li >${item.likes +' likes'} </li>
                    <li class="thumbs">${item.thumbsUp} </li>
                    <li class="thumbs">${item.thumbsDown} </li>
                    </ul>
                    </div>
                </div>
                
                </div>
               
                `
  )}     
                </div>`;
  document.querySelector('.blogRow').innerHTML = markup
}