5 Projetos simples para praticar JavaScript e sair do básico

Se você já aprendeu os conceitos básicos de JavaScript, como variáveis, funções e loops, pode estar se perguntando: “O que eu faço agora?” A melhor maneira de sair do básico é colocando a mão na massa e criando pequenos projetos. Neste post, vamos apresentar cinco projetos simples, mas incríveis, para praticar JavaScript e fortalecer seu conhecimento.

Cada projeto virá acompanhado de uma explicação sobre os conceitos aplicados, código de exemplo e desafios extras para aprofundar ainda mais o aprendizado. Vamos lá? 🚀

1. Gerador de Senhas Aleatórias

O que você aprenderá:

• Manipulação de strings
• Eventos de clique
• Uso de funções e arrays

Como funciona:

O usuário define o tamanho da senha e, ao clicar em um botão, uma senha aleatória é gerada.

Exemplo de código:

function gerarSenha(tamanho) {
    const caracteres = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
    let senha = "";
    for (let i = 0; i < tamanho; i++) {
        senha += caracteres.charAt(Math.floor(Math.random() * caracteres.length));
    }
    return senha;
}

console.log(gerarSenha(10)); // Exemplo de senha gerada

Desafios extras:

• Adicionar opções para incluir ou excluir caracteres especiais
• Criar uma interface amigável com HTML e CSS

2. Relógio Digital em Tempo Real

O que você aprenderá:

• Manipulação do DOM
• Função setInterval()

Como funciona:

Exibe um relógio digital atualizado em tempo real na página.

Exemplo de código:

function atualizarRelogio() {
    const agora = new Date();
    const horas = agora.getHours().toString().padStart(2, '0');
    const minutos = agora.getMinutes().toString().padStart(2, '0');
    const segundos = agora.getSeconds().toString().padStart(2, '0');
    document.getElementById("relogio").innerText = `${horas}:${minutos}:${segundos}`;
}

setInterval(atualizarRelogio, 1000);

Desafios extras:

• Permitir que o usuário escolha entre formato 12h e 24h
• Criar um modo escuro

3. To-Do List (Lista de Tarefas)

O que você aprenderá:

• Manipulação do DOM
• Eventos de clique e entrada
• Armazenamento local com localStorage

Como funciona:

O usuário adiciona tarefas, marca como concluídas e pode removê-las.

Exemplo de código:

const input = document.getElementById("tarefa");
const botao = document.getElementById("adicionar");
const lista = document.getElementById("lista");

botao.addEventListener("click", () => {
    if (input.value) {
        const item = document.createElement("li");
        item.innerText = input.value;
        item.addEventListener("click", () => item.classList.toggle("feito"));
        lista.appendChild(item);
        input.value = "";
    }
});

Desafios extras:

• Salvar tarefas no localStorage
• Adicionar botão para editar tarefas

4. Conversor de Moedas

O que você aprenderá:

• Consumo de APIs
• Manipulação de input do usuário

Como funciona:

O usuário escolhe duas moedas e insere um valor para converter.

Exemplo de código:

async function converterMoeda(valor, de, para) {
    const resposta = await fetch(`https://api.exchangerate-api.com/v4/latest/${de}`);
    const dados = await resposta.json();
    return (valor * dados.rates[para]).toFixed(2);
}

converterMoeda(10, "USD", "BRL").then(resultado => console.log(`R$ ${resultado}`));

Desafios extras:

• Criar uma interface visual
• Permitir conversão entre mais de duas moedas

5. Jogo de Adivinhação

O que você aprenderá:

• Gerar números aleatórios
• Capturar entrada do usuário
• Estruturas condicionais

Como funciona:

O jogo escolhe um número aleatório e o usuário tem que adivinhar.

Exemplo de código:

const numeroSecreto = Math.floor(Math.random() * 100) + 1;
let tentativas = 0;

function verificarChute(chute) {
    tentativas++;
    if (chute == numeroSecreto) {
        console.log(`Parabéns! Você acertou em ${tentativas} tentativas.`);
    } else {
        console.log(chute > numeroSecreto ? "Tente um número menor." : "Tente um número maior.");
    }
}

Desafios extras:

• Criar uma interface visual
• Adicionar sistema de dicas

Conclusão

Praticar é essencial para se tornar um bom desenvolvedor, e esses projetos são um ótimo começo. Eles abordam conceitos fundamentais do JavaScript e podem ser aprimorados conforme você ganha experiência.

Agora é sua vez! Escolha um projeto e comece a codar. Se precisar de ajuda, deixe um comentário! 🚀