All Tracks/lab favorite icon toggler/
Đang tải...
Hướng dẫn thử thách
1 / 1

Build a Favorite Icon Toggler

In this lab you will use JavaScript click events to toggle the appearance of a favorite icon. When the heart icon is clicked, the appearance of the heart changes from empty to filled, and vice versa. **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have an unordered list with three items. 2. The unordered list should have the class `item-list`. 3. The three list items should contain the item name followed by a `button` element with the class `favorite-icon`. 4. The `button` element should contain the code `&#9825;` initially to represent an empty heart. 5. When a `button` element containing a heart is clicked, you should add a class named `filled` to the clicked `button` if it's not already present, and remove it, if it is. 6. You should have a class selector that targets the `filled` class and sets some CSS properties. 7. When a `button` element containing a heart is clicked, the heart symbol should toggle between `&#9825;` (empty heart) and `&#10084;` (filled heart), depending on its current state. **Note:** Be sure to link your JavaScript file in your HTML. (Ex. `<script src="script.js"></script>`)
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.sh
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.