Skip to content
OverviewSolutions
8
Comments
3
Lucas Andrade
@lucasbsand

All comments

  • 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
  • Keith Bloodworth•110
    @N4thxnSubmitted 9 months ago

    I tried for awhile to nail the sizing as that's something that I've been struggling with a lot. If you have any tips or pointers please comment them! I think github pages shifted my box to the right a bit so if its messed up I'm sorry.

    QR Code Component

    1
    Lucas Andrade•230
    @lucasbsandPosted 9 months ago

    Your solution is very faithful to the example. If you don’t mind, I would like to give you two suggestions that could add more value to your project (one of them is valid even for future projects)

    • First, perhaps increasing the font size of the text in the h3 and p tags could make your QR code even more similar to the example

    • To calculate the ‘border-radius’ of a child element whose parent has a padding (as is the case with the image with the QR code), you should do the following: ‘parent-border-radius’ - ‘parent-padding’ = 'child-border-radius'. This will make the child have a border radius that is more consistent with that of the parent

    Note: this text was translated using an artificial intelligence, since I am not completely fluent in English, sorry if it is confusing what I meant to say

    Marked as helpful
    0
  • Patrick Gabriel•90
    @Gabriel0074Submitted 9 months ago

    Sou novato ...Aceito críticas contrutivas.. "errar faz parte do processo de aprendizagem"

    #to-tentando-#

    HTML5&CSS3

    2
    Lucas Andrade•230
    @lucasbsandPosted 9 months ago

    Daora mano, ansioso pela tua evolução!

    0