Projetos JavaScript para Iniciantes: Comece a Criar Hoje

Ler um tutorial de JavaScript e terminar um são duas experiências completamente diferentes.

A primeira dá uma sensação de produtividade. A segunda é onde você realmente aprende. Você está há um tempo ralando nas lições de JS e seu código ainda vive dentro dos exercícios de outra pessoa? Bem, não por muito mais tempo.

Saber o que são loops não vale de nada até você usar um para fazer algo funcionar. Tutoriais te ensinam as palavras. Projetos te fazem falar o idioma.

Então, aqui estão 18 projetos de JavaScript para iniciantes, cada um com um pequeno passo a passo para você saber por onde começar. Escolha um, desenvolva, e depois escolha outro.

Primeiro, Domine os Fundamentos do JavaScript

Todos os projetos de JS para iniciantes dependem de variáveis, funções, condicionais, loops, arrays, objetos e alguns métodos do DOM. Se você ainda não domina isso de olhos fechados, vai passar mais tempo brigando com a sintaxe do que desenvolvendo.

O curso de JavaScript do Coddy foi feito sob medida para isso. Lições de cinco minutos que explicam o núcleo da linguagem passo a passo. Você escreve e executa o código direto no navegador enquanto aprende. Sem complicação, sem precisar configurar ambiente e sem aquele papo de "instale o Node primeiro".

O Bugsy, nosso assistente de IA integrado, está sempre por perto em cada lição para ajudar quando algo não fizer sentido.

Se você consegue ler, escrever e explicar os tópicos a seguir sem hesitar, você está pronto. Se não, dê uma revisada no básico de JS no Coddy até conseguir.

• Variáveis e tipos primitivos (string, number, boolean)
• Estruturas condicionais if/else e switch
• Loops for, while e for...of
• Funções e arrow functions
• Arrays e seus métodos comuns (push, pop, map, filter, find)
• Objetos e notação de ponto/colchetes
• Acesso básico ao DOM (querySelector, addEventListener, textContent)

Já domina tudo isso? Excelente. Vamos programar!

Projetos Iniciais: Olá, DOM

Esses projetos são pequenos de propósito. Eles se baseiam em apenas um ou dois conceitos, para que, se algo der errado, você encontre a causa rapidamente. E olha, não pule nenhum só porque parecem simples demais!

1. O Clássico Contador

O que é: um número na tela com um botão de mais e outro de menos.

Por que é bom: é o menor aplicativo possível que usa HTML, CSS e JavaScript juntos. Você vai lidar com estado (uma variável que muda), atualizações do DOM e ouvintes de eventos (event listeners). Cerca de vinte linhas de código, mais ou menos.

Como desenvolver: uma tag span para o número e dois botões. Crie uma variável let count = 0. Adicione ouvintes de clique em cada botão para aumentar ou diminuir o contador e, em seguida, atualize o textContent do span. Desafio extra: adicione um botão de reset e impeça que o número fique menor que zero.

2. Calculadora de Gorjetas

O que é: você insere o valor da conta e a porcentagem da gorjeta, e o app mostra o valor da gorjeta e o total.

Por que é bom: apresenta inputs de formulário e o parseFloat, que costumam confundir quase todo mundo de primeira. Você também vai perceber como é fácil quebrar seus cálculos se esquecer de tratar o NaN.

Como desenvolver: dois inputs numéricos (valor da conta e porcentagem da gorjeta), um botão e dois spans de saída. Ao clicar, converta os valores dos inputs, faça o cálculo, arredonde para duas casas decimais com .toFixed(2) e exiba o resultado. Desafio extra: adicione uma opção para dividir a conta entre várias pessoas.

3. Gerador de Paleta de Cores

O que é: clique em um botão e veja uma nova cor aleatória exibida em um bloco com seu respectivo código hexadecimal.

Por que é bom: trabalha com números aleatórios, template literals e estilos inline em um único aplicativo minúsculo. O resultado é visual, o que torna tudo mais divertido.

Como desenvolver: crie uma função que gere um número inteiro aleatório entre 0 e 255 três vezes e retorne uma string como rgb(${r}, ${g}, ${b}). Defina isso como a cor de fundo do bloco. Desafio extra: gere uma paleta completa de cinco cores em vez de apenas uma.

4. Gerador de Frases Aleatórias

O que é: um botão que substitui a frase exibida por uma frase aleatória vinda de uma lista (array).

Por que é bom: excelente para praticar arrays e Math.random, além de ser um projeto rápido que você já pode compartilhar com os amigos.

Como desenvolver: defina um array de objetos de frases, contendo text (texto) e author (autor). Ao clicar no botão, escolha um índice aleatório e atualize os dois elementos na tela. Desafio extra: adicione um link para "compartilhar no X/Twitter" que abra um tweet preenchido com a frase.

5. Relógio Digital

O que é: exibe a hora atual na tela, atualizando a cada segundo.

Por que é bom: é aqui que você conhece o setInterval e o objeto Date, que usará pelo resto da sua vida como dev. Adicionar um zero à esquerda em minutos e segundos de um único dígito é um ótimo pequeno desafio de lógica.

Como desenvolver: crie uma função que leia new Date(), formate as horas, minutos e segundos, e os escreva em um span. Envolva essa função em um setInterval(updateClock, 1000). Desafio extra: adicione um botão para alternar entre o formato de 12 horas (AM/PM) e 24 horas.

6. Calculadora de IMC

O que é: insira altura e peso para obter o valor do IMC (Índice de Massa Corporal) e a classificação correspondente.

Por que é bom: um caso real de uso de condicionais para decidir qual classificação exibir. Também é uma ótima oportunidade para praticar o design limpo de um formulário.

Como desenvolver: crie inputs numéricos para altura (em cm) e peso (em kg). Ao enviar o formulário, calcule o IMC com a fórmula padrão, use uma estrutura if/else para definir a categoria e exiba ambos os valores. Desafio extra: adicione um botão para alternar para unidades imperiais (pés/polegadas e libras).

Projetos Intermediários: Mais Peças Móveis

Depois de fazer alguns projetos, você começará a notar padrões se repetindo. O clique de um botão altera uma variável, uma função atualiza a interface com base nessa variável, e o ciclo se repete. Isso é a base do desenvolvimento frontend. Os projetos a seguir vão exigir que você gerencie um pouco mais de estado ao mesmo tempo.

7. Lista de Tarefas (To-Do List)

O que é: digite uma tarefa, aperte enter e ela aparecerá em uma lista. Clique em um item para marcá-lo como concluído ou no "X" para excluí-lo.

Por que é bom: é o "Hello World" dos frameworks frontend por um bom motivo. Você vai gerenciar um array, renderizá-lo no DOM e lidar com dois ou três eventos diferentes. Se você conseguir criar uma lista de tarefas do zero, já deixou de ser um iniciante absoluto.

Como desenvolver: mantenha um array de objetos de tarefas com id, text e done. Renderize novamente como uma lista <ul> após cada alteração. Ao pressionar enter, adicione uma nova tarefa ao array. Ao clicar, alterne o estado de concluído ou use splice para remover do array. Desafio extra: salve os dados no localStorage para que as tarefas continuem lá mesmo após atualizar a página.

8. Cronômetro com Tempos de Volta

O que é: um cronômetro com botões de iniciar, parar, reiniciar e marcar volta (lap).

Por que é bom: mais desafiador do que o relógio digital, pois você precisa gerenciar sua própria variável de tempo decorrido em vez de apenas perguntar a hora ao sistema. Você vai trabalhar com Date.now(), intervalos e lógica de pausa.

Como desenvolver: armazene um startTime e um acumulador elapsed. Ao iniciar, defina startTime = Date.now() e execute um intervalo. Ao parar, faça elapsed += Date.now() - startTime. Ao marcar uma volta, adicione o tempo atual a um array e renderize-o na tela. Desafio extra: formate a exibição dos milissegundos de forma elegante.

9. Timer Pomodoro

O que é: 25 minutos de foco, 5 minutos de descanso, e repete. Um sinal sonoro avisa quando é hora de mudar de ciclo.

Por que é bom: funciona como uma máquina de estados para iniciantes. Você estará no modo "foco", "descanso" ou "pausado", e a interface muda de acordo com o modo ativo.

Como desenvolver: use o mesmo padrão de intervalo do cronômetro, mas em contagem regressiva. Monitore em qual modo o timer está. Quando o cronômetro chegar a zero, mude o modo e toque um som curto usando new Audio('beep.mp3').play(). Desafio extra: adicione um contador de sessões de foco concluídas no dia.

10. Aplicativo de Quiz

O que é: um jogo de perguntas e respostas de múltipla escolha que mostra sua pontuação no final.

Por que é bom: combina iteração de arrays, condicionais e o conceito de "estado de tela" (pergunta atual vs. tela de resultados).

Como desenvolver: defina um array de objetos de perguntas com text, options e correctIndex. Mostre uma pergunta por vez. Ao clicar em uma resposta, verifique se bate com o correctIndex, aumente a pontuação e avance para a próxima pergunta. Quando as perguntas acabarem, exiba a tela de resultados. Desafio extra: adicione um cronômetro para responder cada pergunta.

11. Gerador de Senhas

O que é: escolha o tamanho e quais tipos de caracteres incluir para gerar uma senha aleatória segura.

Por que é bom: reúne manipulação de strings, aleatoriedade e inputs do tipo checkbox em um só lugar. Além disso, é algo genuinamente útil, o que é raro em projetos de treino.

Como desenvolver: crie quatro grupos de caracteres (letras minúsculas, maiúsculas, números e símbolos). Concatene os grupos ativos com base nas caixas marcadas. Faça um loop de 'n' vezes escolhendo um caractere aleatório do grupo combinado. Desafio extra: adicione um indicador de força que avalie a segurança da senha gerada.

12. Validador de Formulários

O que é: um formulário de cadastro que destaca campos inválidos em vermelho e exibe uma mensagem de erro abaixo de cada um.

Por que é bom: o JS do mundo real faz muito disso. Envolve expressões regulares (Regex), eventos de foco e manipulação do DOM, tudo aplicado a um layout de formulário comum.

Como desenvolver: crie pequenas funções de validação para cada campo (padrão de e-mail, tamanho da senha, confirmação de senha). No evento blur (quando o usuário sai do campo), execute o validador, alterne uma classe CSS no input e atualize o span de erro correspondente. No envio do formulário, só prossiga se todas as validações passarem. Desafio extra: faça a validação em tempo real após o primeiro evento de blur.

Minijogos: Onde a Diversão Começa

Os jogos levam suas habilidades além porque envolvem estado contínuo, tempo e muita interação. A primeira vez que você faz pixels se moverem em uma tela (canvas), algo clica na sua mente sobre o que o JavaScript realmente é capaz de fazer.

13. Pedra, Papel e Tesoura

O que é: escolha pedra, papel ou tesoura. O computador também escolhe. Veja quem ganha.

Por que é bom: um excelente exercício de condicionais e aleatoriedade, com um resultado imediato de vitória ou derrota.

Como desenvolver: crie três botões para a escolha do jogador. Ao clicar, o computador escolhe aleatoriamente uma das três opções. Use uma estrutura de decisão simples (ou if/else aninhados) para definir o resultado. Registre as vitórias e derrotas ao longo das rodadas. Desafio extra: crie um sistema de "melhor de cinco" com uma tela de vitória final.

14. Jogo da Velha

O que é: o clássico jogo em uma grade 3x3, onde dois jogadores se alternam na mesma tela.

Por que é bom: apresenta o uso de um array de tamanho 9 para representar uma grade bidimensional e a lógica para verificar condições de vitória. É muito gratificante finalizar um jogo tão icônico.

Como desenvolver: renderize nove células na tela. Monitore de quem é a vez. Ao clicar em uma célula, coloque a marca do jogador atual e verifique se há uma combinação em alguma das oito linhas de vitória possíveis. Exiba um banner de vencedor quando alguém ganhar. Desafio extra: crie uma inteligência artificial básica que escolha qualquer célula vazia de forma aleatória.

15. Jogo da Memória

O que é: uma grade de cartas viradas para baixo. Clique em duas. Se forem iguais, elas continuam viradas para cima. Se não, viram de volta.

Por que é bom: envolve embaralhamento de arrays, temporizadores e uma condição clara de vitória. A primeira vez que você programar a lógica de "desvirar a carta após um segundo", você realmente vai entender o setTimeout.

Como desenvolver: duplique um array de valores para criar os pares e embaralhe-os usando o algoritmo Fisher-Yates. Renderize as cartas viradas para baixo. Ao clicar, revele a carta. Quando duas cartas forem reveladas, compare-as: se forem iguais, trave-as abertas; se não, desvire as duas após um breve intervalo. O jogo termina quando todos os pares forem encontrados. Desafio extra: adicione um contador de jogadas e salve o recorde no localStorage (armazenamento local).

16. Jogo de Adivinhação de Números

O que é: o computador escolhe um número entre 1 e 100. Você tenta adivinhar e ele diz se o número correto é "maior" ou "menor" até você acertar.

Por que é bom: simples, mas ensina manipulação de inputs, comparações e o padrão de "repetir até acertar", que aparece em todo lugar na programação.

Como desenvolver: gere um número alvo uma única vez. Monitore o número de tentativas. A cada palpite, compare com o alvo e atualize a mensagem de feedback. Bloqueie novos palpites assim que o usuário acertar. Desafio extra: limite o jogador a sete tentativas, exibindo uma tela de fim de jogo se ele não conseguir adivinhar a tempo.

17. Jogo da Forca

O que é: o computador escolhe uma palavra. Você tenta adivinhar as letras uma por uma. Erros vão desenhando o boneco na forca.

Por que é bom: é o projeto perfeito para perder o medo de manipulação de strings. Criar a exibição das letras adivinhadas vai te ensinar split, map e join de uma só vez.

Como desenvolver: escolha uma palavra de uma lista. Mostre um traço (underline) para cada letra. Conforme o jogador escolhe uma letra, revele as posições correspondentes ou registre um erro. Desenhe a forca em etapas (geralmente permitindo seis erros) usando CSS ou canvas. Desafio extra: carregue palavras de uma API pública de dicionário.

18. Jogo da Cobrinha (Snake)

O que é: o clássico jogo da cobrinha: coma a comida, cresça, e morra se bater em si mesmo ou nas paredes.

Por que é bom: este é o "chefão" dos projetos para iniciantes. Você vai lidar com grades (canvas ou CSS), eventos de teclado, um loop de jogo (game loop), detecção de colisão e mecânicas de crescimento.

Como desenvolver: renderize uma grade com CSS ou <canvas>. Armazene a cobrinha como um array de objetos de coordenadas. A cada ciclo do jogo, mova a cobrinha uma célula na direção atual. Se a nova posição da cabeça coincidir com a comida, aumente o tamanho da cobrinha e gere uma nova comida. Se a cabeça colidir com a parede ou com o próprio corpo, fim de jogo. Monitore as setas do teclado para mudar a direção. Desafio extra: aumente a velocidade do jogo conforme a pontuação sobe.

Bônus: Um Aplicativo de Clima (Weather App)

O que é: insira o nome de uma cidade e receba de volta a temperatura atual e a descrição do clima.

Por que é bom: seu primeiro contato real com uma API pública e código assíncrono. Qualquer API de clima gratuita já oferece o suficiente para você brincar.

Como desenvolver: consiga uma chave de API gratuita. Ao enviar o formulário, use o fetch passando a cidade na URL. Aguarde a resposta, converta o JSON e atualize o DOM com as informações relevantes. Envolva tudo em um bloco try/catch para que nomes de cidades inválidos não quebrem a interface. Desafio extra: adicione uma visualização de previsão do tempo para os próximos cinco dias.

Como Terminar os Projetos que Você Começa

A lista acima não serve de nada se você começar metade dos projetos e abandonar o resto. Aqui estão algumas dicas práticas que ajudam:

• Escolha o menor projeto que te empolgue. A empolgação te faz começar. A simplicidade te faz terminar. Depois, repita o processo.
• Defina um limite de tempo, não de escopo. Reserve uma ou duas horas de foco total para um projeto inicial. Se não terminar, encare isso como um aprendizado sobre onde você travou, e não como um fracasso.
• Desenvolva primeiro, embeleze depois. Faça a versão feia funcionar antes de encostar no CSS. Um projeto bonito que não funciona é muito pior do que um feio que funciona perfeitamente.
• Não pule de tutorial em tutorial. Assistir a três tutoriais diferentes para o mesmo projeto significa que você gastou tempo sem escrever uma linha de código. Desenvolva de forma imperfeita e depois pesquise apenas as partes específicas que você não souber.
• Pratique os fundamentos nos dias em que não puder programar. Cinco minutos de Coddy no ônibus já contam como uma sessão real. A constância faz toda a diferença.

Essa última dica conecta tudo. Os projetos dão vida ao que você aprendeu, mas eles dependem diretamente dos fundamentos. Lições diárias curtas são o que impedem esses projetos de parecerem inalcançáveis.

Onde o Coddy Entra Nessa História

Este não é um comercial para você usar uma ferramenta específica para criar seus projetos. Use o editor de código que preferir, execute tudo no navegador e hospede onde quiser.

A parte que o Coddy resolve vem antes: deixar seus fundamentos de JavaScript sólidos o suficiente para que "criar um app de quiz" não signifique "passar duas horas no Google pesquisando o que o .map faz".

O Coddy já ensinou JavaScript para milhões de alunos na web, iOS e Android. As mesmas lições, o mesmo progresso e o mesmo Bugsy onde quer que você abra o app.

O plano gratuito cobre todas as lições de JS sem precisar configurar nada. O único limite é o sistema de energia, que se recarrega após algumas horas.

Quer sessões ilimitadas e o Bugsy em cada comando? Os planos pagos custam cerca de metade do preço de plataformas concorrentes. De qualquer forma: primeiro os fundamentos, depois os projetos.