JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="post">
  <a href="#" class="like">
    <i class="fa-regular fa-heart active"></i>
  </a>
  <span class="like-count">43 Likes</span>
</div>


<div class="post">
  <a href="#" class="like">
    <i class="fa-regular fa-heart"></i>
  </a>
  <span class="like-count">54 Likes</span>
</div>


<div class="post">
  <a href="#" class="like">
    <i class="fa-regular fa-heart"></i>
  </a>
  <span class="like-count">15 Likes</span>
</div>


<div class="post">
  <a href="#" class="like">
    <i class="fa-regular fa-heart active"></i>
  </a>
  <span class="like-count">33 Likes</span>
</div>


<div class="post">
  <a href="#" class="like">
    <i class="fa-regular fa-heart active"></i>
  </a>
  <span class="like-count">27 Likes</span>
</div>

CSS

.post{
  border: solid 3px black;
  padding: 40px;
  margin: 10px;
}
.like{
  color: #000;
  text-decoration: none;
}
.active{
  color: red;
}

JavaScript

// Function to Handle Like Click Event

	// Find the i element
  
  // Find the span element

	// Find current likes count

  // Check if it has 'active' class name
  
  // If Yes
  		
      // Reduce the link count
      // Remove the active class
      
  // If No (Else)
  
  		// Increase the link count
      // Add the active class

	// Update the span text
  
// Find all a.like elements

// Iterate the HTML Collection

	// Add click Event Listener for each a.like