interactive-rating-component-main

Hi @alphardhafiz! Congratulations on finishing this challenge!🎈🎆✨

Now for what you can do better:

#Change the title of the repository

The title of your repository doesn't really make so much sense to someone checking out your projects and it can make it difficult for you to find it back later if you all your repo names are links. So I would advice you to change your repository name to something that describes your challenge like interactive-rating, rating-card or interactive-rating-component and etc.

#Write in your README.md

It may look like a waste of time, but it's a good excercise to reflect and document over your projects. You should have gotten a README-template.md or something when you downloaded this challenge, which is where you were supposed to write, but you can also edit the README.md, if you've already deleted the template one. Include screenshots of how your solution looks at desktops and smaller screen sizes, talk about what you need to improve and what you were struggling with, give some information about where someone can contact you(twitter, facebook, discord etc) or where they can look more into your projects(codepen, codewars) etc.

#3# Use the CSS var()-function

This tip can save you some time, when using the same colors many places in your css. The css var function can store anything you want from color, font-sizes or animation-stuff. Instead of copying and pasting the same color over and over again, you can place the color in a css variable and use specify that variable instead of frequently having to remember or copy-paste the colors. Here's an example:

/*css selector where you want to store your variable. Its common to have colors in the root so that you can access it from any part of this code. */

:root {
/* this is how it is you specify the variable with two `-` infront of the variable name of your choice and then you need a color. */
 --nameofvariable:color;
/* this is how it actually looks like */
--red:hsl(25, 97%, 53%);
--main-bg:#000000;
--lightBlue:aqua;
}

/* This is how you can apply it to your elements in css */

body{
/* PS: you need to wrap your variable in the `var`-function when you use it like you see here*/
background-color:var(--main-bg);
}

To learn more about variables I would recommend you this site:css-var

Instead of having a function for all of the rating points, you can do this:

const ratingPoint = document.getElementsByClassName("rating-point");
const activePoint = document.getElementsByClassName("active");
const container = document.querySelectorAll(".container");
const submit = document.getElementById("submit");
const illustrationImg = "images/illustration-thank-you.svg";
const star = document.querySelector(".star");
  const tittle = document.querySelector(".tittle");
  const description = document.querySelector(".description");
  const rating = document.querySelector(".rating");
  const submit = document.querySelector(".submit");
  let value = "";

ratingPoints.forEach((button) => {
        button.addEventListener('click', () => {
            value= button.textContent;
        });
    });

submit.addEventListener('click', () => {
    if (value > 0) {
 const subContainer = document.createElement("div");
  subContainer.setAttribute("id", "subContainer");
  container[0].appendChild(subContainer);

        star.style.display = "none";
        tittle.style.display = "none";
        description.style.display = "none";
        rating.style.display = "none";
        submit.style.display = "none";

         let imgRating = document.createElement("img");
  imgRating.classList.add("img-rating");
  imgRating.src = illustrationImg;
  subContainer.appendChild(imgRating);

  let cP1 = document.createElement("div");
  cP1.classList.add("container-review");
  let pReview = document.createElement("p");
  pReview.classList.add("paragraphReview");
  pReview.innerText = `You selected ${value} out of 5`;
  cP1.appendChild(pReview);
  subContainer.appendChild(cP1);

  let thankText = document.createElement("h1");
  //   thankText.classList("thank-text");
  thankText.innerText = `Thank you!`;
  subContainer.appendChild(thankText);

  let thankP = document.createElement("p");
  thankP.innerText = `We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!`;
  subContainer.appendChild(thankP);
}
});

instead of removing and adding a class of active to the ratingPoints you can do this in your css.

.rating-point:focus {
    background-color: hsl(216, 12%, 54%);
    color: white;
}

I hope that you will find this comment helpful, but if you misunderstood something or there's a problem with the code I showed you, then you can reply to me here.

Happy coding!🖥💻

Hello Buci!

There are two approaches to your more optimal JavaScript than the one you implemented. One would be to implement a single listener (click) method for all buttons and loop through them to detect when the button was clicked. Something similar to this 👇

for(let button of buttons) {
    button.addEventListener("click", () => {
        "implement whatever you want to do" 
}

The other would be to implement a listener (click) method for the container ( parent ) of the buttons and then check if that parent element was clicked on a button and if so implement the functionality you need.

You will save 40 or more lines of code, which will make your website perform better.

You can check if you have any questions.

Greetings.🦾🦾🦾