[Instagram Clone]Main Page Functions

Instagram Clone Coding Using HTML, CSS, and Vanilla Javascript

JavaScript

-Add comment
1) Add the comment below the post when the user fills the input field and press enter or click the post button

const input = document.querySelector('.comment-box');
const postBtn = document.querySelector('.comment-btn');
const commentHere = document.querySelector('.comment-place');

const onAdd = () => {
  const text = input.value;

  const cmt = document.createElement('p');
  cmt.innerHTML = text;

//add like comment button
  const like = document.createElement('button');
  like.setAttribute('class', 'cmt-btn');
  like.innerHTML = '<img src="img/like.png">';
  like.addEventListener('click', firstClick);

//add delete button
  const del = document.createElement('button');
  del.setAttribute('class', 'cmt-btn');
  del.innerHTML = '<img src="img/delete.png">';

  commentHere.appendChild(cmt);
  commentHere.appendChild(like);
  commentHere.appendChild(del);
};

postBtn.addEventListener('click', () => {
  onAdd();
});

input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') onAdd();
  return;
});

2) Remove the text in the input field after adding the comment and set the cursor position back to the beginning of the field

const onAdd = () => {
  ...
  input.value = '';
  input.focus();
};

3) If the user didn't write anything in the comment field but clicked the button or entered, make sure nothing happens

const onAdd = () => {
...
  if (input.value === '') {
      input.focus();
      return;
  }
...
};

-Like/Dislike comment
If the user clicks the like button, change the colour of the button to red. If they click it once more, change it back to the initial icon.

const onAdd = () => {
...
  const like = document.createElement('button');
  like.setAttribute('class', 'cmt-btn');
  like.innerHTML = '<img src="img/like.png">';
  like.addEventListener('click', firstClick);

  function firstClick() {
      like.innerHTML = '<img src="img/liked.png">'
      this.removeEventListener('click', firstClick);
      like.onclick = secondClick;
  }
  function secondClick() {
      like.innerHTML = '<img src="img/like.png">';
      like.addEventListener('click', firstClick);
  }
...
};

-Delete comment

const onAdd = () => {
  ...
  const del = document.createElement('button');
  del.setAttribute('class', 'cmt-btn');
  del.innerHTML = '<img src="img/delete.png">';
  del.addEventListener('click', () => {
    commentHere.removeChild(cmt);
    commentHere.removeChild(like);
    commentHere.removeChild(del);
  })
...
};

Output 👇

To Do✔️

-Refactoring

Entire Code 👇

const input = document.querySelector('.comment-box');
const postBtn = document.querySelector('.comment-btn');
const commentHere = document.querySelector('.comment-place');

const onAdd = () => {
  const text = input.value;

  if (input.value === '') {
      input.focus();
      return;
  }

  const cmt = document.createElement('p');
  cmt.innerHTML = text;

  const like = document.createElement('button');
  like.setAttribute('class', 'cmt-btn');
  like.innerHTML = '<img src="img/like.png">';
  like.addEventListener('click', firstClick);

  function firstClick() {
      like.innerHTML = '<img src="img/liked.png">'
      this.removeEventListener('click', firstClick);
      like.onclick = secondClick;
  }
  function secondClick() {
      like.innerHTML = '<img src="img/like.png">';
      like.addEventListener('click', firstClick);
  }

  const del = document.createElement('button');
  del.setAttribute('class', 'cmt-btn');
  del.innerHTML = '<img src="img/delete.png">';
  del.addEventListener('click', () => {
    commentHere.removeChild(cmt);
    commentHere.removeChild(like);
    commentHere.removeChild(del);
  })

  commentHere.appendChild(cmt);
  commentHere.appendChild(like);
  commentHere.appendChild(del);
  input.value = '';
  input.focus();
};

postBtn.addEventListener('click', () => {
  onAdd();
});

input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') onAdd();
  return;
});