Primeiro passos com React - Calculadora com operações básicas de matemática, três estilos de temas disponíveis e com design responsivo
-
Criar component Botão
-
Criar component Input
-
Estilização básica página inicial
-
Criar estilização inicial Input
-
Criar estilização inicial Botão
-
Dividir layout em linha e coluna
-
Desativar input
-
Adicionar números digitados no input
- Criar função que vai enviar o value do botão para o input
- Setar função em todos os botões
- Validação para não ficar com o '0' sempre visível
-
Função limpar tela
-
Adicionar operações matemáticas
-
Função somar (apenas um número)
-
Adicionar funcionalidade ao botão "="
-
Função subtrair (apenas um número)
-
Função multiplicar (apenas um número)
-
Função dividir (apenas um número)
-
Fazer operações em sequência
-
Função deletar último dígito
-
Layout
- Alterações nos botões
- Alteração na fonte
- Ajuste iniciais no layout para tema 1
- Alterações nos botões que terão cores diferentes do tema
- Alterações no layout para ficar mais próximo do design proposto
- Ajustes no layout para desktop
-
Validações
- Limitar inclusão do "."
- Corrigir inclusão do 0
- Corrigir operações com 0 (Exemplo "3x0")
-
Funcionalidades extras
- Adicionar header
- Separar cores dos temas
- Adicionar temas
- Salvar escolha do tema no localstorage
- Carregar tema escolhido ao inicar a aplicação
- Carregar o toggle switch na posição certa ao iniciar
# Clone este repositório
$ https://github.com/paulohmoreira/calculator-react-app.git
# Acesse a pasta do projeto no seu terminal/cmd
$ cd calculator-react-app
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run start
# Ou se você usa o yarn
$ yarn run start
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000As seguintes ferramentas foram usadas na construção do projeto: