การสร้าง Star Ratings ด้วย Tailwind CSS

ในบทความนี้ เราจะมาเรียนรู้วิธีการสร้าง Star Ratings ที่สวยงามและมีการโต้ตอบ (interactive) ด้วย Tailwind CSS โดยจะครอบคลุมตั้งแต่โครงสร้าง HTML พื้นฐาน การปรับแต่ง CSS ด้วย Tailwind ไปจนถึงการจัดการค่า Rating ด้วย JavaScript เพื่อให้ผู้ใช้สามารถให้คะแนนและแสดงผลคะแนนได้อย่างถูกต้อง

สิ่งที่ต้องมี

ความเข้าใจพื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript
ติดตั้ง Tailwind CSS ในโปรเจกต์ของคุณแล้ว (หากยังไม่ได้ติดตั้ง สามารถดูวิธีการติดตั้งได้จาก Tailwind CSS documentation)

ขั้นตอนการสร้าง Star Ratings

เราจะแบ่งขั้นตอนการสร้าง Star Ratings ออกเป็นส่วนๆ เพื่อให้ง่ายต่อการทำความเข้าใจและนำไปปรับใช้

1. โครงสร้าง HTML

เริ่มต้นด้วยการสร้างโครงสร้าง HTML สำหรับ Star Ratings ของเรา โดยเราจะใช้ div เป็น container หลัก และใช้ input type radio สำหรับแต่ละดาว เพื่อให้ผู้ใช้สามารถเลือกคะแนนได้

<div class="flex items-center">
  <p class="mr-2 text-gray-700">Rate this product:</p>
  <div class="flex flex-row-reverse">
    <input type="radio" id="star5" name="rating" value="5" class="hidden peer" />
    <label for="star5" class="cursor-pointer peer-checked:text-yellow-500">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
      </svg>
    </label>

    <input type="radio" id="star4" name="rating" value="4" class="hidden peer" />
    <label for="star4" class="cursor-pointer peer-checked:text-yellow-500">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
      </svg>
    </label>

    <input type="radio" id="star3" name="rating" value="3" class="hidden peer" />
    <label for="star3" class="cursor-pointer peer-checked:text-yellow-500">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
      </svg>
    </label>

    <input type="radio" id="star2" name="rating" value="2" class="hidden peer" />
    <label for="star2" class="cursor-pointer peer-checked:text-yellow-500">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
      </svg>
    </label>

    <input type="radio" id="star1" name="rating" value="1" class="hidden peer" />
    <label for="star1" class="cursor-pointer peer-checked:text-yellow-500">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
      </svg>
    </label>
  </div>
</div>

คำอธิบาย:

<div class="flex items-center">: ใช้ flexbox เพื่อจัดเรียง Label และ Star Ratings ให้อยู่ในแนวเดียวกันและจัดกึ่งกลางในแนวตั้ง
<div class="flex flex-row-reverse">: ใช้ flexbox เพื่อจัดเรียงดาวจากขวาไปซ้าย (5 ดาวอยู่ด้านขวาสุด)
<input type="radio" id="star5" name="rating" value="5" class="hidden peer" />: สร้าง radio button สำหรับดาวแต่ละดวง โดยมี id ที่สัมพันธ์กับ label, name ที่เหมือนกันเพื่อให้เลือกได้เพียงค่าเดียว, value ที่เป็นคะแนน, และ class="hidden peer" เพื่อซ่อน radio button และใช้ label ในการแสดงผล
<label for="star5" class="cursor-pointer peer-checked:text-yellow-500">: สร้าง label ที่เชื่อมโยงกับ radio button แต่ละดวง cursor-pointer เปลี่ยน cursor เป็น pointer เมื่อ hover, peer-checked:text-yellow-500 เปลี่ยนสีของดาวเป็นสีเหลืองเมื่อ radio button ที่สัมพันธ์กันถูกเลือก
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">: ใช้ SVG icon รูปดาว โดย w-5 h-5 กำหนดขนาด, fill="currentColor" ทำให้สีของดาวเป็นไปตาม text color ที่กำหนดไว้ใน label

2. การปรับแต่ง CSS ด้วย Tailwind

ในส่วนของ CSS เราได้ใช้ Tailwind classes เพื่อจัดการ layout, styling และ state ของ Star Ratings

การใช้ Peer Variant:

เราใช้ peer-checked variant ของ Tailwind เพื่อเปลี่ยนสีของดาวเมื่อ radio button ที่สัมพันธ์กันถูกเลือก class peer บน input ทำให้เราสามารถ style sibling element (ในที่นี้คือ label) เมื่อ input นั้นถูก checked

การซ่อน Radio Buttons:

เราใช้ hidden class เพื่อซ่อน radio buttons และใช้ labels ในการแสดงผลและจัดการการคลิก

3. การจัดการ Rating Value ด้วย JavaScript (Optional)

หากคุณต้องการจัดการ Rating Value ด้วย JavaScript เช่น ส่งค่าไปยัง backend หรือแสดงผลค่า Rating ที่เลือก เราสามารถเพิ่ม JavaScript code เพื่อจัดการ event listener และดึงค่า Rating ได้

const ratingInputs = document.querySelectorAll('input[name="rating"]');

ratingInputs.forEach(input => {
  input.addEventListener('change', (event) => {
    const ratingValue = event.target.value;
    console.log('Rating selected:', ratingValue);
    // You can send this value to your backend or update the UI as needed
  });
});

คำอธิบาย:

document.querySelectorAll('input[name="rating"]'): เลือก radio buttons ทั้งหมดที่มี name="rating"
input.addEventListener('change', (event) => { ... }): เพิ่ม event listener สำหรับ event change บน radio button แต่ละตัว
const ratingValue = event.target.value;: ดึงค่าของ radio button ที่ถูกเลือก
console.log('Rating selected:', ratingValue);: แสดงค่า Rating ที่เลือกใน console (คุณสามารถเปลี่ยนเป็น logic อื่นๆ เช่น ส่งค่าไปยัง backend)

4. กรณีใช้งานจริงและข้อผิดพลาดที่พบบ่อย

กรณีใช้งานจริง:

Product Reviews: ใช้ Star Ratings เพื่อให้ผู้ใช้สามารถให้คะแนนสินค้า
Service Feedback: ใช้ Star Ratings เพื่อเก็บ feedback เกี่ยวกับบริการ
Movie/Game Ratings: ใช้ Star Ratings เพื่อให้ผู้ใช้สามารถให้คะแนนภาพยนตร์หรือเกม

ข้อผิดพลาดที่พบบ่อย:

ลืมใส่ name attribute: หาก radio buttons ไม่มี name attribute ที่เหมือนกัน ผู้ใช้จะสามารถเลือกได้หลายดาว
CSS ไม่ถูกต้อง: Tailwind classes ไม่ถูกต้องหรือขาดหายไป ทำให้การแสดงผลไม่เป็นไปตามที่ต้องการ
JavaScript error: JavaScript code มีข้อผิดพลาด ทำให้การจัดการ Rating Value ไม่ถูกต้อง

5. สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการสร้าง Star Ratings ที่ interactive ด้วย Tailwind CSS โดยครอบคลุมตั้งแต่โครงสร้าง HTML, การปรับแต่ง CSS ด้วย Tailwind และการจัดการ Rating Value ด้วย JavaScript คุณสามารถนำความรู้ที่ได้จากบทความนี้ไปปรับใช้ในการสร้าง Star Ratings สำหรับโปรเจกต์ของคุณได้อย่างง่ายดาย

ในบทความถัดไป เราจะพูดถึงการสร้าง File Uploaders ด้วย Tailwind CSS