Interactive rating JS solution (HTML, CSS, JS)

Community feedback

• 

  Lucas Andrade•230

  @lucasbsandPosted 9 months ago

  Parabéns pelo design, ficou extremamente parecido! Eu vi seu código e observei que a maneira como você escreveu não é das mais performáticas, se não se importa, aqui vai algumas sugestões:

  1. No seu html, onde você colocou os botões, poderia ser utilizado um formulário como container e inputs do tipo rádio, além de um button do tipo submit. Exemplo:

  <form>
    <input type="radio" name="rating" id="rating-1" value="1"/ >
    <label for=rating-1>1</label>
  ...
  
    <button type="submit">Submit</button>
  </form>
  

  Dessa forma, você ganha vantagens na hora em que for manipular o seu formulário com js, por exemplo, você pode pegar o valor do input cujo valor foi enviado da seguinte da seguinte forma:

  const myForm = document.querySelector("form")
  
  myForm.addEventListener("submit", (e) => {
    // Previne o comportamento padrão do evento
    e.preventDefault()
  
    // define a variável value com o valor do input Rating selecionado quando o evento de envio de formulário é ativado
    const value = myForm.rating.value
    console.log(value)
  })
  

  O que esse código faria seria criar uma constante chamada myForm e adicionar um evento de submit (envio de formulário) nele e então mostrar no console o valor que eu estou enviando com o meu input.

  Sobre a troca dos cards, uma maneira que poderia ajudá-lo a poupar algumas linhas no seu js e tornar seu código mais limpo, seria escrever ambos os card em seu html e realizar a troca deles usando js, por exemplo:

  const myCards = document.querySelectorAll(".cards")
  
  // isso seria feito após o envio dos dados do formulário, claro
  myCards[0].style.display = 'none';
  myCards[1].style.display = 'flex';
  

  A vdd é que existem muitas maneiras diferentes de se chegar a um mesmo resultado, as formas como eu disse aqui talvez não sejam as mais eficazes possíveis tbm, mas foi uma das formas mais fáceis que eu pensei de fazer num primeiro momento usando html e js puro.

  Se alguém quiser pontuar algo que eu possa ter passado de maneira errada, ou outras formas de realizar essas tarefas, tbm estou disposto a ouvir.

  E desculpe caso tenha ficado confuso o que eu quis dizer, estou no celular e minha tela é bugada haha

  Marked as helpful

  1

  ---

  

  João Cardoso•10

  @JoaoCardosoDevPosted 9 months ago

  Muito obrigado pela resposta tão completa e cuidada. Agradeço imenso o tempo que dispensou para me dar feedback. As suas sugestões são excelentes, e vou com certeza levar o seu feedback para futuros projetos! @lucasbsand

  1

  

  Lucas Andrade•230

  @lucasbsandPosted 9 months ago

  De nada, mano, tamo ai pra isso! @JoaoCardosoDev

  1