image

Accede a bootcamps ilimitados y a más de 650 cursos

50
%OFF
Article image
Carlos Soares
Carlos Soares23/09/2024 09:26
Compartir

Projeto Concluído: Calculadora com React e Styled-components

  • #React

Olá galera dev!

Hoje, trago uma atualização incrível sobre o desafio de projeto que finalizei como parte do bootcamp da XP Inc. - Full Stack Developer aqui da DIO.

O desafio consistia em desenvolver uma calculadora simples utilizando React e foi uma experiência de aprendizado valiosa, me ensinando como é pratico e simples cirar um projeto em React e usar a linguagem JavaScript para manipular as estruturas de decisão no código, o que é apresentando no nosso HTML e até mesmo as estilizaçõa do css. Tudo feito dentro de arquivos JavaScript!

Descrição do Projeto

Este projeto é uma calculadora básica, desenvolvida com componentes funcionais e utilizando o hook useState para gerenciamento de estado. Ela realiza operações de adição, subtração, multiplicação e divisão, além de suportar números decimais e oferecer uma interface limpa e moderna.

image

Funcionalidades

  • Operações básicas: Adição, subtração, multiplicação e divisão.
  • Suporte a decimais: Permite cálculos com números fracionados.
  • Limpeza de visor: O botão “C” reseta os dados da calculadora.
  • Interface responsiva: Adaptável a diversos tamanhos de tela.
  • Animações: Ao clicar no botão de igual, há um feedback visual sutil.

Tecnologias Utilizadas

  • React: Para construção da interface e lógica do projeto.
  • Styled-components: Para estilização de componentes de forma dinâmica e elegante.
  • JavaScript (ES6+): Implementação da lógica da calculadora.
  • HTML5 e CSS3: Estruturação e estilo da aplicação.

Melhorias Implementadas

Durante o desenvolvimento, implementei algumas melhorias para deixar o projeto mais funcional e atrativo:

  • Alteração do esquema de cores para um tema mais moderno.
  • Adicionei uma borda arredondada ao container da calculadora.
  • Desenvolvi as funcionalidades de multiplicação e divisão.
  • Configurei o botão de ponto decimal para evitar múltiplos pontos por número.
  • Adicionei um título na interface da calculadora.

Como Testar o Projeto

Se quiser testar a calculadora, siga os passos abaixo:

  • Clone o repositório:
bash
Copiar código
git clone https://github.com/seu-usuario/calculadora-react.git
  • Acesse o diretório do projeto:
bash
Copiar código
cd calculadora-react
  • Instale as dependências:
Copiar código
npm install
  • Inicie o servidor de desenvolvimento:
sql
Copiar código
npm start
  • Acesse no navegador:
arduino
Copiar código
http://localhost:3000

Conclusão

Esse projeto me ajudou a aprender e ampliar conceitos fundamentais de React, além de me dar mais confiança no uso de styled-components e na criação de uma interface interativa. Se você tem sugestões de melhorias ou quer contribuir, fique à vontade para enviar um pull request no GitHub.

Foi uma ótima experiência e mal posso esperar para continuar explorando mais sobre React, nos demais módulos do BootCamp!

"Vamos Disseminar os Conhecimentos e Transbordar Tudo o que Conhecemos!"

Segue o link deste projeto no meu GitHub: https://github.com/Carlos-CGS/ProjetosHtmlCssJavaScript/tree/main/Calculadora_React_Dio

Segue no LinkedIn: https://www.linkedin.com/in/carlos-cgs/

Compartir
Comentarios (1)

AV

Arilane Vilegas - 23/09/2024 15:59

top