├── search.svg
├── star.svg
├── LICENSE
├── index.html
├── styles.css
└── script.js
/search.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/star.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 WebDevSimplified
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
11 |
16 |
30 |
31 |
32 |
35 |
36 |
37 |
41 |
Write a review
42 |
4 | `
6 |
7 | const REVIEWS = {
8 | 5: 120,
9 | 4: 40,
10 | 3: 20,
11 | 2: 0,
12 | 1: 0,
13 | }
14 |
15 | const totalReviews = Object.values(REVIEWS).reduce((sum, value) => {
16 | return sum + value
17 | }, 0)
18 | const averageReview =
19 | Object.entries(REVIEWS).reduce((sum, [value, quantity]) => {
20 | return sum + value * quantity
21 | }, 0) / totalReviews
22 |
23 | averageReviewElem.dataset.endValue = Math.round(averageReview * 10) / 10
24 | averageReviewElem.textContent = 0
25 |
26 | Object.entries(REVIEWS)
27 | .sort(([a], [b]) => b - a)
28 | .forEach(([value, quantity]) => {
29 | const reviewNumber = document.createElement("div")
30 | reviewNumber.textContent = value
31 | reviewNumber.classList.add("review-number")
32 | reviewRowsContainer.append(reviewNumber)
33 | const starIconWrapper = document.createElement("div")
34 | starIconWrapper.innerHTML = starIcon
35 | reviewRowsContainer.append(starIconWrapper)
36 | const reviewBar = document.createElement("div")
37 | reviewBar.dataset.endValue = (quantity / totalReviews) * 100
38 | reviewBar.classList.add("review-bar")
39 | reviewBar.classList.toggle("empty", quantity === 0)
40 | reviewRowsContainer.append(reviewBar)
41 | const reviewCount = document.createElement("div")
42 | reviewCount.dataset.endValue = quantity
43 | reviewCount.textContent = 0
44 | reviewCount.classList.add("review-count")
45 | reviewRowsContainer.append(reviewCount)
46 | })
47 |
48 | let timeOffset
49 | const DURATION = 500
50 | function update(time) {
51 | if (timeOffset != null) {
52 | const timeElapsed = time - timeOffset
53 | const newAverage = getNewValue(
54 | averageReviewElem.dataset.endValue,
55 | timeElapsed
56 | )
57 | averageReviewElem.textContent = Math.round(newAverage * 10) / 10
58 | const countElems = document.querySelectorAll(
59 | ".review-count[data-end-value]"
60 | )
61 | countElems.forEach(elem => {
62 | elem.textContent = Math.round(
63 | getNewValue(elem.dataset.endValue, timeElapsed)
64 | )
65 | })
66 | const reviewBars = document.querySelectorAll(".review-bar[data-end-value]")
67 | reviewBars.forEach(elem => {
68 | elem.style.setProperty(
69 | "--width",
70 | `${getNewValue(elem.dataset.endValue, timeElapsed)}%`
71 | )
72 | })
73 | if (timeElapsed >= DURATION) return
74 | requestAnimationFrame(update)
75 | } else {
76 | timeOffset = time
77 | requestAnimationFrame(update)
78 | }
79 | }
80 |
81 | function getNewValue(endValue, timeElapsed) {
82 | return Math.min((endValue * timeElapsed) / DURATION, endValue)
83 | }
84 |
85 | requestAnimationFrame(update)
86 |
--------------------------------------------------------------------------------