All Products ({{products.length}})

Placeholder image

{{product.title}}

{{product.brand}}

{{product.price}} ฿

Cart ({{cart.length}}) Clear
Placeholder image

{{item.title}}

{{item.brand}}

{{item.price}}

โจทย์

ให้แก้ไข code ในไฟล์ ex2/main.js และ ex2/index.html

ข้อ 1 เปลี่ยนชื่อร้านที่อยู่ใน Navbar เป็นชื่อเล่นของตัวเอง

ข้อ 2 แสดงข้อมูลของ products ให้ออกมาในรูปแบบของ Card โดยจะมีตัวอย่าง Card มาให้ (<div id="card_product">) และหลังข้อความว่า "All Products ()" ในวงเล็บให้แสดงจำนวนสินค้าทั้งหมดด้วย

ข้อ 3 ในแต่ละ card จะมีไอคอนดาวอยู่สองแบบ จะขอเรียกว่า ดาวทึบ () กับดาวใส () ละกัน โดยไอคอนดาวจะแสดงตามสถานะของ is_favorite ของสินค้าแต่ละชิ้น

  • แสดง ดาวทึบ () เมื่อ is_favorite = true
  • แสดง ดาวใส () เมื่อ is_favorite = false
    • และเมื่อคลิกที่ไอคอนดาวที่แสดงอยู่ สถานะของ is_favorite ของสินค้าชิ้นนั้นจะสลับกัน จาก true เป็น false จาก false เป็น true แน่นอนว่าไอคอนดาวก็จะเปลี่ยนด้วย

    ข้อ 4 เมื่อสถานะของ is_favorite = true ให้พื้นหลังของ card นั้น ๆ เปลี่ยนเป็นสี warning-light ด้วย

    ข้อ 5 แต่ละ Card จะมีไอคอนรูปตะกร้าสินค้ามาให้ด้วย(มุมขวาล่าง) โดยเมื่อกดที่ไอคอนดังกล่าว Object ของสินค้าจะถูกเพิ่มเข้ามาใน Array cart และในส่วนของ Cart ด้านขวามือ ก็จะต้องแสดงรายการสินค้าที่ถูกเพิ่มมาใน Cart ด้วย รวมไปถึงจำนวนของรายการสินค้าในตะกร้า โดยจะแสดงอยู่ในวงเล็บของคำว่า "Cart ()" และเมื่อกดปุ่ม Clear รายการสินค้าที่อยู่ในตะกร้าก็จะต้องหายไป