Frontend Mentor | Lucas Andrade's profile

@JoaoCardosoDev

Submitted 8 months ago

What is the best method to change from the rating selection slate to the thank you slate? I got it working but I'm curious if there is a better method or even a standard for it.

Interactive rating JS solution (HTML, CSS, JS)

@lucasbsand

Posted 8 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:

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

Lucas Andrade

All comments

Interactive rating JS solution (HTML, CSS, JS)

QR Code Component

HTML5&CSS3