├── README.md ├── 1. template.html ├── 2. select.html ├── 3. hover and focus.html └── 4. reset selection.html /README.md: -------------------------------------------------------------------------------- 1 | # Vanilla JS Project: Star-Based Rating App 2 | 3 | The source code for my article series on building a star-based rating app. 4 | 5 | 1. [Part 1](https://gomakethings.com/creating-a-star-based-rating-app-with-vanilla-javascript/) 6 | 2. [Part 2](https://gomakethings.com/setting-a-star-rating-on-click-or-enter-with-vanilla-js/) 7 | 3. [Part 3](https://gomakethings.com/showing-star-based-ratings-on-hover-or-focus-with-vanilla-javascript/) 8 | 4. [Part 4](https://gomakethings.com/resetting-highlighting-for-our-star-based-rating-system/) 9 | -------------------------------------------------------------------------------- /1. template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ratings 5 | 6 | 38 | 39 | 40 | 41 |

Rate Me

42 | 43 |
44 | 60 |
61 | 62 | 63 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /2. select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ratings 5 | 6 | 42 | 43 | 44 | 45 |

Rate Me

46 | 47 |
48 | 64 |
65 | 66 | 67 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /3. hover and focus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ratings 5 | 6 | 42 | 43 | 44 | 45 |

Rate Me

46 | 47 |
48 | 64 |
65 | 66 | 67 | 147 | 148 | 149 | -------------------------------------------------------------------------------- /4. reset selection.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ratings 5 | 6 | 42 | 43 | 44 | 45 |

Rate Me

46 | 47 |
48 | 64 |
65 | 66 | 67 | 183 | 184 | 185 | --------------------------------------------------------------------------------