How to toggle between a like/dislike button with CSS and JavaScript?

Javascript Web Development Object Oriented Programming

The toggle between one button to another button means it allows the user to switch one window to another window, it allows to turn on and off a function, allows to change settings, and provides much more functionality.

But in this article we have to write a program with the use of CSS and JavaScript to toggle between like and dislike buttons.

To do so, let’s create three separate files for HTML, CSS, and JavaScript −

HTML file(index.html)

The HTML file is required to create buttons, headings, tags, etc. The HTML file must be saved using the .html file extension.

Following is the HTML code −

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Toggle</title>
</head>
<body>
   <div class="toggle">
      <h3>Toggle between a like/dislike button with CSS and JavaScript?</h3>
      <p>click on the below button to toggle between the like and dislike button</p>
      <button id = 'btn'><i class = "fa fa-thumbs-up"></i></button>
      <div class="like">
         <span id = 'like'>Like<i class = "fa fa-thumbs-up"></i></span>
      </div>
      <div class="dislike">
         <span id = 'dislike'>Dislike<i class = "fa fa-thumbs-down"></i></span> 
      </div>
   </div>
</body>
</html>

CSS file(style.css)

This is the CSS file, and make sure that the file name must be saved with the .css extension. In CSS we will write a code to manage the styling of the whole HTML page.

Following is the snippet of code to connect the CSS file with the HTML file −

<link rel = ‘stylesheet’ href = ‘style.css’>

Following is the CSS code

style.css

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

body{
   display: grid;
   place-items: center;
   height: 100vh;
   overflow-x: hidden;
}

.toggle{
   width: 500px;
   height: 300px;
   border: 5px solid black;
   border-radius: 10px;
}

h3{
   position: relative;
   top: 50px;
   left: 50px;
}

p{
   position: relative;
   top: 60px;
   left: 50px;
}

button{
   width: 100px;
   height: 100px;
   background-color: blue;
   color: white;
   border-radius: 50px;
   font-size: 60px;
   cursor: pointer;
   position: relative;
   left: 200px;
   top: 100px;
}

i{
   width: 100px;
   height: 100px;
   background-color: transparent;
   position: relative;
   top: 10px;
}

span{
   position: relative;
   top: 100px;
   color: green;
   font-weight: 800;
   font-size: 20px;
}

#dislike
{
   position: relative;
   left: 210px;
   color: red;
}

.like{
   position: relative;
   top: -80px;
   left: 50px;
}

.like i{
   position: relative;
   top: 0px;
   left: 10px;
}

.dislike{
   position: relative;
   top: -180px;
   left: 155px;
}

.dislike i{
   position: relative;
   top: 3px;
   left: 10px;
}

JavaScript file(index.js)

In JavaScript, we will write code to manage the toggle activity, we will fetch the buttons and apply some toggle conditions. The file is saved using the extension .js.

Following is the snippet of code to connect the CSS file with the HTML file −

<script src = ‘index.js’></script>

Following is the JavaScript program −

index.js

let like = document.querySelector('.fa');
document.getElementById('btn').style.background = 'blue';
like.addEventListener("click", (e)=> {
   let like = document.querySelector('.fa');
   e.target.classList.toggle("fa-thumbs-down");
});

Example

On Executing above HTML, CSS and JavaScript


<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Toggle</title>
   <style>
   *{
         padding: 0;
         margin: 0;
         box-sizing: border-box;
      }

      body{
         display: grid;
         place-items: center;
         height: 100vh;
         overflow-x: hidden;
      }

      .toggle{
         width: 500px;
         height: 300px;
         border: 5px solid black;
         border-radius: 10px;
      }

      h3{
         position: relative;
         top: 50px;
         left: 50px;
      }

      p{
         position: relative;
         top: 60px;
         left: 50px;
      }

      button{
         width: 100px;
         height: 100px;
         background-color: blue;
         color: white;
         border-radius: 50px;
         font-size: 60px;
         cursor: pointer;
         position: relative;
         left: 200px;
         top: 100px;
      }

      i{
         width: 100px;
         height: 100px;
         background-color: transparent;
         position: relative;
         top: 10px;
      }

      span{
         position: relative;
         top: 100px;
         color: green;
         font-weight: 800;
         font-size: 20px;
      }

      #dislike
      {
         position: relative;
         left: 210px;
         color: red;
      }

      .like{
         position: relative;
         top: -80px;
         left: 50px;
      }

      .like i{
         position: relative;
         top: 0px;
         left: 10px;
      }

      .dislike{
         position: relative;
         top: -180px;
         left: 155px;
      }

      .dislike i{
         position: relative;
         top: 3px;
         left: 10px;
      }
   </style>
</head>
<body>
   <div class="toggle">
      <h3>Toggle between a like/dislike button with CSS and JavaScript?</h3>
      <p>click on the below button to toggle between the like and dislike button</p>
      <button id = 'btn'><i class = "fa fa-thumbs-up"></i></button>
      <div class="like">
         <span id = 'like'>Like<i class = "fa fa-thumbs-up"></i></span>
      </div>
      <div class="dislike">
         <span id = 'dislike'>Dislike<i class = "fa fa-thumbs-down"></i></span> 
      </div>
   </div>
   <script>
      let like = document.querySelector('.fa');
      document.getElementById('btn').style.background = 'blue';
      like.addEventListener("click", (e)=>
      {
         let like = document.querySelector('.fa');
         e.target.classList.toggle("fa-thumbs-down");
      });
   </script>
</body>
</html>

As you can see in the above program, we have used HTML, CSS, and JavaScript. Through HTML we build the structure of the content page, and CSS manages the styling of the whole HTML page.

In JavaScript, we fetch the icon which we have created in the HTML through the query selector. And then, we used the addEventListener method and e.target.classList.toggle to toggle between the like and dislike button.