diff --git a/100_projects/94-emoji-star-rating/index.html b/100_projects/94-emoji-star-rating/index.html new file mode 100644 index 0000000..a0c22b8 --- /dev/null +++ b/100_projects/94-emoji-star-rating/index.html @@ -0,0 +1,30 @@ + + + + + + + Document + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + diff --git a/100_projects/94-emoji-star-rating/main.js b/100_projects/94-emoji-star-rating/main.js new file mode 100644 index 0000000..cf92e37 --- /dev/null +++ b/100_projects/94-emoji-star-rating/main.js @@ -0,0 +1,25 @@ +const starsEl = document.querySelectorAll(".fa-star"); +const emojisEl = document.querySelectorAll(".far"); +const colorsArray = ["#f00000", "#F77820", "#8e9dc3", "#c1fa94", "#00a35e"]; + +updateRating(0); + +starsEl.forEach((starEl, index) => { + starEl.addEventListener("click", () => { + updateRating(index); + }); +}); + +function updateRating(index) { + starsEl.forEach((starEl, idx) => { + if (idx < index + 1) { + starEl.classList.add("active"); + } else { + starEl.classList.remove("active"); + } + }); + emojisEl.forEach((emojiEl) => { + emojiEl.style.transform = `translateX(-${index * 50}px)`; + emojiEl.style.color = colorsArray[index]; + }); +} \ No newline at end of file diff --git a/100_projects/94-emoji-star-rating/style.css b/100_projects/94-emoji-star-rating/style.css new file mode 100644 index 0000000..03435db --- /dev/null +++ b/100_projects/94-emoji-star-rating/style.css @@ -0,0 +1,45 @@ +body { + margin: 0; + display: flex; + justify-content: center; + height: 100vh; + align-items: center; + background-color:#FFD54F; +} +.feedback-container { + background-color: white; + width: 400px; + height: 250px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); + border-radius: 10px; + position: relative; +} +.emoji-container { + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 20%; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + overflow: hidden; +} +.far { + margin: 1px; + transform: translateX(0); + transition: transform 0.2s; +} +.rating-container { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 20%; +} +.fa-star { + color: lightgray; + cursor: pointer; +} +.fa-star.active { + color: #FFD54F; +} \ No newline at end of file