Hi dear readers, Hope you are doing awesome. Today in this blog you’ll learn how can create Like And Dislike Rating Page using Html, CSS And JavaScript. And you can consider this one a well javascript project such as you are college's student. Guys, To create this JS project is not so complicated, if you knows some basic of JS then you can easy build this one because to create it with just requires few lines of JS codes. Here is main syntax of javascript to working of this rating page that is "parseInt[written in Camel Case]" and with helps of this js syntax numbers of like and dislike increases when user click on thumb -up & -down buttons.

We have also linked a video tutorial which has given below for you. Where we have shown you to create this rating page using javascript in very simple and easey steps and we hope to all of you that given tutorial may be cleared your whole doubts.

And for your more clearance, we attached a download source code file link in the last of this post also just scroll down and download it now to more practice. Don't worry guys, Given Source-Code is almost free of cost.

Watch Tutorial of Create Like And Dislike Rating Page Using Html, CSS And JavaScript

Don't worry, We always go to learn web development codes to you by taking simple and easy steps. And we are 100% sure about our codes which is always too simple & clear to understand and helps you learn something new through every blog's post.

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
      <link rel="stylesheet" type="text/css" href="style.css">
      <title>Create Like And Dislike Rating Page Using Html, CSS And JS</title>
  </head>
  <body>
      <div class="container">
          <h2>Voting System</h2>
          <img src="img.jpg"/>
          <div class="voting">
              <button id="likebtn">
                  <i class="fa fa-thumbs-up"></i>
              </button>
              <input type="number" id="input1" value="0" name="">
              <button id="dislikebtn">
                  <i class="fa fa-thumbs-down"></i>
              </button>
              <input type="number" id="input2" value="0" name="">
          </div>
      </div>

      <!-- JavaScript Code start from here -->
      <script type="text/javascript">
          let likebtn = document.querySelector('#likebtn');
          let dislikebtn = document.querySelector('#dislikebtn');
          let input1 = document.querySelector('#input1');
          let input2 = document.querySelector('#input2');

          likebtn.addEventListener('click',()=>{
              input1.value = parseInt(input1.value) + 1;
              input1.style.color = "#12ff00";
          })
          dislikebtn.addEventListener('click',()=>{
              input2.value = parseInt(input2.value) + 1;
              input2.style.color = "#ff0000";
          })
      </script>
      <!-- JavaScript Code end to here -->
  </body>
  </html>

CSS CODE:

  *{
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      outline: none;
  }
  body{
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #000;
  }
  .container{
      border: 3px solid #303030;
      padding: 20px;
      width: 350px;
      text-align: center;
      border-radius: 4px;
      position: relative;
  }
  h2{
      color: #fff;
      padding: 20px 0;
      font-size: 30px;
  }
  img{
      position: relative;
      height: 100%;
      width: 100%;
      padding-bottom: 10px;
  }
  .voting{
      position: relative;
      border: 3px solid #303030;
      border-radius: 4px;
      padding: 5px;
      display: flex;
      justify-content: center;
  }
  input{
      width: 50px;
      border: none;
      background: none;
      color: #919191;
      font-size: 30px;
      margin: 0 10px;
      pointer-events: none;
  }
  button{
      color: #fff;
      background: none;
      border: none;
      font-size: 30px;
      padding: 0 15px;
      margin: 10px 0;
      margin-left: 20px;
      cursor: pointer;
  }
  button:active{
      color: #004eff;
      transform: scale(1.2);
  }

How To Create Like And Dislike Rating Page Using Html, CSS And JavaScript

Watch Tutorial of Create Like And Dislike Rating Page Using Html, CSS And JavaScript

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding