Se você está começando a aprender programação, ou já tem alguma experiência, a linguagem Javascript é um dos pilares do desenvolvimento web.
Neste artigo, vamos explorar 7 projetos em Javascript, que vão ajudar você a entender conceitos importantes e criar aplicações incríveis.
Vamos mergulhar na lógica por trás desses códigos e explicar como cada projeto funciona.
Projeto 1: Calculadora
A nossa primeira tarefa é criar uma calculadora simples usando HTML, CSS e Javascript. Vamos começar criando o HTML básico da nossa calculadora:
<div class="calculadora">
<input type="text" id="resultado" disabled>
<button onclick="limpar()">C</button>
<button onclick="apagar()">CE</button>
<button onclick="adicionar('/')">/</button>
<button onclick="adicionar('7')">7</button>
<button onclick="adicionar('8')">8</button>
<button onclick="adicionar('9')">9</button>
<button onclick="adicionar('*')">*</button>
<button onclick="adicionar('4')">4</button>
<button onclick="adicionar('5')">5</button>
<button onclick="adicionar('6')">6</button>
<button onclick="adicionar('-')">-</button>
<button onclick="adicionar('1')">1</button>
<button onclick="adicionar('2')">2</button>
<button onclick="adicionar('3')">3</button>
<button onclick="adicionar('+')">+</button>
<button onclick="adicionar('0')">0</button>
<button onclick="adicionar('.')">.</button>
<button onclick="calcular()">=</button>
</div>Nesse código HTML, temos um div que contém uma caixa de texto desabilitada, representando o resultado da calculadora, e botões para inserir números e operações matemáticas.
Os botões estão associados a funções do Javascript, que vamos definir agora:
let resultado = document.getElementById("resultado");
function adicionar(valor) {
resultado.value += valor;
}
function limpar() {
resultado.value = "";
}
function apagar() {
resultado.value = resultado.value.slice(0, -1);
}
function calcular() {
resultado.value = eval(resultado.value);
}Essas funções são responsáveis por adicionar valores à caixa de texto, limpar o resultado, apagar o último caractere inserido e calcular o resultado da expressão matemática inserida pelo usuário.
Projeto 2: Lista de Tarefas
Nosso segundo projeto é criar uma lista de tarefas simples, que permita adicionar, remover e marcar tarefas como concluídas. Vamos começar criando o HTML básico:
<div class="lista">
<h2>Lista de Tarefas</h2>
<input type="text" id="nova-tarefa">
<button onclick="adicionarTarefa()">Adicionar</button>
<ul id="lista-tarefas"></ul>
</div>Nesse código HTML, temos um div que contém um título, uma caixa de texto para inserir novas tarefas e um botão para adicioná-las.
Abaixo, temos uma lista ul vazia, que será preenchida com as tarefas adicionadas pelo usuário.
Agora, vamos definir as funções do Javascript que vão manipular essa lista:
let novaTarefa = document.getElementById("nova-tarefa");
let listaTarefas = document.getElementById("lista-tarefas");
function adicionarTarefa() {
if (novaTarefa.value != "") {
let novaTarefaLi = document.createElement("li");
let novaTarefaTexto = document.createTextNode(novaTarefa.value);Projeto 3: Lista de Tarefas
O terceiro projeto é uma lista de tarefas. O objetivo é criar uma interface simples em que o usuário possa adicionar tarefas à lista, marcá-las como concluídas e excluí-las da lista.
Vamos começar criando o HTML básico da página:
<!DOCTYPE html>
<html>
<head>
<title>Lista de Tarefas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Lista de Tarefas</h1>
<form id="form">
<input type="text" id="input" placeholder="Adicionar tarefa...">
<button type="submit">Adicionar</button>
</form>
<ul id="list"></ul>
<script src="script.js"></script>
</body>
</html>Perceba que incluímos um arquivo CSS e um arquivo JavaScript. Vamos criar o arquivo style.css e adicionar o seguinte código:
body {
font-family: Arial, sans-serif;
}
form {
margin-bottom: 20px;
}
input {
padding: 10px;
font-size: 16px;
border: none;
border-bottom: 2px solid #ddd;
width: 80%;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
}
li:last-child {
border-bottom: none;
}
.completed {
text-decoration: line-through;
color: #aaa;
}Esse código define o estilo da página, incluindo o estilo da lista de tarefas.
Agora, vamos criar o arquivo script.js e adicionar o seguinte código:
const form = document.querySelector('#form');
const input = document.querySelector('#input');
const list = document.querySelector('#list');
let tasks = [];
form.addEventListener('submit', (event) => {
event.preventDefault();
const text = input.value.trim();
if (text !== '') {
tasks.push({
text,
completed: false
});
render();
input.value = '';
}
});
function render() {
list.innerHTML = '';
tasks.forEach((task, index) => {
const li = document.createElement('li');
li.innerHTML = `
<span class="${task.completed ? 'completed' : ''}">${task.text}</span>
<div>
<button class="complete-button" data-index="${index}">${task.completed ? 'Desfazer' : 'Concluir'}</button>
<button class="delete-button" data-index="${index}">Excluir</button>
</div>
`;
const completeButton = li.querySelector('.complete-button');
const deleteButton = li.querySelector('.delete-button');
completeButton.addEventListener('click', () => {
tasks[index].completed = !tasks[index].completed;
render();
});
deleteButton.addEventListener('click', () => {
tasks.splice(index, 1);
render();
});
list.appendChild(li);
});
}Projeto 4: Jogo da Velha
Temos um jogo da velha. O jogo da velha é um jogo clássico que todos conhecemos.
O objetivo do jogo é fazer três símbolos iguais em uma linha, seja vertical, horizontal ou diagonal.
Nosso jogo da velha é criado usando HTML, CSS e JavaScript.
Para começar, vamos criar o layout do jogo da velha usando HTML. Aqui está o código:
<div class="tic-tac-toe">
<div class="board">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>Em seguida, vamos estilizar o jogo da velha usando CSS:
.tic-tac-toe {
width: 300px;
margin: 0 auto;
}
.board {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
border: 2px solid black;
}
.cell {
width: 100px;
height: 100px;
border: 1px solid black;
font-size: 50px;
text-align: center;
line-height: 100px;
}Agora, vamos adicionar a funcionalidade ao jogo usando JavaScript.
Primeiro, precisamos adicionar um ouvinte de eventos de clique a cada célula do tabuleiro. Em seguida, precisamos alternar entre os símbolos “X” e “O” a cada clique.
const cells = document.querySelectorAll('.cell');
let player = 'X';
cells.forEach(cell => {
cell.addEventListener('click', () => {
if (!cell.textContent) {
cell.textContent = player;
player = player === 'X' ? 'O' : 'X';
}
});
});Finalmente, precisamos adicionar a lógica para verificar se um jogador venceu o jogo.
Para fazer isso, precisamos verificar se há três símbolos iguais em uma linha, vertical, horizontal ou diagonal.
function checkWinner() {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (cells[a].textContent && cells[a].textContent === cells[b].textContent && cells[a].textContent === cells[c].textContent) {
return true;
}
}
return false;
}
cells.forEach(cell => {
cell.addEventListener('click', () => {
if (!cell.textContent) {
cell.textContent = player;
if (checkWinner()) {
alert(`${player} venceu!`);
cells.forEach(cell => cell.textContent = '');
} else {
player = player === 'X' ? 'O' : 'X';
}
}
});
});Projeto 5: Calculadora básica
O objetivo deste projeto é criar uma calculadora básica usando JavaScript.
Com ela, os usuários podem realizar operações matemáticas básicas, como adição, subtração, multiplicação e divisão.
Para começar, crie uma nova página HTML e adicione um formulário com dois campos de entrada de texto e quatro botões para cada operação matemática.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculadora em JavaScript</title>
</head>
<body>
<h1>Calculadora em JavaScript</h1>
<form>
<label for="num1">Digite o primeiro número:</label>
<input type="text" id="num1" name="num1"><br><br>
<label for="num2">Digite o segundo número:</label>
<input type="text" id="num2" name="num2"><br><br>
<input type="button" value="+" onclick="add()">
<input type="button" value="-" onclick="subtract()">
<input type="button" value="*" onclick="multiply()">
<input type="button" value="/" onclick="divide()">
</form>
<script>
function add() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 + num2;
alert("O resultado da soma é: " + result);
}
function subtract() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 - num2;
alert("O resultado da subtração é: " + result);
}
function multiply() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 * num2;
alert("O resultado da multiplicação é: " + result);
}
function divide() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 / num2;
alert("O resultado da divisão é: " + result);
}
</script>
</body>
</html>Os quatro botões que adicionamos ao formulário têm a propriedade “onclick” definida para uma função JavaScript correspondente (add(), subtract(), multiply() e divide()).
Essas funções são responsáveis por obter os valores dos dois campos de entrada, realizar a operação matemática apropriada e exibir o resultado em um alerta.
Por exemplo, a função add() obtém os valores dos dois campos de entrada, converte-os em números usando a função parseFloat(), adiciona-os juntos e armazena o resultado em uma variável chamada “result”.
Em seguida, exibe um alerta com o resultado da soma.
Este projeto é uma ótima maneira de praticar o uso de funções em JavaScript, bem como o acesso e manipulação de elementos HTML usando o DOM.
Além disso, é um exemplo simples de como JavaScript pode ser usado para adicionar interatividade e funcionalidade a uma página da web.
Experimente este projeto e veja como é fácil criar uma calculadora básica usando JavaScript!
Projeto 6: Calculadora de IMC
A calculadora de Índice de Massa Corporal (IMC) é uma das ferramentas mais populares na área de saúde e bem-estar.
Com ela, podemos ter uma ideia geral sobre a saúde do nosso corpo.
Para este projeto, vamos criar uma calculadora de IMC simples, que permita ao usuário inserir seu peso e altura, e a calculadora retornará seu IMC.
Aqui está o código:
function calcularIMC(peso, altura) {
const imc = peso / (altura * altura);
return imc.toFixed(2);
}
const peso = parseFloat(prompt("Insira seu peso em kg:"));
const altura = parseFloat(prompt("Insira sua altura em metros:"));
const resultado = calcularIMC(peso, altura);
alert(`Seu IMC é ${resultado}.`);O código acima começa definindo a função calcularIMC.
Essa função recebe dois parâmetros: peso e altura.
Dentro da função, a fórmula do IMC é aplicada usando os parâmetros de entrada, e o resultado é arredondado para duas casas decimais usando o método toFixed.
A função retorna o resultado do cálculo do IMC.
Em seguida, o código pede que o usuário insira seu peso e altura usando o método prompt, que retorna uma string.
Usando o método parseFloat, convertemos a string em números flutuantes para poder usá-los na função calcularIMC.
O resultado é armazenado em uma variável chamada resultado, que é exibida ao usuário usando o método alert.
Projeto 7: Gerador de Senhas
Um gerador de senhas é uma ferramenta útil para criar senhas seguras e aleatórias.
Neste projeto, vamos criar um gerador de senhas simples que permite ao usuário selecionar o comprimento da senha e os tipos de caracteres a serem incluídos na senha.
Aqui está o código:
function gerarSenha(comprimento, incluirNumeros, incluirSimbolos) {
let caracteres = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
let numeros = "0123456789";
let simbolos = "!@#$%^&*()_+-=[]{}|;':\"<>,.?/";
if (incluirNumeros) {
caracteres += numeros;
}
if (incluirSimbolos) {
caracteres += simbolos;
}
let senha = "";
for (let i = 0; i < comprimento; i++) {
let indice = Math.floor(Math.random() * caracteres.length);
senha += caracteres[indice];
}
return senha;
}
const comprimento = parseInt(prompt("Qual o comprimento da senha?"));
const incluirNumeros = confirm("Deseja incluir números?");
const incluirSimbolos = confirm("Deseja incluir símbolos?");
const senha = gerarSenha(comprimento, incluirNumeros, incluirSimbolos);
alert(`Sua nova senha é: ${senha}`);código acima define uma função chamada gerarSenha. A função recebe três parâmetros: comprimento, incluirNumeros e incluirSimbolos.
Dentro da função, três strings são definidas: caracteres, que inclui letras maiúsculas e minúsculas.
Conclusão
Ao finalizar esses projetos em JavaScript, você pode ter uma boa base sobre como utilizar essa linguagem de programação.
Esses projetos podem ser utilizados como um ótimo ponto de partida para aprimorar suas habilidades de programação e aprender novas técnicas e conceitos.
Cada projeto apresentado neste artigo tem um propósito diferente, mas todos são projetos úteis que podem ser aplicados em projetos maiores e mais complexos.
Com esses projetos, você pode criar desde uma página web interativa até um jogo em JavaScript.
Lembre-se de sempre estudar e buscar novas soluções para problemas que possam surgir durante o desenvolvimento.
Perguntas frequentes (FAQs)
O que é JavaScript?
JavaScript é uma linguagem de programação de alto nível, interpretada e dinâmica que é utilizada principalmente para criar interatividade em páginas web.
O que são projetos em JavaScript?
Projetos em JavaScript são aplicações que utilizam a linguagem de programação JavaScript para criar funcionalidades úteis e interativas.
É difícil aprender JavaScript?
A dificuldade de aprender JavaScript pode variar de pessoa para pessoa. No entanto, com dedicação e estudo constante, é possível dominar a linguagem e se tornar um programador experiente.
Onde posso aprender mais sobre JavaScript?
Existem muitos recursos disponíveis online para aprender JavaScript, incluindo tutoriais em vídeo, artigos, livros e cursos online.
É possível criar projetos mais complexos em JavaScript?
Sim, com o conhecimento adquirido por meio desses projetos em JavaScript, é possível criar projetos mais complexos e avançados, como aplicações web completas e jogos em 2D e 3D.