Javascript... Here we go again!

Community feedback

• 

  Bernardo Poggioni•6,450

  @R3ygoskiPosted 3 days ago

  Eae Bianca, seu projeto ficou muitíssimo bom, gostei muito dessa ideia de colocar um sistema para Dark Mode, ficou muito bom mesmo.

  Sobre a parte que você disse ter adicionado algumas animações, talvez porque estejam de forma mais sutis, digo isso pois não percebi um @keyframes ou transition/animation no CSS.

  Sobre as imagens, os togglers geralmente são feitos utilizando <button> que assim demonstra que é um elemento interativo da página, você pode ver como seria isso no meu CodePen

  Tanto que essa forma permite você fazer algumas animações, o que pode deixar mais interessante.

  Agora sobre não conseguir pegar as imagens, a abordagem mais simples é definir as imagens no seu HTML e gerenciar elas através do JS. Igual a forma que você fez, que é alterando o valor src.

  Seu código não precisa de aprimoramento, ele já está bom, me refiro ao JS. Mas algo que você pode utilizar, que não necessariamente é um aprimoramento, é utilizar a propriedade de objeto .classList ao invés de .style, que assim você consegue gerenciar as classes de um elemento, daí não precisando adicionar Estilo Inline, mas isso é algo opcional.

  Sim gostei dessa feature que você adicionou, única coisa que eu faria diferente é utilizar ela como <button> ao invés de uma <img/>, pois tem valor semântico, indica que é um elemento interativo, e evita uma parte do JS. E um "bônus" é que eu também adicionaria ao Local Storage, o que permitiria que o tema escolhido ficasse salvo quando eu voltasse na página depois.

  E sobre a semântica, o projeto está pouco semântico, mostrarei algumas tags que poderiam ficar mais semânticas:

  • div.texts poderia ser uma <header> já que é a introdução da sua página.
  • h1 e h2, poderia mudar essa estrutura para <h1><span></span></h1>, que assim você não dividiria o título em título e subtítulo.
  • div.container poder ser uma <section> já que ela está englobando elementos tematicamente relacionados, que são as features que o site oferece.
  • div.cards cada uma dessas poderia ser uma <article> pois são elementos autocontidos, que tem valores por si próprios.

  E algumas sugestões de desafios que podem ser melhores para praticar o JS:

  • FAQ Accordion
  • Rating Card
  • Article Preview
  • Cooming Soon

  E é isso! Novamente parabéns pela conclusão do projeto e por ter implementado uma nova feature, isso é ótimo pra evoluir na programação, continue assim que você está no caminho certo. E caso tenha ficado qualquer dúvida, você já sabe.

  Marked as helpful

  1

  ---

  

  Professora Bianca•140

  @ProfessoraBiancaPosted 3 days ago

  @R3ygoski Nossa, não sei o que faria sem você! hahahah

  Sobre eu ter usado <img> e não <button> : Eu comecei tentando criar um <button> , mas não conseguia inserir uma imagem. A maneira como você fez no code pen, criando um circulo pelo CSS faz muito mais sentido.

  Geralmente eu pesquiso bastante na internet pra tentar fazer tudo sozinha, mas já percebi que o pessoal (muitas vezes) complica demais o que deveria ser simples. hahahahaha

  Sobre a semântica HTML: Eu sempre fico com receio de utilizá-las... será que tal elemento seria mesmo um <article> ? E por aí vai... Vou tomar coragem no próximo desafio!

  Muito obrigada por sempre ajudar o pessoal por aqui!

  1
• 

  EDMON NASCIMENTO SANTOS•100

  @Edmon-NascimentoPosted 4 days ago

  Great job! Otherwise, you can fix the font-family and font-color. Success!

  0