Mortgage Calculator using Js, SCSS and HTML

Community feedback

• 

  Bernardo Poggioni•7,030

  @R3ygoski

  Posted 4 months ago

  Olá Eduardo, parabéns pela conclusão do desafio, ele ficou muito bom.

  Sobre suas dúvidas, vou começar pelo SCSS, ele está correto em grande parte, só que tem um pequeno problema relacionado a manutenibilidade do código que seria essa parte de colocar as @media dentro dos seletores, recomendo separar seus .scss em diversos arquivos, tendo um próprio para responsivo.

  Tanto que uma dica mais pessoal minha, eu gosto de criar uma pasta scss e lá colocar um global.scss e nele importar todos outros .scss, algo assim:

  @use './abstract/var.scss';
  @use './components/input.scss';
  

  Pois isso ajuda muito na organização e separação dos SCSS assim não ficando um único arquivo gigante e cheio de informação.

  Sobre o JS, ele tem um erro, quando clicamos no botão ele reinicia a página, isso ocorre porque você usou a query no botão, mas você tinha que ter selecionado o <form>, ou seja, na parte de cálculo você pode colocar esse trecho:

  document.querySelector("form").addEventListener("submit", (event) => {//Restante do código
  

  Isso já fará com que a página não recarregue, mas mesmo assim a parte de resultado não será alterada, devido a você ter vários elementos fazendo com que a parte de resultados não apareça. São elas:

  #fullResultBox {
    display: none;
  }
  .fullResultBox {
    display: none;
    /*Restante do CSS*/
  }
  

  document.getElementById("fullResultBox").style.display = "none";
  

  Esses três trechos são redundantes, todos eles fazem isso:

  • style.display faz com que a secção não apareça, usando CSS-Inline
  • #fullResultBox faz com que a secção não apareça, usando id que tem menos prioridade que CSS Inline.
  • .fullResultBox faz com que a secção não apareça, usando classe que tem menos prioridade que id e CSS Inline.

  Então eu sugiro que você crie uma classe apenas, chamada hidden e utilize nela o display: none; daí quando você quiser esconder um trecho só usar um classList que assim você adiciona e remove a classe, exemplo:

  const fullResultbox = document.getElementById("fullResultBox");
  
  fullResultbox.classList.remove("hidden"); //Para Remover
  fullResultbox.classList.add("hidden"); //Para Adicionar
  fullResultbox.classList.toggle("hidden"); //Para Remover caso exista ou Adicionar caso não exista
  

  Outra dica, evite de repetir diversas vezes o document, por exemplo, sempre atribua o valor a uma variável, e deixe os document globais, no topo do seu JS, enquanto os específicos deixe-os dentro de funções, mas sempre atribuindo a uma variável, pois isso deixa seu código muito mais limpo e menos verboso, com fácil legibilidade.

  Outra dica quanto ao JS, opte sempre por utilizar as Template String, ao invés de concatená-las pois isso ajuda a deixar mais legível também.

  Ainda sobre o JS, você está formatando o resultado para inglês americano, só que no projeto, se utiliza a libra esterlina (£), que é o símbolo da moeda inglêsa, então o mais correto é utilizar: ('en-GB') que é o Inglês Britânico.

  Sobre o HTML, ele está muito verboso e possui muitas tags <div>, recomendo utilizar tags semânticas que assim fica mais fácil identificar alguns trechos, como por exemplo:

  • div.title poderia ser alterada pra uma <h2>.
  • div.calculation e div.result poderiam ser alteradas para uma <section>.
  • div.errorField poderia ser alterada para uma <span>.

  Também evitar o uso de camelCase para nome de classes pois isso deixa a leitura mais difícil, usar um kebab-case ou snake_case (não recomendo usar com BEM) ficam mais confortáveis, já que ajuda na legibilidade.

  E uma sugestão meio off-topic, sobre os commit, opte por dar nomes mais descritivos ao invés de alfa, beta e por aí vai. Três exemplos:

  • "feat: add calculator functionality"
  • "chore: initial setup"
  • "fix: fixes Result not showing correctly"

  Você pode encontrar sobre essa convenção aqui: Conventional Commits

  E é isso! Novamente parabéns pela conclusão do projeto, continue praticando e se aprimorando, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.

  12

  Marked as helpful