Aqui você encontra alguns projetos desenvolvidos durante meu aprendizado em JavaScript.
Eles foram criados com o objetivo de praticar conceitos fundamentais da linguagem, além de aperfeiçoar meus conhecimentos em HTML5, CSS3 e Tailwind.
Os projetos incluem desde exercícios clássicos de desenvolvimento web até pequenas aplicações interativas que demonstram manipulação de dados, integração com APIs e criação de interfaces dinâmicas.
Este repositório reúne alguns dos projetos que desenvolvi durante meus estudos em JavaScript. Cada projeto foi criado como forma de praticar conceitos importantes do desenvolvimento web, como manipulação do DOM, consumo de APIs, criação de interfaces dinâmicas e organização de código.
O foco principal foi utilizar JavaScript Vanilla, sem depender de frameworks, para compreender melhor como cada funcionalidade funciona por trás das aplicações modernas.
A maior parte dos projetos foi desenvolvida utilizando HTML5 e CSS3 de forma direta, criando a estrutura e a estilização das páginas sem depender exclusivamente de frameworks.
O JavaScript é o coração de todos os projetos. Todo o código foi desenvolvido utilizando JavaScript Vanilla, permitindo entender melhor como funcionam a manipulação de elementos da página, eventos e lógica das aplicações web.
O Tailwind CSS foi utilizado em alguns projetos para facilitar a estilização e tornar o desenvolvimento mais rápido e utilizar componentes prontos na internet. Mesmo utilizando o framework, também aplico CSS3 puro sempre que necessário para personalizações específicas.
O Vite foi utilizado como ferramenta de building para preparar o ambiente de desenvolvimento, permitindo trabalhar com as tecnologias de forma mais rápida, organizada e eficiente.
Aplicativo que permite verificar a temperatura e as condições climáticas de uma cidade pesquisada pelo usuário.
O projeto realiza uma consulta a uma API gratuita de clima, exibindo os dados em uma interface simples e dinâmica.
No JavaScript, a aplicação gera automaticamente a requisição correta para a API, utilizando os dados inseridos pelo usuário. As informações são tratadas e ajustadas antes da consulta, garantindo que a busca seja feita da forma mais eficiente possível.
Uma lista de tarefas dinâmica que permite adicionar novas tarefas, marcar atividades concluídas e limpar a lista.
Todo o dinamismo da aplicação é controlado pelo JavaScript, que também define quando e quais estilos devem ser aplicados na interface.
Além disso, as tarefas são armazenadas utilizando o Local Storage do navegador, permitindo que os dados permaneçam salvos mesmo após atualizar ou fechar a página.
Aplicação web interativa que permite ao usuário responder perguntas de múltipla escolha e receber uma pontuação ao final do quiz.
O projeto utiliza JavaScript para controlar toda a lógica do quiz, incluindo a exibição dinâmica das perguntas, a geração automática dos botões de resposta e o controle de navegação entre as questões.
No JavaScript, a aplicação gerencia o estado do quiz (pergunta atual e pontuação), criando os elementos da interface diretamente no DOM e associando eventos de clique a cada resposta. Ao selecionar uma alternativa, o sistema verifica se a resposta está correta, fornece feedback visual ao usuário e bloqueia novas interações, exibindo a resposta correta antes de permitir avançar para a próxima pergunta. No final, o aplicativo apresenta o resultado total e permite reiniciar o quiz.
Key Generator é uma aplicação web simples que permite gerar senhas aleatórias de 16 caracteres de forma rápida e segura.
O projeto utiliza JavaScript para controlar toda a lógica de geração da senha, criando automaticamente uma nova combinação aleatória sempre que o usuário solicita.
Além disso, a interface conta com um botão de cópia automática, que permite copiar a senha gerada para a área de transferência com apenas um clique, facilitando o uso em cadastros e sistemas.
Para melhorar a experiência do usuário, o sistema também exibe um alerta visual confirmando que a senha foi copiada com sucesso, garantindo um feedback claro após a ação.
Notes App é uma aplicação web simples que simula um bloco de notas digital, permitindo ao usuário criar e gerenciar anotações de forma prática e dinâmica.
O projeto utiliza JavaScript para controlar toda a lógica de criação, exibição e remoção das notas, adicionando novos blocos de texto à interface sempre que o usuário solicita.
Além disso, a aplicação faz uso do localStorage do navegador para armazenar as anotações, garantindo que os dados permaneçam salvos mesmo após o recarregamento da página ou fechamento do navegador.
Para melhorar a experiência do usuário, a interface é interativa e responsiva, permitindo adicionar e excluir notas facilmente, tornando o uso simples e intuitivo no dia a dia.
Age Calculator é uma aplicação web simples que calcula a idade exata do usuário a partir da sua data de nascimento, exibindo o resultado em anos, meses e dias de forma precisa.
O projeto utiliza JavaScript para controlar toda a lógica de cálculo de datas, realizando a diferença entre a data atual e a data selecionada pelo usuário através de um input do tipo date, garantindo um resultado atualizado em tempo real.
A interface permite que o usuário escolha sua data de nascimento de forma prática por meio de um calendário interativo, e ao clicar no botão de cálculo, o sistema processa e exibe imediatamente a idade detalhada.
Para melhorar a experiência do usuário, a aplicação conta com uma interface simples, intuitiva e responsiva, tornando o uso rápido e acessível em diferentes dispositivos.
Aplicativo que gera citações aleatórias sempre que a página é atualizada ou quando o usuário clica no botão para gerar uma nova citação.
O projeto realiza uma consulta a uma API gratuita de citações, recebe o texto originalmente em inglês e, em seguida, envia esse conteúdo para uma API de tradução, exibindo a frase final em português na interface.
No JavaScript, a aplicação trabalha com uma pequena pipeline de dados, pois segue uma sequência de etapas: busca a citação, extrai o texto e o autor, envia o conteúdo para tradução, recebe o resultado traduzido e atualiza dinamicamente a tela para o usuário.
Durante o desenvolvimento desses projetos eu pratiquei:
- Manipulação do DOM com JavaScript
- Consumo de APIs REST
- Organização de código em aplicações web
- Persistência de dados no navegador com Local Storage
- Tratamento e validação de dados de entrada do usuário
- Programação orientada a eventos (event listeners e interações)
- Estruturação e organização de código em projetos web
- Criação de interfaces dinâmicas e interativas
- Feedback visual para ações do usuário (UX básica)
- Manipulação de arrays e objetos em JavaScript
- Lógica de programação aplicada a problemas reais
- Uso de ferramentas modernas de desenvolvimento (Vite)
- Versionamento de código com Git
- Responsividade (CSS / mobile-first)
- Modularização de código
- Boas práticas de código
- Integração com APIs externas
Este repositório também foi possível graças a alguns educadores e plataformas que contribuíram muito para o meu aprendizado:
-
Gustavo Guanabara
Professor que me incentivou a iniciar no mundo da programação e que, mais uma vez, está contribuindo para o meu aprendizado em HTML, CSS e JavaScript.Foi através de seus ensinamentos que aprendi os fundamentos da criação de sites, tornando possíveis muitos dos projetos desenvolvidos aqui.
-
W3Schools
Plataforma que oferece uma grande quantidade de conteúdo gratuito e didático sobre JavaScript e desenvolvimento web, sendo uma fonte importante para aprofundar conhecimentos e tirar dúvidas durante os estudos. -
GreatStack (YouTube)
Canal que produz excelentes playlists de projetos utilizando diversas tecnologias. O conteúdo foi uma grande fonte de inspiração para o desenvolvimento dos projetos presentes neste repositório.
Desenvolvido por Guilherme Moreira.
Atualmente estudando JavaScript, TypeScript e React, com foco em me tornar um desenvolvedor Frontend e Backend.