Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Star Rating Javascript Cho Website

Cách Tạo Star Rating Javascript Cho Website


Ngày 1 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo star rating javascript cho thiết kế và phát triển website nha.

Star rating pure JavaScript

HTML

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc cho chức năng này thông qua các thẻ HTML ở đoạn code dưới đây nha:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8">
    <title>Star Rating JavaScript</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <div class="container">
      <div class="post">
        <div class="text">Cảm ơn bạn đã đánh giá</div>
        <div class="edit"><i class="fas fa-edit"></i></div>
      </div>
      <div class="star-rating">
        <input type="radio" name="rate" id="rate-5">
        <label for="rate-5" class="fas fa-star"></label>
        <input type="radio" name="rate" id="rate-4">
        <label for="rate-4" class="fas fa-star"></label>
        <input type="radio" name="rate" id="rate-3">
        <label for="rate-3" class="fas fa-star"></label>
        <input type="radio" name="rate" id="rate-2">
        <label for="rate-2" class="fas fa-star"></label>
        <input type="radio" name="rate" id="rate-1">
        <label for="rate-1" class="fas fa-star"></label>
        <form action="#">
          <header></header>
          <div class="textarea">
            <textarea cols="30" placeholder="Miêu tả nhận xét của bạn về sản phẩm"></textarea>
          </div>
          <div class="btn">
            <button type="submit"> Đánh Giá</button>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

CSS

Tiếp theo chúng ta sẽ dùng các thuộc tính CSS cơ bản để phát triển giao diện cho chức năng star rating thông qua đoạn code sau đây nha:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #A2D2FF;
}
.container{
  position: relative;
  width: 400px;
  background: #000000;
  padding: 20px 30px;
  border: 1px solid #444;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.container .post{
  display: none;
}
.container .text{
  font-size: 25px;
  color: #fe7;
  font-weight: 500;
}
.container .edit{
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 16px;
  color: #fe7;
  font-weight: 500;
  cursor: pointer;
}
.container .edit:hover{
  text-decoration: underline;
}
.container .star-rating input{
  display: none;
}
.star-rating label{
  font-size: 40px;
  color: #444;
  padding: 10px;
  float: right;
  transition: all 0.2s ease;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label{   color: #fd4;
}
input:checked ~ label{
  color: #fd4;
}
input#rate-5:checked ~ label{
  color: #fe7;
  text-shadow: 0 0 20px #952;
}
#rate-1:checked ~ form header:before{
  content: "Tôi Ghét Sản Phẩm ";
}
#rate-2:checked ~ form header:before{
  content: "Tôi Không Thích Sản Phẩm ";
}
#rate-3:checked ~ form header:before{
  content: "Sản Phẩm Bình Thường ";
}
#rate-4:checked ~ form header:before{
  content: "Sản Phẩm Tốt ";
}
#rate-5:checked ~ form header:before{
  content: "Sản Phẩm Tuyệt Vời";
}
.container form{
  display: none;
}
input:checked ~ form{
  display: block;
}
form header{
  width: 100%;
  font-size: 25px;
  color: #fe7;
  font-weight: 500;
  margin: 5px 0 20px 0;
  text-align: center;
  transition: all 0.2s ease;
}
form .textarea{
  height: 100px;
  width: 100%;
  overflow: hidden;
}
form .textarea textarea{
  height: 100%;
  width: 100%;
  outline: none;
  color: #eee;
  border: 1px solid #333;
  background: #222;
  padding: 10px;
  font-size: 17px;
  resize: none;
}
.textarea textarea:focus{
  border-color: #444;
}
form .btn{
  height: 45px;
  width: 100%;
  margin: 15px 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  border: 1px solid #444;
  outline: none;
  background: #fe7;
  color: #000;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
form .btn button:hover{
  background: #FBFF00;
}

Javascript

Phần cuối cùng mình sẽ sử dụng javascript để tạo chức năng rating cho website bằng đoạn code dưới đây nha:

const btn = document.querySelector("button");
const post = document.querySelector(".post");
const widget = document.querySelector(".star-rating");
const editBtn = document.querySelector(".edit");
btn.onclick = ()=>{
  widget.style.display = "none";
  post.style.display = "block";
  editBtn.onclick = ()=>{
    widget.style.display = "block";
    post.style.display = "none";
  }
  return false;
}

Và kết quả bạn xem video bên dưới đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen đánh giá sản phẩm by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm các ví dụ khác về star rating thì xem ở đây nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách tạo star rating cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.