Se você desenvolve sites para web, certamente já precisou criar componentes com rolagem horizontal. Com o Flexbox, criar essa barra de rolagem é muito simples. Basta escrever apenas algumas linhas de código. Vou mostrar para você como fazer isso neste artigo.

Layout do projeto

Vamos precisar criar um contêiner que terá todas as imagens que queremos rolar. Aqui está o código:

<div class="container">
  <img src="images/bhutan1.jpg" alt="Bhutan" />
  <img src="images/bhutan2.jpg" alt="Bhutan" />
  <img src="images/bhutan3.jpg" alt="Bhutan" />
  <img src="images/bhutan4.jpg" alt="Bhutan" />
  <img src="images/bhutan5.jpg" alt="Bhutan" />
  <img src="images/bhutan6.jpg" alt="Bhutan" />
  <img src="images/bhutan7.jpg" alt="Bhutan" />
</div>

Estilização do projeto

O próximo passo é adicionar o estilo para que o contêiner role horizontalmente. Para isso, vamos adicionar display: flex ao contêiner. Além disso, estou definindo o valor overflow-x como auto. Abaixo temos o código pronto já com os estilos:

.container {
  display: flex;
  overflow-x: auto;
}

A rolagem horizontal deverá ficar dessa maneira:

Isso já faz com que nossas imagens rolem horizontalmente. Eu, no entanto, não estou muito satisfeito com a aparência. Há três coisas que quero mudar:

• Adicionar um espaçamento entre as imagens.
• Esconder a barra horizontal.
• Centralizar as imagens na tela.

Vamos começar adicionando um espaçamento entre as imagens. Para isso, vamos adicionar uma margem à direita de 15px. Aqui está o código do CSS:

.container img {
  margin-right: 15px;
}

Em seguida, quero esconder a barra de rolagem horizontal e podemos fazer isso usando o código abaixo:

.container::-webkit-scrollbar {
  display: none;
}

A última mudança que quero fazer é centralizar as imagens no centro da tela. Por padrão, a altura do html é a altura de seus elementos. Então, precisamos fazer com que a altura do html seja de 100% da viewport.

Com o Flexbox, podemos centralizar itens usando a propriedade align-items. Para utilizarmos essa propriedade, precisamos adicionar display: flex no elemento body do nosso html. Aqui está o código que adicionaremos ao nosso body:

body {
  display: flex;
  align-items: center;
  height: 100vh;
}

Com essas mudanças, esse será o resultado final da nossa barra de rolagem utilizando o Flexbox e escrevendo apenas algumas linhas de código:

Conclusão

Com o Flexbox, é muito fácil criar uma barra de rolagem horizontal. Muito obrigado por ler até o final! :)

Aqui temos outros artigos (em inglês) que podem ser de seu interesse:

• Here are 5 Layouts That You Can Make With FlexBox
• Learn the CSS border-radius property by building a calculator

Do mesmo modo que ocorre com o método integrado str(), o Python também oferece o método int(), que recebe um objeto string como argumento e retorna um objeto de número inteiro.

Exemplo de utilização:

# Aqui, idade é um objeto de string
idade = "18"
print(idade)

# Converter uma string em um número inteiro
int_idade = int(idade)
print(int_idade)

Resultado:

18
18

Embora o resultado seja muito parecido visualmente, na primeira linha, temos um objeto do tipo string, enquanto na segunda linha temos um objeto do tipo número inteiro. O exemplo abaixo mostrará isso mais claramente:

idade = "18"
print(idade + 2)

Resultado:

Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: cannot concatenate 'str' and 'int' objects

No código acima, o erro deve mostrar que, primeiramente, você deve converter idade que é um objeto string para um número inteiro antes de adicionar algo a ele.

idade = "18"
idade_int = int(idade)
print(idade_int + 2)

Resultado:

20

Tenha em mente algumas exceções:

• Um número decimal como argumento retornará um novo número decimal, que será arredondado para baixo e convertido para o número inteiro mais próximo. Por exemplo: print(int(7.9)) retornará 7. Por outro lado, print(int("7.9")) retornará um erro, uma vez que um número decimal como uma string não poderá ser convertido em um número inteiro.

Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: invalid literal for int() with base 10: '7.9'

• Caso tente converter palavras em números inteiros, o resultado retornará o mesmo erro. Por exemplo, print(int("um")) retornará o seguinte:

Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: invalid literal for int() with base 10: 'um'

Escrito por: Gulfam Ansari

Após explorar o Angular por algum tempo, finalmente consegui uma explicação compreensível para as diretivas do Angular. Neste artigo, vamos entender o que são as diretivas e como utilizá-las no Angular. Também criaremos nossas próprias diretivas personalizadas. Então, o que estamos esperando? Vamos começar!

O que é uma diretiva do Angular?

As diretivas são as funções que serão executadas sempre que o compilador do Angular as encontrar. Elas aprimoram a capacidade dos elementos do HTML anexando comportamentos personalizados ao DOM.

A partir do conceito central, as diretrizes do Angular são categorizadas em três categorias.

1. Diretivas de atributos
2. Diretivas estruturais
3. Componentes

Diretivas de atributos

As diretivas de atributos são responsáveis pela manipulação da aparência e do comportamento dos elementos do DOM. Sendo assim, podemos usar essas diretivas para alterar o estilo dos elementos. Essas diretivas também são usadas para ocultar ou mostrar elementos específicos de modo condicional.

O Angular oferece diversas diretivas de atributo incorporadas. Alguns exemplos são a NgStyle e a NgClass. Também podemos criar nossas próprias diretivas de atributo personalizadas para a funcionalidade desejada.

Diretivas estruturais

As diretivas estruturais são responsáveis por mudar a estrutura do DOM. Elas funcionam adicionando ou removendo os elementos do DOM, ao contrário das diretivas de atributos, que apenas alteram a aparência e o comportamento do elemento.

Você pode facilmente diferenciar as diretivas estruturais e as diretivas de atributos observando apenas a sintaxe. Quando nomeamos uma diretiva estrutural, ela sempre terá como prefixo um asterisco(*), enquanto a diretiva de atributos não contém nenhum prefixo. As três diretivas estruturais do Angular mais populares são NgIf, NgFor, e NgSwitch.

Componentes

Os componentes são diretivas com modelos (templates). Essa é a única diferença entre os componentes e os outros dois tipos de diretivas. As diretivas de atributos e as estruturais não têm modelos. Portanto, podemos dizer que o componente é uma versão mais limpa e mais fácil de usar.

Usando diretivas integradas no Angular

No Angular, existem muitas diretivas integradas disponíveis, as quais você pode usar facilmente. Nesta seção, usaremos duas diretivas integradas e que são muito simples.

A diretiva NgStyle é uma diretiva de atributo usada para alterar o estilo de qualquer elemento do DOM com base em alguma condição.

<p [ngStyle]="{'background': isBlue ? 'blue' : 'red'}">Eu sou uma diretiva de atributo</p>

No código acima, estamos adicionando um fundo azul se o valor da variável isBlue for verdadeiro.  Se o valor da variável isBlue for falso, o fundo será vermelho.

<p *ngIf="show">Eu sou uma diretiva estrutural</p>

No código acima, o parágrafo permanecerá no DOM se o valor da variável show for verdadeiro. Do contrário, ele será iniciado juntamente com o DOM.

Criando uma diretiva de atributo personalizada

Criar uma diretiva personalizada é exatamente como criar um componente do Angular. Para criar uma diretiva personalizada, precisamos substituir o decorator @Component pelo decorator @Directive.

Vamos começar criando nossa primeira diretiva de atributos personalizados. Nessa diretiva, vamos destacar o elemento do DOM selecionado, definindo a cor de fundo de um elemento.

Crie um arquivo app-highlight.directive.ts dentro da pasta src/app e adicione o código abaixo.

import {
  Directive,
  ElementRef
} from '@angular/core';
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private eleRef: ElementRef) {
    eleRef.nativeElement.style.background = 'red';
  }
}

No código acima, estamos importando a Directive e o ElementRef do core do Angular. A Directive fornece a funcionalidade do decorator @Directive, onde fornecemos seu seletor de propriedade para appHighLight para que possamos usar esse seletor em qualquer parte da aplicação. Também estamos importando o ElementRef, que é responsável por acessar o elemento do DOM.

Agora, para que a diretiva appHighlight funcione, precisamos adicionar nossa diretiva ao conjunto de declarações no arquivo app.module.ts.

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Usaremos nossa diretiva personalizada recém-criada. Estou adicionando a diretiva appHightlight dentro do arquivo app.component.html, mas você pode usá-la em qualquer outro lugar da sua aplicação.

<h1 appHightlight>Highlight Me !</h1>

Criando uma diretiva estrutural personalizada

Na seção anterior, criamos nossa primeira diretiva de atributo. Usaremos a mesma abordagem para criar a diretiva estrutural.

Começaremos com a criação da nossa diretriz estrutural. Nessa diretiva, vamos implementar a diretiva *appNot, que funcionará de modo exatamente oposto à diretiva *ngIf.

Crie um arquivo app-not.directive.ts dentro da pasta src/app e cole o código abaixo.

import {
  Directive,
  Input,
  TemplateRef,
  ViewContainerRef
} from '@angular/core';
@Directive({
  selector: '[appNot]'
})
export class AppNotDirective {
  constructor(
    private templateRef: TemplateRef < any > ,
    private viewContainer: ViewContainerRef) {}
  @Input() set appNot(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

Como observado no código acima, estamos importando Directive, Input, TemplateRef e ViewContainerRef do @angular/core.

A Directive fornece a mesma funcionalidade para o decorator @Directive. O decorator Input é usado para a comunicação entro os dois componentes. Ele envia dados de um componente para outro usando vinculação de propriedade.

O TemplateRef representa o modelo incorporado, que é usado para instanciar as visualizações incorporadas. Essas visualizações incorporadas são vinculadas ao modelo que deve ser renderizado.

O ViewContainerRef é um contêiner em que uma ou mais visualizações podem ser anexadas. Podemos usar a função createEmbeddedView() para anexar os modelos embutidos no contêiner.

Para que a diretiva appNot funcione, precisamos adicionar nossa diretiva ao array de declarações no arquivo app.module.ts.

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Agora, é hora de usarmos nossa diretiva estrutural que acabamos de criar.

Estou adicionando a diretiva appNot no app.component.html, mas você pode usá-la em qualquer lugar do aplicativo.

<h1 *appNot="true">True</h1><h1 *appNot="false">False</h1>

A diretiva *appNot é projetada de modo a anexar o elemento modelo no DOM se o valor *appNot for false, exatamente o oposto da diretiva *ngIf.

A saída do código acima deve ser parecida com esta.

Espero que este artigo tenha respondido à maioria de suas perguntas sobre as diretivas do Angular. Boa programação para você! :)

Há vários motivos pelos quais você pode querer alterar sua senha do Gmail. Talvez você a tenha esquecido ou talvez sua conta tenha sido invadida.

Seja qual for o seu motivo, recuperar sua senha é algo simples de fazer. Este guia mostrará para você o passo a passo para fazer o login na sua conta Google sem problemas.

Como alterar a sua senha do Gmail

Suponhamos que você saiba sua senha atual, mas queira alterá-la por algum motivo qualquer (provavelmente, por motivos de segurança). Neste caso, basta seguir os passos abaixo para alterar a sua senha.

Passo 1: faça o login na sua conta do Google (ou abra-a se já estiver conectado).

Obs.: este não é o seu Gmail. É a sua conta do Google. Você também pode acessar sua conta através deste link. Veja como ela se parece abaixo:

Você fará o login usando seu nome de usuário e senha atual.

Passo 2: encontre as configurações de segurança e senha

Depois de fazer o login, na sua página inicial, você verá uma barra de menu à esquerda. Encontre a guia "Segurança" e clique nela (como mostrado na foto acima).

Nas configurações de segurança, você pode rolar para baixo até ver "Como fazer login no Google":

Você encontrará uma aba onde diz "Senha" (e a última vez que ela foi alterada). Clicando na aba de "Senha", ela o levará até página de login novamente.

Passo 3: altere sua senha

Basta fazer o login e então você verá a tela abaixo:

Neste passo, será pedido a você que insira uma nova senha — e você também receberá algumas dicas sobre como criar uma senha forte e segura.

Dica: se você tiver um gerenciador de senhas, como o LastPass ou o 1Password, faça com que ele gere e salve uma senha segura para você.

Você precisará digitar a senha novamente para confirmar que as duas senhas digitadas são iguais. Em seguida, basta clicar em "Alterar senha" (o botão azul na parte inferior). Pronto, agora você pode fazer login novamente no Gmail, YouTube e em todos os outros serviços relacionados ao Google.

O que fazer se você esqueceu sua senha do Gmail

Caso tenha esquecido sua senha do Google, não se preocupe — você pode redefinir sua senha seguindo alguns passos.

Passo 1: informe ao Google que você não lembra a sua senha

O Google precisa ter certeza de que é você que está tentando recuperar sua senha. Caso contrário, qualquer pessoa poderia fazer isso para redefinir sua senha sem sua permissão ou conhecimento.

Primeiro, após digitar seu endereço de e-mail, o Google perguntará qual foi a sua última senha. Mas, presumivelmente, você não se lembra disso, certo? Já que está tentando recuperar a sua senha.  

Neste caso, você pode clicar em "Tente outra maneira de fazer login":

Passo 2: verifique sua Identidade

Este botão o levará até uma tela de verificação com outro método de comunicação selecionado, geralmente por um dispositivo móvel:

Se você clicar em sim, uma nova tela com um código numérico aparecerá, desta maneira:

Um pop-up aparecerá no seu celular (no meu caso, ele veio por Gmail) pedindo para confirmar seu telefone. Clicando no pop-up (ele aparecerá na sua tela, mesmo que ela esteja bloqueada), ele o levará para esta tela:

Clique em "Sim" e você verá uma nova tela (em seu telefone) com três números. Um deles deve corresponder ao número da página de recuperação de sua conta:

No meu caso, o 70 corresponde com o número que apareceu na minha conta do Google. Então, eu só preciso confirmar clicando nele.

Passo 3: faça a verificação final

Em seguida, você será direcionado para outra tela que solicita outra etapa de verificação (geralmente outro endereço de e-mail para o qual o Google pode enviar um código de verificação):

Clique em "Enviar" e, em seguida, você receberá um código em seu outro e-mail. Assim que você receber este outro e-mail, basta abrir o seu Gmail. Será algo parecido com a imagem abaixo (com as suas próprias informações):

Pegue esse código de seis dígitos e insira-o onde for solicitado no processo de recuperação de conta do Google:

Passo 4: insira uma nova senha

Após inserir o código de seis dígitos, clique em "Avançar". Você será levado para uma tela onde precisará inserir (e reinserir) sua nova senha escolhida.

Novamente, você pode criar um ou usar um gerenciador de senhas para gerar uma senha forte para você.

Em seguida, clique em Avançar, e você terá uma nova senha salva no Google! Basta voltar ao Gmail, ou qualquer outro local que você esteja tentando acessar, e acessar sua conta usando seu e-mail do gmail e a sua nova senha!

Dica bônus: como alterar os métodos de verificação da sua conta do Google

Se você tiver um endereço de e-mail desatualizado definido como seu endereço de e-mail de "backup" ou de recuperação, será necessário alterá-lo.

Volte para https://myaccount.google.com/ e clique na guia Segurança novamente. Role um pouco para baixo e você verá "Maneiras de verificar sua identidade".

Se você precisar mudar seu número de telefone e/ou e-mail, basta clicar em uma das opções acima e ela o levará para uma tela onde você poderá atualizar essas informações. Por motivos de segurança, o Google fará com que você faça o login novamente.

Depois que meus amigos cancelaram nossos planos para o final de semana, eu estava procurando algo para passar o tempo. Olhando para minha longa lista de coisas a fazer, finalmente tive a ideia de criar um portfólio.

Após muitas horas pesquisando tecnologias e modelos, acabei criando este site usando React.js e as páginas do GitHub.  Você pode encontrar o código para o portfólio aqui (é tecnicamente chamado de 'web-app', mas, para este artigo, vou me referir a ele como um "site"... espero que não seja um problema).

O que você vai aprender

• Alguns conceitos básicos de React.js
• Como usar o create-react-app a partir de um site HTML
• Como implantar seu portfólio usando as 'páginas do Github '

Alguns conceitos que você precisa saber antes de começarmos...

Obs.: sinta-se à vontade para pular esta parte se você já estiver familiarizado com os conceitos básicos de React.js e React Components.

Esses pontos apresentarão uma ideia muito básica do mundo do React. Recomendo que você estude mais sobre o React a partir da documentação (em inglês) e coloque a mão na massa com a ajuda do freeCodeCamp.

O que é o React.js

Por enquanto, basta saber que React.js é uma biblioteca JavaScript usada para construir componentes de Interface do Usuário. Ele foi criado pelos engenheiros do Facebook e hoje em dia, está balançando o mundo JavaScript...

O que é um React Component

O React permite definir componentes como uma classe ou uma função. Você pode fornecer entradas opcionais para os componentes chamadas de "props".

Os componentes permitem dividir a Interface do Usuário em seções independentes, como cabeçalho, rodapé e corpo. Cada componente funcionará de modo independente para que qualquer componente individual possa ser renderizado independentemente no ReactDOM sem afetar a página inteira.

Ele também vem com 'lifecycle methods' (métodos de ciclo de vida, em tradução livre) e que permitem definir blocos de código que você deseja executar de acordo com o estado do componente, como montagem, renderização, atualização e desmontagem.

Os componentes do React têm suas próprias vantagens e desvantagens. Por exemplo, podemos reutilizar um componente exportando-o para outros componentes, mas às vezes fica confuso lidar com vários componentes conversando e acionando renderizações um para o outro.

Esta é a aparência de um React Component:

import React, { Component } from 'react'

export default class Component-name extends Component {
  render() {
    return (
      <div>
        {código que será renderizado no DOM}
      </div>
    )
  }
}

O que é o GitHub Pages

Com o GitHub Pages, você pode implantar facilmente seu site usando o GitHub gratuitamente e sem a necessidade de configurar nenhuma infraestrutura. Eles forneceram módulos para que você não precise se preocupar com muitas coisas. Se você ler este artigo até o final, verá que funciona como MÁGICA!

Antes de prosseguir, certifique-se de...

Decidir qual o conteúdo que você deseja colocar em seu site

Revise seu último currículo (caso você ainda não tenha um, que tal criar um agora e adiar este projeto até o próximo fim de semana?). Isso ajudará você a ter uma ideia clara sobre o tipo de informação que deseja colocar no seu portfólio.

Encontrar inspiração

Navegue pelas centenas de modelos de sites de portfólio gratuitos, veja como e o que você pode usar deles - pegue uma caneta e papel e esboce um diagrama para ter uma ideia de como você gostaria que fosse o seu portfólio. Vou usar este modelo para demonstrar.

Selecionar algumas fotos pessoais

É claro que você não quer parecer mal em seu próprio portfólio. Então, explore seus arquivos para encontrar as fotos perfeitas para o seu site.

Colocar a sua playlist favorita

Diz a lenda que coisas boas sempre vêm acompanhadas de boa música... e é claro que você não quer perder a parte boa, não é?

Vamos para a parte de construção

Nas seções a seguir, descreverei as etapas para a criação do portfólio, mas você não precisa seguir o mesmo código que eu uso. Concentre-se em aprender os conceitos e mostre alguma criatividade! A leitura complementar foi dividida em três seções.

1. Configurando o React-app
2. Separando a página HTML em componentes do React
3. Implementando seu aplicativo usando as páginas do GitHub

Configurando o React-app

Usaremos o create-react-app — um módulo fornecido pelo Facebook — que nos ajuda a criar aplicativos React.js com facilidade e sem se preocupar com ferramentas de construção.

• Abra o seu console e execute o seguinte comando npm install create-react-app para instalar este módulo via npm (certifique-se de ter instalado o  npm antes de executar o código — caso tenha dúvidas, acesse esse link para mais informações).
• Execute npm create-react-app ${nome-do-projeto} que buscará scripts de compilação e criará uma estrutura de arquivos parecida com o código abaixo:

my-portfolio-app
├── README.md (descrição do projeto para o GitHUb)
├── node_modules (armazena todos os módulos de dependências do projeto)
├── package.json (armazena todas as metainformações do projeto, como quais são as dependências, versões, revisões etc.)
├── .gitignore (arquivos declarados aqui serão ignorados ao fazer o upload para o GitHub, como a pasta node_modules 
├── public (aqui, você armazenará todos os arquivos de imagens, JS e CSS) 
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json 
└── src (o código principal do nosso app fica aqui)
    ├── {crie a pasta dos componentes - components - aqui}
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

Criei uma pasta components sob o diretório src. É nela que armazenaremos nossos componentes no futuro.

• Copie todas as imagens, fontes, arquivos HTML e CSS do template HTML com o qual você decidiu trabalhar para a pasta public.

O diretório do seu projeto deve ficar assim.

• Execute npm install, que instalará os módulos de dependências no diretório node_modules.
• Se você seguiu todos os passos corretamente até agora, a execução do comando npm start iniciará o aplicativo React no localhost. Digite  https://localhost:3000 no seu navegador e você poderá ver a página inicial do React.

Separando a página HTML em componentes do React

Lembra da pasta component que criamos no diretório src na etapa anterior? Agora vamos dividir a página do modelo HTML em componentes e combinar esses componentes para criar nosso React-app.

• Primeiro, você precisa identificar quais componentes você pode criar a partir do arquivo HTML — como cabeçalho, rodapé e página/componente de contato. Seja criativo nesta etapa!
• Procure por tags como section/div que não estão aninhadas em alguma outra section/div. Elas devem conter código sobre essa seção específica da página que é independente de outras seções. Tente dar uma olhada no meu repositório do GitHub para ter uma ideia melhor.
  Dica: use a ferramenta "Inspecionar elemento" para brincar com o código e observar o efeito das alterações no navegador.
• Esses trechos de código HTML serão usados no método render() do componente. O método render() retornará este código sempre que um componente for renderizado no ReactDOM. Dê uma olhada nos blocos de código abaixo para referência.

<section id="colorlib-hero" class="js-fullheight" data-section="home">
    <div class="flexslider js-fullheight">
        <ul class="slides">
        <li style="background-image: url(images/img_bg_1.jpg);">
            <div class="overlay"></div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div class="slider-text-inner js-fullheight">
                            <div class="desc">
                                <h1>Hi! <br>I'm Jackson</h1>
                                <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                                    <p><a class="btn btn-primary btn-learn">Download CV <em class="icon-download4"></em></a></p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li style="background-image: url(images/img_bg_2.jpg);">
            <div class="overlay"></div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div class="slider-text-inner">
                            <div class="desc">
                                <h1>I am <br>a Designer</h1>
                                    <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                                    <p><a class="btn btn-primary btn-learn">View Portfolio <em class="icon-briefcase3"></em></a></p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        </ul>
    </div>
</section>

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>
        <section id="colorlib-hero" className="js-fullheight" data-section="home">
            <div className="flexslider js-fullheight">
                <ul className="slides">
                <li style={{backgroundImage: 'url(images/img_bg_1.jpg)'}}>
                    <div className="overlay" />
                    <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div className="slider-text-inner js-fullheight">
                            <div className="desc">
                            <h1>Hi! <br />I'm Jackson</h1>
                            <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                            <p><a className="btn btn-primary btn-learn">Download CV <em className="icon-download4" /></a></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
                <li style={{backgroundImage: 'url(images/img_bg_2.jpg)'}}>
                    <div className="overlay" />
                    <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-6 col-md-offset-3 col-md-pull-3 col-sm-12 col-xs-12 js-fullheight slider-text">
                        <div className="slider-text-inner">
                            <div className="desc">
                            <h1>I am <br />a Designer</h1>
                            <h2>100% html5 bootstrap templates Made by <a href="https://colorlib.com/" target="_blank">colorlib.com</a></h2>
                            <p><a className="btn btn-primary btn-learn">View Portfolio <em className="icon-briefcase3" /></a></p>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                </li>
                </ul>
            </div>
        </section>
      </div>
    )
  }
}

Dica: se você estiver ficando muito confuso com o React - tente focar no conceito de 'como identificar os componentes desejados a partir da base de código HTML'. Depois de ficar confortável com o React, a implementação será muito fácil.

Você notou que há algumas mudanças no código HTML? class se tornou className. Estas mudanças são necessárias porque React não suporta HTML ? - eles criaram sua própria sintaxe HTML como JS, que é chamada JSX . Portanto, precisamos alterar algumas partes do código HTML para torná-lo JSX.

Para facilitar o processo, encontrei este conversor de HTML para JSX durante este projeto, que converte o código HTML em JSX automaticamente. Eu recomendo o uso deste em vez de mudar seu código manualmente.

Depois de algum tempo, você deve encontrar alguns componentes diferentes. Agora o EndGame está próximo! Reuna todos estes diferentes componentes sob um único componente em App.js (SIM! Você pode renderizar um componente de outro componente!) e seu portfólio estará pronto!

import React, { Component } from 'react';
import './App.css';
import Sidebar from './components/sidebar'
import Introduction from './components/introduction'
import About from './components/about'
import Projects from './components/projects'
import Blog from './components/blog'
import Timeline from './components/timeline'

class App extends Component {
  render() {
    return (
      <div id="colorlib-page">
        <div id="container-wrap">
		<Sidebar></Sidebar>
		<div id="colorlib-main">
			<Introduction></Introduction>
			<About></About>
			<Projects></Projects>
			<Blog></Blog>
			<Timeline></Timeline>
          	</div>
      	</div>
      </div>
    );
  }
}

export default App;

Observe no código acima que precisamos primeiro importar os componentes para então usá-los na seção render(). E podemos usar os componentes apenas adicionando a tag <component-name></component-name>  ou apenas a tag <component-name/> no método render.

• Execute npm start no seu terminal e você poderá ver as alterações refletidas no site. Você não precisa executar este comando novamente se tiver feito mais alterações no código, ele será executado automaticamente quando você salvar essas alterações. Você pode fazer um desenvolvimento extremamente rápido graças ao recurso de hot reload.
• Brinque com o HTML e CSS para mudar o conteúdo de acordo com seu currículo e tornar seu portfólio ainda mais legal mudando o conteúdo, experimentando diferentes fontes, mudando as cores e adicionando suas fotos.

Implementando o seu aplicativo usando as páginas do GitHub

Bom, então você sobreviveu até este ponto... aproveite para apreciar seu trabalho duro. Mas você ainda precisa concluir sua implantação para poder compartilhar seu trabalho com seus amigos.

• Primeiro, você precisa instalar a biblioteca npm das páginas do GitHub. Para instalar, execute este comando npm install gh-pages no seu terminal.

Depois de instalada, você precisa fazer as seguintes alterações em seu arquivo manifest.json:

• Adicione o campo homepage —  estará no seguinte formato: https://{github_id}.github.io/{github_repo}
• Adicione os arquivos predeploy e deploy em scripts

Agora o seu manifest.json deverá estar parecido com este:

{
	"name": "portfolio-app",
	"version": "0.1.0",
	"private": true,
	"homepage": "https://Dhruv34788.github.io/me",
	"dependencies": {
		"gh-pages": "^2.0.1",
		"react": "^16.8.3",
		"react-dom": "^16.8.3",
		"react-scripts": "2.1.5",
		"yarn": "^1.13.0"},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"predeploy": "yarn run build",
		"deploy": "gh-pages -d build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"},
	"eslintConfig": {
		"extends": "react-app"},
	"browserslist": [
		">0.2%",
		"not dead",
		"not ie <= 11",
		"not op_mini all"
	]
}

Agora vá para o terminal, execute npm run deploy e espere até que a mágica aconteça! Seu aplicativo será implantado depois que os scripts de implantação forem executados com êxito. Verifique se seu aplicativo foi implantado ou não visitando o link fornecido no campo homepage.

Cuidado: tenha cuidado ao implantar qualquer coisa na web. Realize verificações de segurança, como remover links internos, senhas ou qualquer coisa que você não queira que esteja nas mãos de pessoas inteligentes por aí.

Se você vai fazer mudanças com frequência...

Obs.: você vai precisar fazer essa implantação cada vez que alterar algo no seu código - e adivinhe quem vai ficar entediado em breve?  ( Não se preocupe, eu te ajudo :P)

Você pode automatizar o processo de implantação usando o Travis-CI (ferramenta de automação), de modo que, se você confirmar qualquer coisa na branch master/main, as etapas de implantação serão acionadas e o novo site estará disponível automaticamente. Basta seguir o artigo abaixo.

https://www.freecodecamp.org/news/learn-how-to-automate-deployment-on-github-pages-with-travis-ci/

Lição de casa...

Muito bem! Você finalmente criou e implementou seu portfolio usando React! Caso esteja interessado em aperfeiçoar seu portfólio ainda mais, você pode incluir os recursos abaixo:

• Blog: você pode criar o seu próprio blog usando Node.js e MongoDB.
• Galeria: adicione uma seção onde você pode mostrar suas últimas postagens nas mídias sociais.
• Feed do Twitter: você pode criar uma seção onde mostra os seus recentes tuítes.
• Citações aleatórias: pode criar uma seção mostrando algumas citações motivacionais aleatórias.

Se você implementar qualquer uma desses recursos, fique à vontade para compartilhar o seu trabalho comigo. Eu ficaria mais do que feliz em ajudar, se eu puder, é claro.

Concluindo...

Gostaria de dedicar um momento para reconhecer o trabalho das pessoas que me deram a inspiração e o conhecimento para concluir este artigo..

• Quincy Larson, Sahat Yalkabov e toda a comunidade: pela a criação do freeCodeCamp — uma plataforma ondevocê pode aprender sobre qualquer assunto relacionado a tecnologia, com tutoriais práticos e totalmente gratuita.
• Colorlib: por fornecer ótimos templates que foram extramente importantes e inspiradores para a criação do meu portfólio.
• Daniel Lo Nigro e a comunidade: por criarem o HTML to JSX Compiler, que acabou sendo útil ao converter blocos HTML em código JSX.
• Meus queridos amigos: que me ajudaram corrigindo meus erros.
• VOCÊ: por ter chegado até aqui. Espero que tenha tido um tempo produtivo e que continue explorando e construindo coisas incríveis!

Introdução

Neste artigo, aprenderemos sobre a validação de formulários reativos em Angular. Criaremos um formulário simples de registro de usuário e implementaremos algumas validações integradas nele. Juntamente com as validações integradas, também vamos implementar algumas validações personalizadas para o formulário reativo.

Consideraremos as seguintes validações personalizadas para esta demonstração:

• Verificar a disponibilidade do nome do usuário
• Validar o padrão de senha
• Validar a senha digitada em dois campos diferentes

Veja a aplicação em ação:

Pré-requisitos

• Instalar o Visual Studio Code por este link
• Instalar a versão mais atualizada da Angular CLI por este link

Código-fonte

Obtenha o código-fonte pelo GitHub.

Criando a aplicação em Angular

Navegue até a pasta onde deseja criar seu arquivo de projeto. Abra uma janela de comando e execute o comando mostrado abaixo:

ng new angular-forms-validation --routing=false --style=scss

Estamos especificando o comando para criar uma nova aplicação em Angular. A opção de criar o módulo de roteamento é definida como falsa e a extensão de arquivos de estilo é definida como scss. Este comando criará o projeto em Angular com o nome de angular-forms-validation.

Altere os diretórios, vá para o novo projeto e abra-o no Visual Studio Code usando os comandos mostrados abaixo:

cd angular-forms-validation 
code .

Instalando o Bootstrap

Execute o comando abaixo para instalar a biblioteca do Bootstrap na pasta do projeto:

npm install bootstrap --save

Adicione a seguinte definição de importação no arquivo styles.scss:

@import "~bootstrap/dist/css/bootstrap.css";

Criando o serviço de validação

Execute o comando abaixo para criar um novo serviço:

ng g s services\customvalidation

Este comando criará uma pasta nomeada serviços com dois arquivos — customvalidation.service.ts e customvalidation.service.spec.ts. Abra o arquivo customvalidation.service.ts e cole o código abaixo:

import { Injectable } from '@angular/core';
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class CustomvalidationService {

  patternValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
      if (!control.value) {
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(control.value);
      return valid ? null : { invalidPassword: true };
    };
  }

  MatchPassword(password: string, confirmPassword: string) {
    return (formGroup: FormGroup) => {
      const passwordControl = formGroup.controls[password];
      const confirmPasswordControl = formGroup.controls[confirmPassword];

      if (!passwordControl || !confirmPasswordControl) {
        return null;
      }

      if (confirmPasswordControl.errors && !confirmPasswordControl.errors.passwordMismatch) {
        return null;
      }

      if (passwordControl.value !== confirmPasswordControl.value) {
        confirmPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmPasswordControl.setErrors(null);
      }
    }
  }

  userNameValidator(userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (this.validateUserName(userControl.value)) {
          resolve({ userNameNotAvailable: true });
        } else {
          resolve(null);
        }
      }, 1000);
    });
  }

  validateUserName(userName: string) {
    const UserList = ['ankit', 'admin', 'user', 'superuser'];
    return (UserList.indexOf(userName) > -1);
  }
}

O método patternValidator é usado para validar o padrão de senha em nosso formulário. O parâmetro para este método é o tipo AbstractControl, que é uma classe base para FormControl.

Usaremos uma expressão regular para validar a senha. Validaremos as quatro condições a seguir usando a expressão regular:

• A senha deve ter um mínimo de oito caracteres.
• Precisa ter pelo menos uma letra minúscula.
• Precisa ter pelo menos uma letra maiúscula.
• Precisa ter pelo menos um número.

Se a senha falhar na verificação pela regex, definiremos a propriedade invalidPassword como verdadeira.

O método MatchPassword é usado para comparar as senhas em dois campos. Este método aceitará dois parâmetros do tipo String. Estes parâmetros representam o nome dos campos a serem correspondidos. Pegaremos o  FormControl para esses dois campos e, em seguida, igualaremos os valores neles. Se os valores não coincidirem, definiremos a propriedade passwordMismatch como verdadeira.

O método userNameValidator é usado para verificar se o nome de usuário já foi usado anteriormente ou não. Este método aceitará um parâmetro do tipo AbstractControl. Verificaremos se o valor deste campo está presente em um array estático, UserList. Se o valor inserido pelo usuário já estiver presente, definiremos a  propriedade userNameNotAvailable como verdadeira.

Estamos usando a função setTimeout para executar esta verificação a cada dois segundos. Isso garantirá que o erro será acionado após dois segundos a partir do momento em que o usuário parar de digitar no campo.

Para simplificar este artigo, estamos usando um array estático para pesquisar a disponibilidade de nomes de usuário. Idealmente, deveria ser uma chamada de serviço ao servidor para pesquisar o valor em um banco de dados.

Criando o componente reactive-form

Execute o seguinte comando para criar o componente  reactive-form:

ng g c reactive-form

Abra reactive-form.component.ts e cole o código abaixo:

import { Component, OnInit } from '@angular/core';
import { Validators, FormGroup, FormBuilder } from '@angular/forms';
import { CustomvalidationService } from '../services/customvalidation.service';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.scss']
})
export class ReactiveFormComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;

  constructor(
    private fb: FormBuilder,
    private customValidator: CustomvalidationService
  ) { }

  ngOnInit() {
    this.registerForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      username: ['', [Validators.required], this.customValidator.userNameValidator.bind(this.customValidator)],
      password: ['', Validators.compose([Validators.required, this.customValidator.patternValidator()])],
      confirmPassword: ['', [Validators.required]],
    },
      {
        validator: this.customValidator.MatchPassword('password', 'confirmPassword'),
      }
    );
  }

  get registerFormControl() {
    return this.registerForm.controls;
  }

  onSubmit() {
    this.submitted = true;
    if (this.registerForm.valid) {
      alert('Form Submitted succesfully!!!\n Check the values in browser console.');
      console.table(this.registerForm.value);
    }
  }
}

Criaremos a variável registerForm do tipo FormGroup. No método ngOnInit, estabeleceremos os controles para o formulário usando a classe FormBuilder. Todos os campos são definidos como um campo obrigatório para este formulário. Chamaremos o método userNameValidator do serviço usando a função bind.

Para o campo de senha, usaremos o método de composição para mesclar em vários validadores em uma única função. Também invocaremos o método MatchPassword e passaremos o nome de password e confirmPassword como parâmetros.

A propriedade registerFormControl retornará os controles de formulário. O método onSubmit imprimirá o conteúdo do formulário no console se o formulário for válido e enviado com sucesso.

Agora, abra reactive-form.component.html e cole nele o código a seguir:

<div class="container">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h3>Angular Reactive Form</h3>
                </div>
                <div class="card-body">
                    <form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                        <div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" formControlName="name">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.name.touched || submitted) && registerFormControl.name.errors?.required">
                                Name is required
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" class="form-control" formControlName="email">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.email.touched || submitted) && registerFormControl.email.errors?.required">
                                Email is required
                            </span>
                            <span class="text-danger"
                                *ngIf="registerFormControl.email.touched && registerFormControl.email.errors?.email">
                                Enter a valid email address
                            </span>
                        </div>
                        <div class="form-group">
                            <label>User Name</label>
                            <input type="text" class="form-control" formControlName="username">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.username.touched || submitted) && registerFormControl.username.errors?.required">
                                User Name is required
                            </span>
                            <span class="text-danger"
                                *ngIf="registerFormControl.username.touched && registerFormControl.username.errors?.userNameNotAvailable">
                                User Name is not available
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" class="form-control" formControlName="password">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.password.touched || submitted) && registerFormControl.password.errors?.required">
                                Password is required
                            </span>
                            <span class="text-danger"
                                *ngIf="registerFormControl.password.touched && registerFormControl.password.errors?.invalidPassword">
                                Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
                                letter and 1 number
                            </span>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" class="form-control" formControlName="confirmPassword">
                            <span class="text-danger"
                                *ngIf="(registerFormControl.confirmPassword.touched || submitted)&& registerFormControl.confirmPassword.errors?.required">
                                Confirm Password is required
                            </span>
                            <span class="text-danger"
                                *ngIf="registerFormControl.confirmPassword.touched && registerFormControl.confirmPassword.errors?.passwordMismatch">
                                Passwords doesnot match
                            </span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Criaremos um reactive-form e usaremos o card do Bootstrap para a estilização. O cabeçalho do nosso card terá um título, enquanto o corpo terá os campos do formulário. Vincularemos a propriedade formGroup da tag  <form> ao nome do nosso formulário, que é registerForm. O método onSubmit será invocado ao enviar o formulário. Também vincularemos a  propriedade formControlName de cada campo de entrada ao nome de controle do nosso FormGroup. Verificaremos se há erros nos controles do formulário e, em seguida, exibiremos a mensagem de erro de validação apropriada na tela.

Execute o seguinte comando para criar o componente nav-bar:

ng g c nav-bar

Abra nav-bar.component.html e cole o código abaixo:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" [routerLink]='["/"]'>Form Validation Demo</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" [routerLink]='["/reactive-form"]'>Reactive Form</a>
            </li>
        </ul>
    </div>
</nav>

Estamos adicionando o link de navegação ao componente da reactive-form na barra de navegação.

Atualizando o componente do aplicação

Abra o arquivo app.component.html e cole nele o código abaixo:

<app-nav-bar></app-nav-bar>
<div class="container">
  <router-outlet></router-outlet>
</div>

Atualizando o módulo da aplicação

Adicione o código a seguir no arquivo app.module.ts. Vamos importar o módulo de formulários e definir o roteamento para nossa aplicação. Você pode consultar GitHub para obter o código-fonte completo deste arquivo.

import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from  '@angular/forms';

@NgModule({
  ...    
  imports: [
    ...
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ReactiveFormComponent },
      { path: 'reactive-form', component: ReactiveFormComponent }
    ]),
  ],
})

Demonstração da execução

Usaremos o comando abaixo para iniciar o servidor:

ng serve -o

Este comando iniciará a aplicação no seu navegador. Caso não abra automaticamente, você pode digitar http://localhost:4200/ na barra do seu navegador. Você pode realizar todas as validações de formulário que vimos aqui.

Esta aplicação também está hospedada em https://ng-forms-validation.herokuapp.com/. Navegue até o link e faça alguns testes para uma melhor compreensão.

Resumo

Criamos um modelo de formulário de registro de usuário utilizando a abordagem reactive-form no Angular. Também implementamos as validações integradas e personalizadas no formulário. Por fim, utilizamos a biblioteca do Bootstrap para a estilização.

Você pode obter o código-fonte no GitHub e fazer alguns testes para uma melhor compreensão.

Você pode encontrar outras publicações como esta no blog do autor, Ankit Sharma (em inglês).

Este é um artigo épico onde você aprende a construir uma calculadora do zero. Vamos nos concentrar no JavaScript que você precisa escrever — como pensar em construir a calculadora, como escrever o código e, por fim, como limpar seu código.

Até o final do artigo, você deve obter uma calculadora que funcione exatamente como a do iPhone (sem as funcionalidades +/- e porcentagem).

Pré-requisitos

Antes de começar o tutorial, certifique-se que tenha um bom domínio de JavaScript. No mínimo, você precisa conhecer:

1. Instruções if/else (texto explicativo em inglês)
2. Laços for (texto explicativo em inglês)
3. Funções em JavaScript (texto explicativo em inglês)
4. Arrow functions (texto explicativo em inglês)
5. && e || operadores
6. Como alterar o texto com a propriedade textContent
7. Como adicionar eventListeners com o padrão de delegação de evento.

Antes de começar

Eu recomendo que você tente construir a calculadora sozinho antes de seguir o tutorial. É uma boa prática, porque você treinará pensar como um desenvolvedor.

Volte para o tutorial após ter tentado por uma hora (não importa se você teve sucesso ou não). Quando você tenta, você pensa, e isso o ajudará a absorver o tutorial duas vezes mais rápido.

Bom, vamos começar a entender como funciona uma calculadora.

Construindo a calculadora

Primeiro, vamos construir a calculadora.  

A calculadora consiste em duas partes: o display e  as teclas.

<div class=”calculator”>
  <div class=”calculator__display”>0</div>
  <div class=”calculator__keys”> … </div>
</div>

Podemos usar o CSS Grid para criar as teclas, uma vez que elas já estão dispostas em um formato de grade. Isto já foi criado no arquivo inicial. Você pode encontrar o arquivo inicial neste link.

.calculator__keys { 
  display: grid; 
  /* o resto do CSS necessário */ 
}

Para identificarmos os operadores, chaves decimais, limpador de tela e sinal de igual, vamos criar um atributo de ação de dados que descreve o que eles fazem.

<div class="calculator__keys">
  <button class="key--operator" data-action="add">+</button>
  <button class="key--operator" data-action="subtract">-</button
  <button class="key--operator" data-action="multiply">&times;</button>
  <button class="key--operator" data-action="divide">÷</button
  <button>7</button>
  <button>8</button>
  <button>9</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>0</button>
  <button data-action="decimal">.</button>
  <button data-action="clear">AC</button>
  <button class="key--equal" data-action="calculate">=</button>
</div>

Ouvindo as teclas

Cinco coisas que podem acontecer quando alguém pega uma calculadora. Elas podem apertar:

1. um número (0–9)
2. um operador (+, -, ×, ÷)
3. uma tecla decimal
4. a tecla de igual
5. a tecla para limpar

Os primeiros passos para construir a calculadora são:  (1) ouvir todas as teclas (2) determinar quais teclas foram pressionadas. Neste caso, podemos usar um padrão de delegação de eventos para ouvir as teclas, já que todas as teclas são filhas de .calculator__keys.

const calculator = document.querySelector(‘.calculator’)
const keys = calculator.querySelector(‘.calculator__keys’)

keys.addEventListener(‘click’, e => {
 if (e.target.matches(‘button’)) {
   // Fazer algo
 }
})

Em seguida,  podemos usar o atributo data-action para determinar qual tecla foi clicada.

const key = e.target
const action = key.dataset.action

Se a tecla não tiver um atributo data-action, ela deve ser uma tecla numérica.

if (!action) {
  console.log('number key!')
}

Se a tecla tiver um atributo data-action que seja add, subtract, multiply ou divide, sabemos que a tecla é um operador.

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  console.log('operator key!')
}

Se a tecla data-action for decimal, sabemos que o usuário clicou sobre a chave decimal.

Seguindo o mesmo pensamento, se a tecla data-action for clear, sabemos que o usuário clicou na tecla de limpar (aquela que diz AC). Se a chave data-action for calculate, sabemos que o usuário clicou na tecla de iguais.

if (action === 'decimal') {
  console.log('decimal key!')
}

if (action === 'clear') {
  console.log('clear key!')
}

if (action === 'calculate') {
  console.log('equal key!')
}

Neste momento, você deve conseguir visualizar pelo console.log, uma resposta para cada tecla clicada.

Construindo o caminho ideal

Vamos considerar o que um usuário comum faria quando pegasse um calculadora. Esse "o que um usuário comum faria" é chamado de caminho ideal.

Vamos chamar nosso usuário de Mary.

Quando Mary pega a calculadora, ela pode clicar em qualquer uma dessas teclas:

1. uma tecla numérica (0–9)
2. uma tecla de operador (+, -, ×, ÷)
3. uma tecla decimal
4. a tecla do sinal de igual
5. a tecla para limpar (AC)

Pode ser muito pensar nas cinco teclas clicadas de uma só vez, então vamos passo a passo.

Quando o usuário clica em uma tecla numérica

Neste ponto, se a calculadora mostrar 0 (o número padrão), o número clicado deve substituir zero.

Se a calculadora mostrar um número diferente de zero, o número clicado deve ser incluído no número exibido.

Agora, precisamos saber de duas coisas:

1. Qual tecla foi clicada
2. O número atual exibido

Podemos obter esses dois valores através da propriedade textContent da tecla clicada e .calculator__display, respectivamente.

const display = document.querySelector('.calculator__display')

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    const action = key.dataset.action
    const keyContent = key.textContent
    const displayedNum = display.textContent
    // ...
  }
})

Se a calculadora mostrar 0, queremos substituir o visor da calculadora pela tecla clicada. Podemos fazer isso substituindo o texto do visor por uma propriedade textContent.

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  }
}

Se a calculadora mostrar um número diferente de zero, queremos incluir a tecla clicada ao número exibido. Para incluir um número, concatenaremos uma string.

if (!action) {
  if (displayedNum === '0') {
    display.textContent = keyContent
  } else {
    display.textContent = displayedNum + keyContent
  }
}

Neste momento, Mary pode clicar em qualquer uma destas teclas:

1. Uma tecla decimal
2. Uma tecla de operador

Suponhamos que Mary clicou em uma tecla decimal.

Quando um usuário aperta a tecla decimal

Quando Mary aperta a tecla decimal, um decimal deve aparecer no visor. Se Mary aperta qualquer outro número decimal, ele deverá ser exibido no visor.

Para criar este efeito, podemos concatenar . ao número exibido.

if (action === 'decimal') {
  display.textContent = displayedNum + '.'
}

Em seguida, suponhamos que Mary continua seu cálculo apertando a tecla de algum operador.

Quando o usuário aperta uma tecla de operação  

Se Mary apertar uma tecla de operação, ele deverá ser destacado, desta maneira, Mary sabe que este operador está ativo.

Para isso, podemos adicionar a classe is-depressed a tecla do operador.

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  key.classList.add('is-depressed')
}

Uma vez que Mary tenha clicado em uma tecla do operador, ela clicará outra tecla numérica.

Quando o usuário clica em um número após selecionar um operador

Quando Mary selecionar um novo número, o número que estava no visor deverá ser substituído pelo novo número selecionado. A tecla do operador também deve liberar seu estado de pressão.

Para liberar a tecla do operador selecionado, retiramos a classe is-depressed de todos os forEach loops:

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    const key = e.target
    // ...
    
    // Remove a classe .is-depressed de todas as teclas
    Array.from(key.parentNode.children)
      .forEach(k => k.classList.remove('is-depressed'))
  }
})

A seguir, queremos atualizar o visor para a tecla selecionada. Antes de fazermos isso, precisamos verificar se a tecla anterior é uma tecla de operador.

Uma maneira de fazer isso é através de um atributo personalizado. Chamaremos esse atributo personalizado de data-previous-key-type.

const calculator = document.querySelector('.calculator')
// ...

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
    // ...
    
    if (
      action === 'add' ||
      action === 'subtract' ||
      action === 'multiply' ||
      action === 'divide'
    ) {
      key.classList.add('is-depressed')
      // Adiciona um atributo personalizado
      calculator.dataset.previousKeyType = 'operator'
    }
  }
})

Se o previousKeyType é um operador, queremos substituir o número exibido por um número clicado.

const previousKeyType = calculator.dataset.previousKeyType

if (!action) {
  if (displayedNum === '0' || previousKeyType === 'operator') {
    display.textContent = keyContent
  } else {
    display.textContent = displayedNum + keyContent
  }
}

Em seguida, suponhamos que Mary decide completar seu cálculo, apertando a tecla do sinal de igual (=).

Quando um usuário aperta a tecla do sinal de igual

Quando Mary pressiona a tecla do sinal de igual (=), a calculadora deveria calcular um resultado que depende de três valores:

1. O primeiro número inserido na calculadora
2. O operador
3. O segundo número inserido na calculadora

Após o cálculo, o resultado deve substituir o valor exibido.

Neste momento,  sabemos apenas o segundo número — ou seja, o número que está sendo exibido atualmente.

if (action === 'calculate') {
  const secondValue = displayedNum
  // ...
}

Para obter o primeiro número, precisamos armazenar o valor exibido da calculadora antes de limpá-la. Uma maneira de salvar este primeiro número é adicioná-lo a um atributo personalizado quando o botão do operador for clicado.

Para obter o operador, também podemos utilizar a mesma técnica.

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  // ...
  calculator.dataset.firstValue = displayedNum
  calculator.dataset.operator = action
}

Assim que tivermos os três valores necessários, podemos fazer um cálculo. Eventualmente, queremos que o código se pareça com algo assim:

if (action === 'calculate') {
  const firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  const secondValue = displayedNum
  
  display.textContent = calculate(firstValue, operator, secondValue)
}

Isso significa que precisamos criar uma função calculate. Ela deve ter três parâmetros: o primeiro número, o operador, e o segundo número.

const calculate = (n1, operator, n2) => {
  // Realizar um cálculo e retornar o valor calculado
}

Se o operador for add, queremos somar os dois valores. Se o operador for subtract, queremos subtrair os valores, e assim por diante.

const calculate = (n1, operator, n2) => {
  let result = ''
  
  if (operator === 'add') {
    result = n1 + n2
  } else if (operator === 'subtract') {
    result = n1 - n2
  } else if (operator === 'multiply') {
    result = n1 * n2
  } else if (operator === 'divide') {
    result = n1 / n2
  }
  
  return result
}

Lembre-se de que firstValue e secondValue são strings. Se juntar os dois valores, você vai concatená-los (1 + 1 = 11).

Portanto, antes de calcular o resultado, queremos converter strings em números. Podemos fazer isso com as funções parseInt e parseFloat.

• parseInt converte uma string em um número inteiro.
• parseFloat converte uma string em um um número de ponto flutuante (um número com casas decimais).

Para uma calculadora, precisamos de um número com casas decimais.

const calculate = (n1, operator, n2) => {
  let result = ''
  
  if (operator === 'add') {
    result = parseFloat(n1) + parseFloat(n2)
  } else if (operator === 'subtract') {
    result = parseFloat(n1) - parseFloat(n2)
  } else if (operator === 'multiply') {
    result = parseFloat(n1) * parseFloat(n2)
  } else if (operator === 'divide') {
    result = parseFloat(n1) / parseFloat(n2)
  }
  
  return result
}

Isso é tudo para o caminho ideal!

Você pode pegar o código fonte para o caminho ideal através deste link (texto em inglês - role até o final e digite seu nome e endereço de e-mail, que o código fonte será enviado diretamente para o seu e-mail).

Casos mais extremos

O caminho ideal não é o suficiente. Para construir uma calculadora robusta, é necessário tornar a sua calculadora resistente a padrões de entrada estranhos. Para fazer isso, você deve imaginar um arruaceiro que tenta quebrar sua calculadora, batendo as teclas na ordem errada. Vamos chamar este arruaceiro de Tim.

Tim pode clicar nessas teclas em qualquer ordem:

1. Uma tecla numérica (0–9)
2. Uma tecla de operador (+, -, ×, ÷)
3. Um número decimal
4. A tecla de sinal de igual (=)
5. A tecla para limpar (AC)

O que acontece se o Tim clicar na tecla decimal

Se o Tim clicar em uma tecla decimal quando o visor já mostrar um ponto decimal, nada deve acontecer.

Aqui podemos ver que o numero exibido contém um . com o método  includes.

includes verifica strings para uma determinada correspondência. Se uma string não for encontrada, ela retornará true; caso contrário, retornará false.

Observação: includes faz distinção entre maiúsculas e minúsculas.

// Exemplo do funcionamento de includes.
const string = 'The hamburgers taste pretty good!'
const hasExclamation = string.includes('!')
console.log(hasExclamation) // true

Para verificar se a string já possui um ponto, fazemos assim:

// Não fazer nada se a string já tiver um ponto
if (!displayedNum.includes('.')) {
  display.textContent = displayedNum + '.'
}

Em seguida, se Tim pressionar a tecla decimal depois de pressionar uma tecla de operador, o visor deverá mostrar 0..

Agora precisamos saber se a tecla anterior é um operador. Podemos dizer verificando o atributo personalizado, data-previous-key-type, que definimos na lição anterior.

data-previous-key-type ainda não está completo. Para identificar corretamente se previousKeyType é um operador, precisamos atualizar previousKeyType para cada tecla clicada.

if (!action) {
  // ...
  calculator.dataset.previousKey = 'number'
}

if (action === 'decimal') {
  // ...
  calculator.dataset.previousKey = 'decimal'
}

if (action === 'clear') {
  // ...
  calculator.dataset.previousKeyType = 'clear'
}

if (action === 'calculate') {
 // ...
  calculator.dataset.previousKeyType = 'calculate'
}

Assim que tivermos o previousKeyType correto, podemos usá-lo para verificar se a tecla anterior é um operador.

if (action === 'decimal') {
  if (!displayedNum.includes('.')) {
    display.textContent = displayedNum + '.'
  } else if (previousKeyType === 'operator') {
    display.textContent = '0.'
  }
  
calculator.dataset.previousKeyType = 'decimal'
}

O que acontece se Tim apertar uma tecla de operador

Se Tim apertar uma tecla de operador primeiro, a tecla deve acender (já abordamos esse caso extremo, mas como? Veja se você consegue identificar o que fizemos).

Em segundo lugar, nada deve acontecer se Tim pressionar a mesma tecla de operador várias vezes (já cobrimos este caso extremo também).

Observação: se você quiser fornecer um UX melhor, você pode mostrar o operador sendo clicado repetidamente com algumas alterações de CSS. Nós não fizemos isso aqui, mas veja se você consegue programar isso sozinho como um desafio extra de codificação.

Terceiro, se Tim pressionar outra tecla de operador depois de pressionar a primeira tecla de operador, a primeira tecla de operador deve ser liberada. Em seguida, a segunda tecla do operador deve ser pressionada (também cobrimos esse caso extremo - mas como?).

Quarto, se Tim acertar um número, um operador, um número e outro operador, nessa ordem, o display deve ser atualizado para um valor calculado.

Isso significa que precisamos usar a função calculate quando firstValue, operator e secondValue existirem.

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  const firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  const secondValue = displayedNum
  
// Obs: basta verificar firstValue e o operador, pois o secondValue existe sempre
  if (firstValue && operator) {
    display.textContent = calculate(firstValue, operator, secondValue)
  }
  
key.classList.add('is-depressed')
  calculator.dataset.previousKeyType = 'operator'
  calculator.dataset.firstValue = displayedNum
  calculator.dataset.operator = action
}

Embora possamos calcular um valor quando a tecla do operador é clicada pela segunda vez, também introduzimos um bug neste ponto - cliques adicionais na tecla do operador calculam um valor quando não deveriam.

Para evitar que a calculadora execute um cálculo em cliques subsequentes na tela do operador, precisamos verificar se o previousKeyType é um operador. Se for, não realizamos o cálculo.

if (
  firstValue &&
  operator &&
  previousKeyType !== 'operator'
) {
  display.textContent = calculate(firstValue, operator, secondValue)
}

Quinto, após a tecla do operador calcular um número, se Tim pressionar um número, seguido por um outro operador, o operador deve continuar com o cálculo, dessa maneira: 8 - 1 = 7, 7 - 2 = 5, 5 - 3 = 2.

No momento, nossa calculadora não pode fazer cálculos consecutivos. O segundo valor calculado está errado. Isso é o que temos: 99 - 1 = 98, 98 - 1 = 0.

O segundo valor é calculado incorretamente, porque colocamos valores errados na função calculate. Vamos ver algumas imagens para entender o que nosso código faz.

Entendendo nossa função de cálculo

Primeiro, digamos que um usuário clique em um número, 99. Nesse momento, nada é registrado na calculadora.

Segundo, digamos que o usuário clique no operador de subtração. Depois que o usuário clica no operador de subtração, definimos firstValue como 99. Também definimos o operator para subtrair.

Terceiro, digamos que o usuário em um segundo valor - desta vez será 1. Neste momento, o número exibido é atualizado para 1, mas nosso firstValue, operator e secondValue permanecem inalterados.

Quarto, o usuário clica em subtrair novamente. Logo após clicar em subtrair, antes de calcularmos o resultado, definimos secondValue como o número exibido.

Quinto, realizarmos o cálculo com firstValue 99, operator subtrair e secondValue 1. O resultado é 98.

Assim que o resultado é calculado, definimos a exibição para o resultado. Em seguida, configuramos o operado operator para subtrair e firstValue para o número exibido anteriormente.

Bem, isso está muito errado! Se quisermos continuar com o cálculo, precisamos atualizar firstValue com o valor calculado.

const firstValue = calculator.dataset.firstValue
const operator = calculator.dataset.operator
const secondValue = displayedNum

if (
  firstValue &&
  operator &&
  previousKeyType !== 'operator'
) {
  const calcValue = calculate(firstValue, operator, secondValue)
  display.textContent = calcValue
  
// Atualizar o valor calculado como firstValue
  calculator.dataset.firstValue = calcValue
} else {
  // Se não houver cálculo, definir displayedNum como o firstValue
  calculator.dataset.firstValue = displayedNum
}

key.classList.add('is-depressed')
calculator.dataset.previousKeyType = 'operator'
calculator.dataset.operator = action

Com isso corrigido, os cálculos consecutivos feitos pelas teclas do operador devem agora estar corretos.

O que acontece se Tim apertar a tecla de sinal de igual?

Primeiro, nada deve acontecer se Tim apertar a tecla de sinal de igual antes de qualquer tecla de operador.

Sabemos que as teclas do operador ainda não foram clicadas se firstValue não estiver definido como um número. Podemos usar esse conhecimento para evitar que a tecla de sinal de igual seja calculada.

if (action === 'calculate') {
  const firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  const secondValue = displayedNum
  
if (firstValue) {
    display.textContent = calculate(firstValue, operator, secondValue)
  }
  
calculator.dataset.previousKeyType = 'calculate'
}

Segundo, se Tim acertar um número, seguido por um operador, seguido por um igual, a calculadora deve calcular o resultado de tal forma que:

1. 2 + = —> 2 + 2 = 4
2. 2 - = —> 2 - 2 = 0
3. 2 × = —> 2 × 2 = 4
4. 2 ÷ = —> 2 ÷ 2 = 1

Já levamos essa estranha entrada em consideração. Você consegue entender o porquê? :)

Terceiro, se Tim pressionar a tecla de sinal de igual após a conclusão de um cálculo, outro cálculo deverá ser realizado novamente. Veja como o cálculo deve ser lido:

1. Tim aperta as teclas 5–1
2. Tim aperta o sinal de igual. O valor calculado é 5 - 1 = 4
3. Tim aperta o sinal de igual. O valor calculado é 4 - 1 = 3
4. Tim aperta o sinal de igual. O valor calculado é 3 - 1 = 2
5. Tim aperta o sinal de igual. O valor calculado é 2 - 1 = 1
6. Tim aperta o sinal de igual. O valor calculado é 1 - 1 = 0

Infelizmente, nossa calculadora se atrapalha nesse cálculo. Veja o que nossa calculadora mostra:

1. Tim aperta as teclas 5–1
2. Tim aperta o sinal de igual. O valor calculado é 4
3. Tim aperta o sinal de igual. O valor calculado é 1

Corrigindo o cálculo

Primeiro, suponhamos que o usuário clique no número 5. Neste momento, nada está registrado na calculadora ainda.

Segundo, suponhamos que o usuário clique no operador de subtração. Depois que ele clicar no operador de subtração, definimos o firstValue para 5. Também definimos o operator para subtrair.

Terceiro, o usuário clica em um segundo valor. Digamos que seja 1. Nesse momento, o número exibido é atualizado para 1, mas nosso firstValue, operator e secondValue permanecem inalterados.

Quarto, o usuário clica na tecla do sinal de igual. Logo após clicar no sinal de igual, mas antes do cálculo, definimos secondValue como displayedNum.

Quinto, a calculadora calcula o resultado de 5 - 1 e dá 4. O resultado é atualizado para o visor. firstValue e operator são transportados para o próximo cálculo, pois não o atualizaremos.

Sexto, quando o usuário clicar em igual novamente, definimos secondValue como displayedNum antes do cálculo.

Você pode dizer o que está errado aqui.

Ao invés de secondValue, queremos definir firstValue como o número exibido.

if (action === 'calculate') {
  let firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  const secondValue = displayedNum
  
if (firstValue) {
    if (previousKeyType === 'calculate') {
      firstValue = displayedNum
    }
    
display.textContent = calculate(firstValue, operator, secondValue)
  }
  
calculator.dataset.previousKeyType = 'calculate'
}

Também queremos levar o secondValue anterior para o novo cálculo. Para que secondValue persista no próximo cálculo, precisamos armazená-lo em outro atributo personalizado. Chamaremos esse atributo personalizado de modValue (significa valor do modificador).

if (action === 'calculate') {
  let firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  const secondValue = displayedNum
  
if (firstValue) {
    if (previousKeyType === 'calculate') {
      firstValue = displayedNum
    }
    
display.textContent = calculate(firstValue, operator, secondValue)
  }
  
// Definir o atributo modValue
  calculator.dataset.modValue = secondValue
  calculator.dataset.previousKeyType = 'calculate'
}

Se o previousKeyType é calculate, sabemos que podemos usar calculator.dataset.modValue como secondValue. Uma vez que sabemos disso, podemos fazer o cálculo.

if (firstValue) {
  if (previousKeyType === 'calculate') {
    firstValue = displayedNum
    secondValue = calculator.dataset.modValue
  }
  
display.textContent = calculate(firstValue, operator, secondValue)
}

Com isso, temos o cálculo correto quando a tecla do sinal de igual é clicada consecutivamente.

Voltando para a tecla do sinal de igual

Quarto, se o Tim clicar em uma tecla decimal ou uma tecla numérica após a tecla da calculadora, o visor deve ser substituído por 0. ou pelo novo número, respectivamente.

Ao invés de apenas verificar se o previousKeyType é operator, também precisamos verificar se é calculate.

if (!action) {
  if (
    displayedNum === '0' ||
    previousKeyType === 'operator' ||
    previousKeyType === 'calculate'
  ) {
    display.textContent = keyContent
  } else {
    display.textContent = displayedNum + keyContent
  }
  calculator.dataset.previousKeyType = 'number'
}

if (action === 'decimal') {
  if (!displayedNum.includes('.')) {
    display.textContent = displayedNum + '.'
  } else if (
    previousKeyType === 'operator' ||
    previousKeyType === 'calculate'
  ) {
    display.textContent = '0.'
  }
  
calculator.dataset.previousKeyType = 'decimal'
}

Quinto, se Tim apertar uma tecla de operador logo após a tecla de sinal de igual, a calculadora não deve calcular.

Para fazer isso, vamos verificar se o  previousKeyType é calculate antes de realizar cálculos com as teclas do operador.

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  // ...
  
if (
    firstValue &&
    operator &&
    previousKeyType !== 'operator' &&
    previousKeyType !== 'calculate'
  ) {
    const calcValue = calculate(firstValue, operator, secondValue)
    display.textContent = calcValue
    calculator.dataset.firstValue = calcValue
  } else {
    calculator.dataset.firstValue = displayedNum
  }
  
// ...
}

A chave para limpar (AC) tem dois usos:

1. All Clear (denotado por AC) limpa tudo e restabelece a calculadora para seu estado inicial.
2. Clear entry (denotado por CE) limpa a entrada atual. Mantém os números anteriores na memória.

Quando a calculadora estiver em seu estado padrão, deve ser mostrado AC.

Primeiro, se o Tim clicar uma tecla (qualquer uma, exceto a de limpar), AC deve ser mudado para CE.

Fazemos isso verificando se data-action está clear. Caso não esteja clear, procuramos o botão clear e alteraremos seu textContent.

if (action !== 'clear') {
  const clearButton = calculator.querySelector('[data-action=clear]')
  clearButton.textContent = 'CE'
}

Em segundo lugar, se Tim apertar CE, o visor deve mostrar 0. Ao mesmo tempo, CE deverá ser revertido para AC para que Tim possa repor a calculadora em seu estado inicial.**

if (action === 'clear') {
  display.textContent = 0
  key.textContent = 'AC'
  calculator.dataset.previousKeyType = 'clear'
}

Terceiro, se Tim pressionar AC, a calculadora deverá ser redefinida para seu estado inicial.

Para redefinir a calculadora para seu estado inicial, precisamos limpar todos os atributos personalizados que definimos.

if (action === 'clear') {
  if (key.textContent === 'AC') {
    calculator.dataset.firstValue = ''
    calculator.dataset.modValue = ''
    calculator.dataset.operator = ''
    calculator.dataset.previousKeyType = ''
  } else {
    key.textContent = 'AC'
  }
  
display.textContent = 0
  calculator.dataset.previousKeyType = 'clear'
}

Então é isso — pelo menos para os casos mais extremos!

Você pode pegar o código fonte para a parte de casos extremos neste link (texto em inglês - role para baixo e digite seu endereço de e-mail, o código fonte será enviado diretamente para o seu e-mail).

Até agora, o código que criamos juntos é bastante confuso. Você provavelmente se perderá se tentar ler o código por conta própria. Vamos refatorá-lo para torná-lo mais limpo.

Refatorando o código

Quando você refatorar, muitas vezes você começará com as melhorias mais óbvias. Neste caso, vamos começar com calculate.

Antes de continuar, certifique-se de conhecer essas práticas/recursos de JavaScript. Vamos usá-los no refatoramento.

1. Returns antecipados (texto explicativo em inglês)
2. Operadores ternários
3. Funções puras (texto explicativo em inglês)
4. Desestruturação da ES6 (texto explicativo em inglês)

Com isso, vamos começar!

Refatorando a função de cálculo

Eis o que temos até agora.

const calculate = (n1, operator, n2) => {
  let result = ''
  if (operator === 'add') {
    result = parseFloat(n1) + parseFloat(n2)
  } else if (operator === 'subtract') {
    result = parseFloat(n1) - parseFloat(n2)
  } else if (operator === 'multiply') {
    result = parseFloat(n1) * parseFloat(n2)
  } else if (operator === 'divide') {
    result = parseFloat(n1) / parseFloat(n2)
  }
  
  return result
}

Você aprendeu que devemos reduzir o máximo possível as reatribuições. Aqui, podemos remover as tarefas se devolvermos o resultado do cálculo dentro das declarações de if e else if:

const calculate = (n1, operator, n2) => {
  if (operator === 'add') {
    return firstNum + parseFloat(n2)
  } else if (operator === 'subtract') {
    return parseFloat(n1) - parseFloat(n2)
  } else if (operator === 'multiply') {
    return parseFloat(n1) * parseFloat(n2)
  } else if (operator === 'divide') {
    return parseFloat(n1) / parseFloat(n2)
  }
}

Como retornamos todos os valores, podemos utilizar early returns (ou retornos antecipados, em tradução literal). Se o fizermos, não há necessidade das condições de else if.

const calculate = (n1, operator, n2) => {
  if (operator === 'add') {
    return firstNum + parseFloat(n2)
  }
  
  if (operator === 'subtract') {
    return parseFloat(n1) - parseFloat(n2)
  }
  
  if (operator === 'multiply') {
    return parseFloat(n1) * parseFloat(n2)
  }
  
  if (operator === 'divide') {
    return parseFloat(n1) / parseFloat(n2)
  }
}

E como temos uma declaração com a condição if, podemos remover os colchetes (embora alguns desenvolvedores afirmem que precisamos deles). Veja como ficaria o código:

const calculate = (n1, operator, n2) => {
  if (operator === 'add') return parseFloat(n1) + parseFloat(n2)
  if (operator === 'subtract') return parseFloat(n1) - parseFloat(n2)
  if (operator === 'multiply') return parseFloat(n1) * parseFloat(n2)
  if (operator === 'divide') return parseFloat(n1) / parseFloat(n2)
}

Chamamos parseFloat oito vezes na função. Podemos simplificá-lo criando duas variáveis para conter valores decimais:

const calculate = (n1, operator, n2) => {
  const firstNum = parseFloat(n1)
  const secondNum = parseFloat(n2)
  if (operator === 'add') return firstNum + secondNum
  if (operator === 'subtract') return firstNum - secondNum
  if (operator === 'multiply') return firstNum * secondNum
  if (operator === 'divide') return firstNum / secondNum
}

Terminamos calculate. Não acha que está mais fácil de ler em comparação com o código que tínhamos antes?

Refatorando o event listener (ouvinte de eventos)

O código que criamos para o ouvinte de eventos (event listener) é enorme. Veja o que temos no momento:

keys.addEventListener('click', e => {
  if (e.target.matches('button')) {
  
    if (!action) { /* ... */ }
    
    if (action === 'add' ||
      action === 'subtract' ||
      action === 'multiply' ||
      action === 'divide') {
      /* ... */
    }
    
    if (action === 'clear') { /* ... */ }
    if (action !== 'clear') { /* ... */ }
    if (action === 'calculate') { /* ... */ }
  }
})

Como você começaria a refatorar esse pedaço de código? Se você não conhece nenhuma prática recomendada de programação, pode ficar tentado a refatorar dividindo cada tipo de ação em uma função menor:

// Não faça isso!
const handleNumberKeys = (/* ... */) => {/* ... */}
const handleOperatorKeys = (/* ... */) => {/* ... */}
const handleDecimalKey = (/* ... */) => {/* ... */}
const handleClearKey = (/* ... */) => {/* ... */}
const handleCalculateKey = (/* ... */) => {/* ... */}

Não faça isso. Isso não ajuda, porque você está apenas dividindo blocos de código. Quando você faz isso, a função fica mais difícil de ler.

Uma maneira melhor é dividir o código em funções puras e impuras. Se fizer isso, você obterá um código parecido com este:

keys.addEventListener('click', e => {
  // Função pura
  const resultString = createResultString(/* ... */)
  
  // Cálculo "impuro"
  display.textContent = resultString
  updateCalculatorState(/* ... */)
})

Na código acima, createResultString é uma função pura que retorna o que precisa ser exibido na calculadora. updateCalculatorState é uma função impura que altera a aparência visual e os atributos personalizados da calculadora.

Criando createResultString

Como mencionado anteriormente, createResultString deve retornar o valor que precisa ser exibido na calculadora.
Você pode obter esses valores através de partes do código que diz display.textContent = 'some value.

display.textContent = 'some value'

Ao invés de display.textContent = 'some value', queremos retornar cada valor para que possamos usá-lo mais tarde.

// substitua o que temos acima por isso
return 'some value'

Vamos fazer um passo a passo, começando com as teclas numéricas.

Criando a string de resultado para teclas numéricas

Este é o código que temos para as teclas numéricas:

if (!action) {
  if (
    displayedNum === '0' ||
    previousKeyType === 'operator' ||
    previousKeyType === 'calculate'
  ) {
    display.textContent = keyContent
  } else {
    display.textContent = displayedNum + keyContent
  }
  calculator.dataset.previousKeyType = 'number'
}

O primeiro passo é copiar as partes que dizem display.textContent = 'some value' emcreateResultString. Ao fazer isso, certifique-se de mudar o display.textContent = em return.

const createResultString = () => {
  if (!action) {
    if (
      displayedNum === '0' ||
      previousKeyType === 'operator' ||
      previousKeyType === 'calculate'
    ) {
      return keyContent
    } else {
      return displayedNum + keyContent
    }
  }
}

Em seguida, podemos converter a declaração if/else para um operador ternário:

const createResultString = () => {
  if (action!) {
    return displayedNum === '0' ||
      previousKeyType === 'operator' ||
      previousKeyType === 'calculate'
      ? keyContent
      : displayedNum + keyContent
  }
}

Quando você refatorar, lembre-se de anotar uma lista de variáveis que você precisa. Voltaremos à lista mais tarde.

const createResultString = () => {
  // As variáveis necessárias são:
  // 1. keyContent
  // 2. displayedNum
  // 3. previousKeyType
  // 4. action
  
  if (action!) {
    return displayedNum === '0' ||
      previousKeyType === 'operator' ||
      previousKeyType === 'calculate'
      ? keyContent
      : displayedNum + keyContent
  }
}

Criando a string de resultado para a tecla decimal

Aqui está o código que temos para a tecla decimal:

if (action === 'decimal') {
  if (!displayedNum.includes('.')) {
    display.textContent = displayedNum + '.'
  } else if (
    previousKeyType === 'operator' ||
    previousKeyType === 'calculate'
  ) {
    display.textContent = '0.'
  }
  
  calculator.dataset.previousKeyType = 'decimal'
}

Assim como antes, queremos mover qualquer coisa que mude o display.textContent para createResultString.

const createResultString = () => {
  // ...
  
  if (action === 'decimal') {
    if (!displayedNum.includes('.')) {
      return = displayedNum + '.'
    } else if (previousKeyType === 'operator' || previousKeyType === 'calculate') {
      return = '0.'
    }
  }
}

Como queremos retornar todos os valores, podemos converter a declaração else if para early returns (retornos antecipados, em tradução livre).

const createResultString = () => {
  // ...
  
  if (action === 'decimal') {
    if (!displayedNum.includes('.')) return displayedNum + '.'
    if (previousKeyType === 'operator' || previousKeyType === 'calculate') return '0.'
  }
}

Um erro comum aqui é esquecer de retornar o número exibido no momento quando nenhuma condição é correspondida. Precisamos disso porque substituiremos display.textContent pelo valor retornado de createResultString. Se falharmos, createResultString retornará undefined, o que não é o que desejamos.

const createResultString = () => {
  // ...
  
  if (action === 'decimal') {
    if (!displayedNum.includes('.')) return displayedNum + '.'
    if (previousKeyType === 'operator' || previousKeyType === 'calculate') return '0.'
    return displayedNum
  }
}

Como sempre, observe as variáveis que são necessárias. Neste momento, as variáveis necessárias permanecem as mesmas de antes:

const createResultString = () => {
  // As variáveis necessárias são:
  // 1. keyContent
  // 2. displayedNum
  // 3. previousKeyType
  // 4. action
}

Criando a string de resultados para as teclas do operador

Esse é o código que escrevemos para as teclas do operador.

if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) {
  const firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  const secondValue = displayedNum
  
  if (
    firstValue &&
    operator &&
    previousKeyType !== 'operator' &&
    previousKeyType !== 'calculate'
  ) {
    const calcValue = calculate(firstValue, operator, secondValue)
    display.textContent = calcValue
    calculator.dataset.firstValue = calcValue
  } else {
    calculator.dataset.firstValue = displayedNum
  }
  
  key.classList.add('is-depressed')
  calculator.dataset.previousKeyType = 'operator'
  calculator.dataset.operator = action
}

Você já sabe o que fazer: queremos mover tudo o que altera display.textContent paracreateResultString. Isso é o que precisa ser movido:

const createResultString = () => {
  // ...
  if (
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply' ||
    action === 'divide'
  ) {
    const firstValue = calculator.dataset.firstValue
    const operator = calculator.dataset.operator
    const secondValue = displayedNum
    
    if (
      firstValue &&
      operator &&
      previousKeyType !== 'operator' &&
      previousKeyType !== 'calculate'
    ) {
      return calculate(firstValue, operator, secondValue)
    }
  }
}

Lembre-se: a createResultString precisa retornar o valor a ser exibido na calculadora. Se a condição if não corresponder, ainda assim queremos retornar o número exibido.

const createResultString = () => {
  // ...
  if (
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply' ||
    action === 'divide'
  ) {
    const firstValue = calculator.dataset.firstValue
    const operator = calculator.dataset.operator
    const secondValue = displayedNum
    
    if (
      firstValue &&
      operator &&
      previousKeyType !== 'operator' &&
      previousKeyType !== 'calculate'
    ) {
      return calculate(firstValue, operator, secondValue)
    } else {
      return displayedNum
    }
  }
}

Podemos então refatorar a declaração if/else em um operador ternário:

const createResultString = () => {
  // ...
  if (
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply' ||
    action === 'divide'
  ) {
    const firstValue = calculator.dataset.firstValue
    const operator = calculator.dataset.operator
    const secondValue = displayedNum
    
    return firstValue &&
      operator &&
      previousKeyType !== 'operator' &&
      previousKeyType !== 'calculate'
      ? calculate(firstValue, operator, secondValue)
      : displayedNum
  }
}

Se você olhar com atenção, perceberá que não há necessidade de armazenar uma variável secondValue. Podemos usar displayedNum diretamente na função calculate.

const createResultString = () => {
  // ...
  if (
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply' ||
    action === 'divide'
  ) {
    const firstValue = calculator.dataset.firstValue
    const operator = calculator.dataset.operator
    
    return firstValue &&
      operator &&
      previousKeyType !== 'operator' &&
      previousKeyType !== 'calculate'
      ? calculate(firstValue, operator, displayedNum)
      : displayedNum
  }
}

Por fim, tome nota das variáveis e propriedades necessárias. Desta vez, precisamos calculator.dataset.firstValue e calculator.dataset.operator.

const createResultString = () => {
  // As variáveis e propriedades necessárias são:
  // 1. keyContent
  // 2. displayedNum
  // 3. previousKeyType
  // 4. action
  // 5. calculator.dataset.firstValue
  // 6. calculator.dataset.operator
}

Criando a string de resultado para a tecla de limpar

Escrevemos o código abaixo para controlar a tecla clear.

if (action === 'clear') {
  if (key.textContent === 'AC') {
    calculator.dataset.firstValue = ''
    calculator.dataset.modValue = ''
    calculator.dataset.operator = ''
    calculator.dataset.previousKeyType = ''
  } else {
    key.textContent = 'AC'
  }
  
  display.textContent = 0
  calculator.dataset.previousKeyType = 'clear'
}

Como acima, queremos mover tudo o que muda o display.textContent para createResultString.

const createResultString = () => {
  // ...
  if (action === 'clear') return 0
}

Construindo a string de resultado para a tecla de igual

Aqui está o código que temos para a tecla de igual:

if (action === 'calculate') {
  let firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  let secondValue = displayedNum
  
  if (firstValue) {
    if (previousKeyType === 'calculate') {
      firstValue = displayedNum
      secondValue = calculator.dataset.modValue
    }
    
    display.textContent = calculate(firstValue, operator, secondValue)
  }
  
  calculator.dataset.modValue = secondValue
  calculator.dataset.previousKeyType = 'calculate'
}

Como acima, queremos copiar tudo o que muda o display.textContent para createResultString. Abaixo o que precisa ser copiado:

if (action === 'calculate') {
  let firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  let secondValue = displayedNum
  
  if (firstValue) {
    if (previousKeyType === 'calculate') {
      firstValue = displayedNum
      secondValue = calculator.dataset.modValue
    }
    display.textContent = calculate(firstValue, operator, secondValue)
  }
}

Ao copiar o código para createResultString, certifique-se de retornar valores para todos os cenários possíveis:

const createResultString = () => {
  // ...
  
  if (action === 'calculate') {
    let firstValue = calculator.dataset.firstValue
    const operator = calculator.dataset.operator
    let secondValue = displayedNum
    
    if (firstValue) {
      if (previousKeyType === 'calculate') {
        firstValue = displayedNum
        secondValue = calculator.dataset.modValue
      }
      return calculate(firstValue, operator, secondValue)
    } else {
      return displayedNum
    }
  }
}

Em seguida, queremos reduzir reatribuições. Podemos fazer isso passando os valores corretos para calculate por meio de um operador ternário.

const createResultString = () => {
  // ...
  
  if (action === 'calculate') {
    const firstValue = calculator.dataset.firstValue
    const operator = calculator.dataset.operator
    const modValue = calculator.dataset.modValue
    
    if (firstValue) {
      return previousKeyType === 'calculate'
        ? calculate(displayedNum, operator, modValue)
        : calculate(firstValue, operator, displayedNum)
    } else {
      return displayedNum
    }
  }
}

É possível simplificar ainda mais o código acima com outro operador ternário se você se sentir confortável com ele:

const createResultString = () => {
  // ...
  
  if (action === 'calculate') {
    const firstValue = calculator.dataset.firstValue
    const operator = calculator.dataset.operator
    const modValue = calculator.dataset.modValue
    
    return firstValue
      ? previousKeyType === 'calculate'
        ? calculate(displayedNum, operator, modValue)
        : calculate(firstValue, operator, displayedNum)
      : displayedNum
  }
}

Agora, queremos anotar novamente as propriedades e variáveis necessárias:

const createResultString = () => {
  // As variáveis e propriedades necessárias são:
  // 1. keyContent
  // 2. displayedNum
  // 3. previousKeyType
  // 4. action
  // 5. calculator.dataset.firstValue
  // 6. calculator.dataset.operator
  // 7. calculator.dataset.modValue
}

Passando as variáveis necessárias

Precisamos de sete propriedades/variáveis em createResultString:

1. keyContent
2. displayedNum
3. previousKeyType
4. action
5. firstValue
6. modValue
7. operator

Podemos obter keyContent e action a partir de key. Também podemos obter firstValue, modValue, operator e previousKeyType a partir de calculator.dataset.

Isso significa que a função createResultString precisa de três variáveis — key, displayedNum e calculator.dataset. Como calculator.dataset representa o estado da calculadora, vamos usar uma variável chamada state.

const createResultString = (key, displayedNum, state) => {
  const keyContent = key.textContent
  const action = key.dataset.action
  const firstValue = state.firstValue
  const modValue = state.modValue
  const operator = state.operator
  const previousKeyType = state.previousKeyType
  // ... Refatore conforme seja necessário
}

// Usando createResultString
keys.addEventListener('click', e => {
  if (e.target.matches('button')) return
  const displayedNum = display.textContent
  const resultString = createResultString(e.target, displayedNum, calculator.dataset)
  
  // ...
})

Sinta-se à vontade para desestruturar variáveis, se desejar:

const createResultString = (key, displayedNum, state) => {
  const keyContent = key.textContent
  const { action } = key.dataset
  const {
    firstValue,
    modValue,
    operator,
    previousKeyType
  } = state
  
  // ...
}

Consistência nas declarações if

Em createResultString, usamos as seguintes condições para testar o tipo de teclas que foram clicadas:

// Se a tecla for numérica
if (!action) { /* ... */ }

// Se a tecla for decimal
if (action === 'decimal') { /* ... */ }

// Se a tecla for um operador
if (
  action === 'add' ||
  action === 'subtract' ||
  action === 'multiply' ||
  action === 'divide'
) { /* ... */}

// Se a tecla for a de limpar
if (action === 'clear') { /* ... */ }

// Se a tecla for um calcular
if (action === 'calculate') { /* ... */ }

Eles não são consistentes, por isso são difíceis de ler. Se possível, queremos torná-las consistentes para que possamos escrever algo assim:

if (keyType === 'number') { /* ... */ }
if (keyType === 'decimal') { /* ... */ }
if (keyType === 'operator') { /* ... */}
if (keyType === 'clear') { /* ... */ }
if (keyType === 'calculate') { /* ... */ }

Para isso, podemos criar uma função chamada getKeyType. Essa função deve retornar o tipo de tecla que foi clicada.

const getKeyType = (key) => {
  const { action } = key.dataset
  if (!action) return 'number'
  if (
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply' ||
    action === 'divide'
  ) return 'operator'
  // Para todo o resto, retorne a ação (action)
  return action
}

Veja como você usaria a função:

const createResultString = (key, displayedNum, state) => {
  const keyType = getKeyType(key)
  
  if (keyType === 'number') { /* ... */ }
  if (keyType === 'decimal') { /* ... */ }
  if (keyType === 'operator') { /* ... */}
  if (keyType === 'clear') { /* ... */ }
  if (keyType === 'calculate') { /* ... */ }
}

Terminamos com a função createResultString. Vamos continuar com updateCalculatorState.

Construindo updateCalculatorState

updateCalculatorState é uma função que altera a aparência visual e os atributos personalizados da calculadora.

Assim como createResultString, precisamos verificar qual tecla foi clicada. Nesse caso, vamos reutilizar a função getKeyType.

const updateCalculatorState = (key) => {
  const keyType = getKeyType(key)
  
  if (keyType === 'number') { /* ... */ }
  if (keyType === 'decimal') { /* ... */ }
  if (keyType === 'operator') { /* ... */}
  if (keyType === 'clear') { /* ... */ }
  if (keyType === 'calculate') { /* ... */ }
}

Se você observar o código restante, poderá notar que mudamos os dados data-previous-key-type para cada tipo de tecla. Veja abaixo como o código se parece:

const updateCalculatorState = (key, calculator) => {
  const keyType = getKeyType(key)
  
  if (!action) {
    // ...
    calculator.dataset.previousKeyType = 'number'
  }
  
  if (action === 'decimal') {
    // ...
    calculator.dataset.previousKeyType = 'decimal'
  }
  
  if (
    action === 'add' ||
    action === 'subtract' ||
    action === 'multiply' ||
    action === 'divide'
  ) {
    // ...
    calculator.dataset.previousKeyType = 'operator'
  }
  
  if (action === 'clear') {
    // ...
    calculator.dataset.previousKeyType = 'clear'
  }
  
  if (action === 'calculate') {
    calculator.dataset.previousKeyType = 'calculate'
  }
}

Isso é redundante porque já conhecemos o tipo de tecla com o getKeyType. Podemos refatorar o código acima para:

const updateCalculatorState = (key, calculator) => {
  const keyType = getKeyType(key)
  calculator.dataset.previousKeyType = keyType
    
  if (keyType === 'number') { /* ... */ }
  if (keyType === 'decimal') { /* ... */ }
  if (keyType === 'operator') { /* ... */}
  if (keyType === 'clear') { /* ... */ }
  if (keyType === 'calculate') { /* ... */ }
}

Construindo updateCalculatorState para teclas de operador

Visualmente, precisamos garantir que todas as teclas liberem seu estado deprimido. Abaixo, podemos copiar e colar o código que tínhamos antes:

const updateCalculatorState = (key, calculator) => {
  const keyType = getKeyType(key)
  calculator.dataset.previousKeyType = keyType
  
  Array.from(key.parentNode.children).forEach(k => k.classList.remove('is-depressed'))
}

Aqui está o que sobrou do que escrevemos para as teclas de operador, depois de mover as partes relacionadas a display.textContent para createResultString.

if (keyType === 'operator') {
  if (firstValue &&
      operator &&
      previousKeyType !== 'operator' &&
      previousKeyType !== 'calculate'
  ) {
    calculator.dataset.firstValue = calculatedValue
  } else {
    calculator.dataset.firstValue = displayedNum
  }
  
  key.classList.add('is-depressed')
  calculator.dataset.operator = key.dataset.action
}

Você pode perceber que podemos encurtar o código com um operador ternário:

if (keyType === 'operator') {
  key.classList.add('is-depressed')
  calculator.dataset.operator = key.dataset.action
  calculator.dataset.firstValue = firstValue &&
    operator &&
    previousKeyType !== 'operator' &&
    previousKeyType !== 'calculate'
    ? calculatedValue
    : displayedNum
}

Como anteriormente, observe as variáveis e propriedades que você precisa. Aqui, nós vamos precisar de calculatedValue e displayedNum.

const updateCalculatorState = (key, calculator) => {
  // Variáveis e propriedades necessárias
  // 1. key
  // 2. calculator
  // 3. calculatedValue
  // 4. displayedNum
}

Construindo updateCalculatorState para a tecla de limpar (AC)

Aqui está o código restante para a tecla de limpeza:

if (action === 'clear') {
  if (key.textContent === 'AC') {
    calculator.dataset.firstValue = ''
    calculator.dataset.modValue = ''
    calculator.dataset.operator = ''
    calculator.dataset.previousKeyType = ''
  } else {
    key.textContent = 'AC'
  }
}

if (action !== 'clear') {
  const clearButton = calculator.querySelector('[data-action=clear]')
  clearButton.textContent = 'CE'
}

Não há muito o que possamos refatorar aqui. Sinta-se à vontade para copiar e colar tudo em updateCalculatorState.

Construindo updateCalculatorState para a tecla de sinal de igual

Abaixo o código que escrevemos para a chave de igual:

if (action === 'calculate') {
  let firstValue = calculator.dataset.firstValue
  const operator = calculator.dataset.operator
  let secondValue = displayedNum
  
  if (firstValue) {
    if (previousKeyType === 'calculate') {
      firstValue = displayedNum
      secondValue = calculator.dataset.modValue
    }
    
    display.textContent = calculate(firstValue, operator, secondValue)
  }
  
  calculator.dataset.modValue = secondValue
  calculator.dataset.previousKeyType = 'calculate'
}

Eis o que nos resta se removermos tudo o que diz respeito a display.textContent.

if (action === 'calculate') {
  let secondValue = displayedNum
  
  if (firstValue) {
    if (previousKeyType === 'calculate') {
      secondValue = calculator.dataset.modValue
    }
  }
  
  calculator.dataset.modValue = secondValue
}

Podemos refatorar isto para o seguinte:

if (keyType === 'calculate') {
  calculator.dataset.modValue = firstValue && previousKeyType === 'calculate'
    ? modValue
    : displayedNum
}

Como sempre, anote as propriedades e variáveis usadas:

const updateCalculatorState = (key, calculator) => {
  // Variáveis e propriedades necessárias
  // 1. key
  // 2. calculator
  // 3. calculatedValue
  // 4. displayedNum
  // 5. modValue
}

Passando variáveis necessárias

Sabemos que precisamos de cinco propriedades/variáveis para updateCalculatorState:

1. key
2. calculator
3. calculatedValue
4. displayedNum
5. modValue

Como o modValue pode ser acessado de calculator.dataset,  só precisamos passar quatro valores:

const updateCalculatorState = (key, calculator, calculatedValue, displayedNum) => {
  // ...
}

keys.addEventListener('click', e => {
  if (e.target.matches('button')) return
  
  const key = e.target
  const displayedNum = display.textContent
  const resultString = createResultString(key, displayedNum, calculator.dataset)
  
  display.textContent = resultString
  
  // Passe os valores necessários
  updateCalculatorState(key, calculator, resultString, displayedNum)
})

Refatorando updateCalculatorState novamente

Mudamos três tipos de valores em updateCalculatorState:

1. calculator.dataset
2. A classe para operadores pressionados/despressionados
3. AC para CE

Se quiser tornar ainda mais claro, você pode dividir (2) e (3) em outra função — updateVisualState. Veja como pode ficar o  updateVisualState:

const updateVisualState = (key, calculator) => {
  const keyType = getKeyType(key)
  Array.from(key.parentNode.children).forEach(k => k.classList.remove('is-depressed'))
  
  if (keyType === 'operator') key.classList.add('is-depressed')
  
  if (keyType === 'clear' && key.textContent !== 'AC') {
    key.textContent = 'AC'
  }
  
  if (keyType !== 'clear') {
    const clearButton = calculator.querySelector('[data-action=clear]')
    clearButton.textContent = 'CE'
  }
}

Finalizando

O código fica muito mais limpo após a refatoração. Se você examinar o ouvinte de eventos (event listener), saberá o que cada função faz. Abaixo, está a versão final do ouvinte de eventos (event listener):

keys.addEventListener('click', e => {
  if (e.target.matches('button')) return
  const key = e.target
  const displayedNum = display.textContent
  
  // Funções puras
  const resultString = createResultString(key, displayedNum, calculator.dataset)
  
  // Estados (states) atualizados
  display.textContent = resultString
  updateCalculatorState(key, calculator, resultString, displayedNum)
  updateVisualState(key, calculator)
})

Você pode pegar o código fonte para a parte de refatoração através deste link (texto em inglês - role até o final e digite seu nome e endereço de e-mail, que o código fonte será enviado diretamente para o seu e-mail).

Espero que tenha gostado deste artigo. Caso tenha gostado, talvez se interesse por Learn JavaScript ("Aprenda Javascript", em inglês) —um curso onde mostrarei como construir 20 componentes, passo a passo, da mesma maneira que construímos essa calculadora.

Observação: podemos melhorar ainda mais a calculadora adicionando suporte ao teclado e recursos de acessibilidade, como regiões, ao vivo. Quer saber como? Confira em Learn JavaScript (em inglês) :)

A propriedade z-index do CSS permite posicionar elementos em camadas uns sobre os outros. Ela é muito útil e, honestamente, uma ferramenta muito importante que você deve saber como usar no CSS.

Infelizmente, o z-index é uma daquelas propriedades que nem sempre se comporta de maneira intuitiva. A princípio, ela parece simples — um número com o z-index mais alto significa que o elemento estará em cima dos elementos com números de z-index mais baixos. Mas existem algumas regras adicionais que tornam as coisas mais complicadas. E nem sempre é possível consertar as coisas ajustando o z-index para 999999!

Este artigo explicará em detalhes quatro das razões mais comuns para o z-index não funcionar, e como você pode resolvê-las.

Vamos passar por alguns exemplos reais de código. Após ler este artigo, você será capaz de entender e evitar essas armadilhas comuns do z-index!

Vamos verificar o primeiro motivo:

1. Os elementos no mesmo contexto de empilhamento serão exibidos na ordem em que aparecem, com os últimos elementos em cima dos primeiros.

Em nosso primeiro exemplo, temos um layout relativamente simples que inclui 3 elementos principais:

• Uma imagem de um gato
• Um bloco branco com um texto
• Outra imagem do mesmo gato

Aqui está o HTML do nosso exemplo:

<div class="cat-top"></div> 

<div class="content__block"> Meow meow meow... </div> 

<div class="cat-bottom"></div>

Neste layout, queremos que o bloco branco com o texto esteja em cima dos dois gatos.

Para tentarmos conseguir isso, adicionamos margens negativas ao CSS para ambas as imagens de gatos, de modo que elas se sobreponham um pouco sobre o bloco branco:

.cat-top { 
   margin-bottom: -110px; 
} 

.cat-bottom { 
   float: right; 
   margin-top: -120px; 
}

No entanto, esta é a aparência:

O primeiro gato está de fato posicionado sob o bloco de conteúdo branco, exatamente como nós queremos., mas a imagem do segundo gato está posicionada acima do bloco!

Por que isso ocorre?

O motivo para esse comportamento é a ordem natural de empilhamento na página da web. Essas diretrizes basicamente determinam quais elementos estarão acima e quais estarão abaixo.

Mesmo que os elementos não tenham o z-index definido, há sempre um motivo para algum deles estar acima.

Em nosso caso, nenhum dos elementos tem um valor de z-index. Assim, sua ordem de empilhamento é determinada pela ordem de aparecimento. De acordo com essa regra, elementos que aparecem depois na sequência de marcação estarão acima dos elementos que vêm antes (você pode ler mais sobre as diretrizes da ordem de empilhamento na Mozilla Developer Network aqui - texto em inglês).

No nosso exemplo, com os gatos e o bloco branco, eles estão obedecendo essa regra. É por isso que o primeiro gato está abaixo do elemento do bloco branco e o bloco branco está abaixo do segundo gato.

Certo, a ordem de empilhamento está ok, mas como consertamos o CSS de modo que o segundo gato fique abaixo do bloco branco?

Vamos dar uma olhada no segundo motivo:

2. O elemento não tem sua posição definida

Uma das outras orientações que determinam a ordem de empilhamento é o fato de o elemento ter ou não a propriedade position definida.

Para definir a propriedade position de um elemento, adicione position ao seu CSS com qualquer valor que não seja static, como relative ou absolute (você pode ler mais sobre isso neste artigo que eu escrevi - texto em inglês).

De acordo com essa regra, os elementos posicionados serão exibidos acima dos elementos não posicionados.

Desse modo, definir o bloco branco de modo que tenha a propriedade position: relative e deixar os dois elementos com gatos sem posicionamento fará com que o bloco branco fique acima dos gatos na ordem de empilhamento.

Essa será a aparência – você também pode brincar com o Codepen acima.

U-húuuuu!

Agora, a próxima coisa a fazer é girar o gato de baixo ao contrário, usando a propriedade transform. Desse modo, os dois gatos estarão abaixo do bloco branco, mas somente com suas cabeças aparecendo.

Fazer isso, no entanto, causará mais uma confusão relacionada com o z-index. Trataremos do problema e da solução na próxima parte.

3. Definir algumas propriedades do CSS, como opacity ou transform, colocará o elemento em um novo contexto de empilhamento.

Como acabamos de mencionar, queremos girar o gato de baixo ao contrário. Para conseguir isso, adicionamos transform: rotate(180deg).

.cat-bottom { 
   float: right; 
   margin-top: -120px; 
   transform: rotate(180deg); 
}

Isso, porém, faz com que o gato de baixo seja exibido acima do bloco branco novamente!

O que está acontecendo aqui?

Você pode não encontrar esse problema com frequência, mas um outro aspecto da ordem de empilhamento é o fato de que algumas propriedades do CSS, como transform e opacity, colocarão o elemento em um novo contexto de empilhamento (texto em inglês) próprio.

Isso significa que adicionar a propriedade transform ao elemento .cat-bottom faz com que ele se comporte como se tivesse um z-index de 0, mesmo que não tenhamos definido sua position nem seu z-index! A W3.org tem uma documentação informativa, embora bastante densa, sobre como funciona a propriedade opacity.

Lembre-se, em nenhum momento adicionamos o valor z-index ao bloco branco, somente position: relative. Isso foi o suficiente para posicionar o bloco branco acima dos gatos não posicionados.

Porém, como o elemento .bottom-cat está agindo como se estivesse posicionado relativamente com z-index: 0, transformá-lo posicionou o gato acima do bloco branco.

A solução para isso é definir position: relative e definir explicitamente z-index pelo menos no bloco branco. Você pode ir um pouco mais longe e definir position: relative e um z-index menor para os elementos dos gatos, simplesmente por garantia.

.content__block { 
   position: relative; 
   z-index: 2; 
} 

.cat-top, .cat-bottom { 
   position: relative; z-index: 1; 
}

Na minha opinião, fazer isso resolverá a maioria, se não todas as questões mais básicas relacionadas ao z-index.

Bem, vamos passar agora ao último motivo pelo qual o z-index pode não funcionar. Este é um pouco mais complexo, pois envolve elementos pais e filhos.

4. O elemento está em um contexto de empilhamento menor devido ao nível de z-index do elemento pai

Vamos conferir nosso exemplo de código para isso:

Eis o que temos: uma página da web simples com conteúdo normal, e uma guia lateral rosa dizendo "Send Feedback" (Enviar feedback), posicionada acima do conteúdo.

Então, quando você clica na foto do gato, uma janela de modal se abre com um fundo cinza transparente de sobreposição.

Porém, mesmo quando a janela modal está aberta, a guia lateral segue acima da sobreposição cinza. Queremos que a sobreposição seja exibida sobre tudo, incluindo a guia lateral.

Vamos dar uma olhada no CSS dos elementos em questão:

.content { 
   position: relative; 
   z-index: 1; 
} 

.modal { 
   position: fixed; 
   z-index: 100; 
} 

.side-tab { 
   position: fixed; 
   z-index: 5; 
}

Todos os elementos têm suas posições definidas. A guia lateral tem um z-index de 5, que a posiciona sobre o elemento do conteúdo, que tem um z-index: 1.

Em seguida, temos o modal, com z-index: 100, o que deveria colocá-lo acima da guia lateral, com z-index: 5. Em vez disso, a sobreposição do modal fica abaixo da guia lateral.

Por que isso ocorre?

Anteriormente, tratamos de alguns fatores que são importantes para o contexto de empilhamento, como o elemento ter sua posição definida e sua ordem na marcação.

Existe, contudo, outro aspecto da ordem de empilhamento: o elemento filho é limitado ao contexto de empilhamento de seu pai.

Vamos examinar mais a fundo os três elementos em questão.

Aqui vemos a marcação:

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

Olhando para ela, podemos ver que os elementos content (conteúdo) e side-tab (guia lateral) são irmãos, ou seja, que eles existem no mesmo nível da marcação (o que é diferente do nível do z-index). Também vemos que o modal é um elemento filho do elemento content.

Como o modal está dentro do elemento content, seu z-index de 100 tem efeito apenas dentro do pai, o elemento content. Por exemplo, se houvesse outros elementos filhos de content e irmãos do modal, seus valores de z-index os colocariam acima ou abaixo uns dos outros.

O valor de z-index desses elementos filhos, no entanto, não significam nada fora do pai, pois o elemento pai content tem um z-index definido como 1.

Assim, seus filhos, incluindo o modal, não conseguem sair daquele nível do z-index.

Você pode se lembrar desta regra por meio de uma metáfora levemente deprimente: um filho pode estar limitado ao seus pais e não conseguir se libertar deles.

Existem algumas soluções para esse problema:

Solução: mover o modal para fora do elemento pai content e colocá-lo no contexto de empilhamento principal da página.

A marcação correta teria, então, esta aparência:

<section class="content"></section>

<div class="modal"></div>

<div class="side-tab"></div>

Agora, o elemento modal é irmão dos outros dois elementos. Isso coloca os três elementos no mesmo contexto de empilhamento. Assim, seus níveis de z-index afetarão uns aos outros.

Nesse novo contexto de empilhamento, os elementos serão exibidos na seguinte ordem, de cima para baixo:

• modal (z-index: 100)
• guia lateral (z-index: 5)
• conteúdo (z-index: 1)

Solução alternativa: remover o posicionamento de content, para que ele não limite o z-index do modal.

Se não quiser ou não puder mudar a marcação, você pode resolver o problema removendo a configuração de position do elemento content:

.content { 
   // Sem posição definida
} 

.modal { 
   position: absolute; 
   z-index: 100; 
} 

.side-tab { 
   position: absolute; 
   z-index: 5; 
}

Como o elemento content agora não está posicionado, ele não limitará mais o valor de z-index do modal. Assim, o modal aberto será posicionado acima do elemento da guia lateral, devido ao seu z-index maior, de 100.

Embora isso dê certo, pessoalmente, eu prefiro a primeira solução, pois se, por alguma razão no futuro, você tiver de posicionar o elemento content, ele limitará novamente a ordem do modal no contexto de empilhamento.

Em resumo

Espero que você tenha achado útil este tutorial! Para resumir, a maioria dos problemas com o z-index pode ser resolvida seguindo essas duas orientações:

1. Verificar se os elementos têm a propriedade position definida e os valores de z-index na ordem correta.
2. Verificar se não há elementos pai limitando o nível de z-index de seus filhos.

Quer mais informações?

A autora está criando um curso sobre design responsivo! Inscreva-se aqui para receber um e-mail quando o curso for publicado (site em inglês).

A autora escreve tutoriais sobre desenvolvimento para a web em seu blog, coder-coder.com, publica minidicas no Instagram e tutoriais de programação no YouTube.

O comando git push permite que você envie (ou em tradução literal, empurre) os commits de sua branch e repositório Git local para o seu repositório remoto.

Para poder fazer um git push para seu repositório remoto, você deve garantir que todas as suas alterações no repositório local sejam confirmadas.

A sintaxe deste comando é a seguinte:

git push <nome do repositório> <nome da branch>

Existem várias opções diferentes que você pode passar com o comando. Você pode aprender mais sobre elas na documentação oficial (em inglês) do Git ou executar git push --help.

Enviar para um repositório remoto e branch específicos

Para fazer um push (em tradução livre: empurrar), primeiro você deve clonar um repositório para sua máquina local.

# Quando um repositório é clonado, você trabalhará dentro da branch padrão (o padrão é `master` ou `main`)
git clone https://github.com/<usuario-do-git>/<nome-do-repositorio> && cd <nome-do-repositorio>
# faça alterações e coloque seus arquivos em staging (repita o comando `git add` para cada arquivo, ou use `git add .` para fazer o staging de todos)
git add <nome do arquivo>
# agora faça o commit de seu código
git commit -m "added some changes to my repo!"
# faça o push das alterações na branch `master`\`main` no github
git push origin master

Para aprender mais sobre as branches, confira os links abaixo (textos em inglês):

• git checkout
• git branch

Fazer o push para um repositório remoto específico e todas as suas branches

Se quiser fazer o push de todas as suas mudanças e todas suas branches para o repositório remoto, você pode usar:

git push --all <NOME-DO-REPOSITÓRIO-REMOTO>

em que:

• --all é o sinalizador que indica que você deseja enviar todas as branches para o repositório remoto.
• NOME-DO-REPOSITÓRIO-REMOTO é o nome do repositório remoto para o qual você deseja fazer o push.

Fazer o push para uma branch específica com o parâmetro force

Se quiser ignorar no Github as mudanças locais feitas no repositório do Git (que é o que a maioria dos desenvolvedores faz para uma correção no servidor de desenvolvimento), é possível usar o comando --force para enviar ignorando essas informações.

git push --force <NOME-DO-REPOSITÓRIO-REMOTO> <NOME-DA-BRANCH>

em que:

• NOME-DO-REPOSITÓRIO-REMOTO é o nome do repositório remoto para o qual você deseja enviar as informações.
• NOME-DA-BRANCH é o nome da branch remota para a qual você deseja enviar as alterações.

Fazer o push ignorando o hook pré-push do Git

Por padrão, git push acionará o modo --verify. Isso significa que o git executará qualquer script pré-push do lado do client que possa ter sido configurado. Se os scripts de pré-push falharem, o git push também falhará. Hooks (gancho, em inglês) anteriores ao push são bons para fazer coisas como verificar se as mensagens de commit batem com os padrões da empresa, executar testes, entre outras. No fim, você poderá ignorar esse comportamento padrão. Um exemplo disso: em certo cenário, você deseja enviar suas alterações para a branch de um recurso para que outro colaborador faça o pull, mas suas alterações ao trabalho em andamento estão quebrando as unidades de teste. Para que o hook seja ignorado, basta inserir o comando push e adicionar o sinalizador --no-verify

git push --no-verify

Mais informações (em inglês):

• Documentação do Git - push
• Git hooks

Suponhamos que você queira colocar uma ou mais imagens em uma página da web. Uma maneira de fazer isso é utilizando a propriedade do CSS background-image.

Essa propriedade aplica uma ou mais imagens de fundo a um elemento, como a <div>, conforme explicado na documentação (link em inglês). Ela pode ser usada por motivos estéticos, como adicionando um plano de fundo texturizado para sua página da web.

Adicionando uma imagem

É muito simples adicionar uma imagem usando a propriedade background-image. Basta informar o caminho da imagem no valor de url().

Conforme mostrado no exemplo abaixo, o caminho da imagem pode ser um link passado por um URL:

div {
   /* Background pattern from Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

Também pode ser um caminho local. Aqui está mais um exemplo:

body {
   /* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

Adicionando várias imagens

Também é possível adicionar várias imagens na propriedade background-image.

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

É muito código! Então, vamos por partes.

Vamos separar cada valor de url() das imagens com uma vírgula.

background-image: 
    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Agora posicione e destaque suas imagens aplicando propriedades adicionais.

background-repeat: no-repeat, no-repeat;
background-position: right, left; 

Existem diversas subpropriedades que você pode adicionar às suas imagens de plano de fundo, como background-repeat e/ou background-position, que usamos no exemplo acima. Você também pode adicionar gradientes (link em inglês) em uma imagem de fundo.

Veja como fica quando adicionamos todas as propriedades.

A ordem importa

A ordem em que as imagens são listadas importa devido ao empilhamento. Conforme a documentação (link em inglês), isto significa que a primeira imagem listada está mais próxima do usuário. A segunda vêm logo após a primeira, ficando por trás da primeira imagem, e assim por diante.

Aqui está um exemplo:

div {
/* Background pattern from Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
}

No código acima, foram listadas duas imagens. A primeira imagem (morocco-blue.png) ficará na frente da segunda (oriental-tiles.png). As duas imagens são do mesmo tamanho e não possuem opacidade. Portanto, só vemos a primeira imagem.

No entanto, se movermos a segunda imagem (oriental-tiles.png) 200px para a direita, será possível ver uma parte dela (o restante permanecerá oculto).

Vejamos abaixo o que acontece quando colocamos tudo junto:

Quando usar a imagem de fundo?

Existem diversas vantagens em usar a propriedade background-image. Porém, há uma desvantagem:

Conforme informado na documentação (link em inglês), a imagem pode não ser acessível a todos os usuários, como àqueles que utilizam leitores de tela.

Isso acontece porque não é possível adicionar informações textuais na propriedade background-image. Desta forma, a imagem será perdida pelos leitores de tela.

Utilize a propriedade background-image apenas quando precisar adicionar alguma decoração à sua página. Caso utilize uma imagem com algum propósito ou significado na sua página da web, é melhor utilizar o elemento HTML <img>, conforme mencionado na documentação (link em inglês).

Desta forma, é possível adicionar um texto descritivo à imagem utilizando o atributo alt. O texto fornecido no atributo será captado pelos leitores de tela.

<img class="house" 
       src="./images/farnsworth_house.jpeg"
       alt="A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

Pense assim: background-image é uma propriedade do CSS, e o CSS foca na apresentação ou no estilo; já o HTML foca na semântica ou no significado.

Quando falamos de imagens, existem diversas opções. Se a imagem for apenas decorativa, então a propriedade background-image pode ser uma boa escolha para você.

A autora escreve sobre programação e sobre as melhores maneiras de programar (site da autora: amymhaddad.com).