4 Projetos JavaScript para iniciantes !
4 Projetos simples em JavaScript para você fazer e treinar o seu conhecimento. Lista bônus no final do artigo.
Se você está iniciando no mundo da programação e não tem idéias de projeto, este artigo com certeza é para você. Aqui listarei 4 projetos que agregaram, e muito, de alguma maneira essa minha trajetória de me tornar desenvolvedor Front-end e tenho certeza que agregará na sua jornada também. Em um primeiro momento quando estamos aprendendo JavaScript uma das dificuldades certamente é ter idéias de projetos que nos mantenham motivados. Dentre os 4 projetos, você aprenderá a trabalhar com datas, adicionar e deletar elementos de uma tabela, utilizar uma API de clima tempo e também fazer um conversor de moedas consumindo uma API que retorna o valor mais atualizado de pares de moedas como por exemplo, USD/AUD.
- Primeiro Projeto
Um contador de dias que retorna a quantidade de dias entre 2 datas.
Com certeza esse foi um dos projetos mais emblemáticos que eu fiz pois, trabalhar com datas pode ser um pouco difícil para quem está iniciando seus estudos com JavaScript. Um dos problemas que eu enfrentei foi pegar os valores dos inputs, do tipo DATE, e passar para uma DIV ou até mesmo para uma ROW dentro de uma tabela TABLE, essas são tags do HTML. Quando eu digo sobre esses problemas que encontrei, não me refiro á manipulação da DOM mas ao fato de que após o click do botão, conforme mostrado na figura 1, as datas eram mostradas sempre com 1 dia a menos utilizando toLocateDateString() . Eu utilizei o toLocate porque queria que as datas fossem mostradas da mesma forma que 22/07/2020 mas o problema que retorna a data como uma String e não como um Objeto. A solução que eu encontrei foi criar uma variável ou um Let para o valor ou Value do new Date() e criar uma variável para o dia, mês e ano, por exemplo:
let inDate = document.getElementById(‘dataUm’);
let data = new Date(inDate.value);
Caso eu pegue a variável data e coloque dentro do HTML utilizando toLocateDateString() com o InnerHTML ou InnerText, provavelmente você terá algo parecido com 21/07/2020 ao invés de 22/07/2020, mesmo selecionando a segunda data no input. A solução para transformar em Objeto novamente é:
let dia = data.getUTCDate();
let mês = data.getUTCMonth() + 1;
let ano = data.getUTCFullYear();
Agora para terminar, falta só colocar na tabela os valores do input através de uma função com evento click, como mostrado abaixo:
function addAllDatesDisplayed(bodyDate) {
const item = document.getElementById(‘tr’);
let date1 = `${dia}/${mês}/${ano}`;
item.innerHTML = `
<td><span class=”firstdate”>${IDdeOndeVaiSerMostradaAData.date1}</span></td>
`;
}
Você encontrará o repositório para esse projeto clicando aqui. Nele você verá todo o código com outras funcionalidades não comentadas aqui, então se estiver interessado de uma passada lá no meu github.
- Segundo projeto
Uma aplicação de clima tempo (GlobalWeather)
Esse foi o primeiro projeto que eu fiz consumindo uma API. A idéia desse projeto era trabalhar com a OPENWEATHER API e entender como utilizar o método global de fetch().then().then() que fornece uma interface JavaScript para acessar e manipular partes do pipeline HTTP, tais como os pedidos e respostas, ou seja, uma maneira de ter acesso aos dados fornecidos pela Api.
Quando se inicia a aplicação, ela pede para ter acesso a localização do broswer e fornecer a temperatura, horário do nascer e por do Sol. Isso é possivél graças ao método geolocation.getCurrentPosition() onde você permite que a latitude e longitude do usuário seja utilizada assim que ele dê a permissão de uso de sua localização para aplicação. Um exemplo de uso disso seria:
let latitude;
let longitude;
navigator.geolocation.getCurrentPosition( position => {
latitude = position.coords.longitude;
longitude = position.coords.latitude;
const apiGeo = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=Chave_da_API`;
Mas como utilizar o método fetch() ? A const apiGeo , definida acima, você repassa dentro do parenteses, então ficará assim — fetch(apiGeo).then() onde no primeiro then() definiremos a maneira que os dados retornaram para o desenvolvedor. Eu utilizei o JSON, ficando assim — then( response => response.json()), já no segundo then() será onde teremos a nossa função para utilizar os dados fornecidos pela API. por exemplo: then( data => {Código a ser executado. por exempo:
console.log(data); — para vermos os dados que a API permite utilizarmos.
const temperatura = ((data.main.temp) — 273.15).toFixed(1); essa constante pega o valor da temperatura fornecido pela API, converte ele de KELVIN para CELSIUS e defini apenas uma casa decimal para ser mostrada.
const { descrição, icon } = data.weather[0]; essa constante retorna a descrição do tempo ( nublado, ensolarado… ) e também o ícone da descrição.
const { nascer-do-sol, por-do-sol } = data.sys; Pega o horário do nascer-do-sol e por-do-sol fornecido pela API no subitem sys.
let horaPorDoSol = new Date(por-do-sol * 1000).toLocaleTimeString(); converte para o formato de hora:minuto:segundo
})
dessa maneira você já tem acesso aos dados da api faltando apenas manipular a DOM e passar esses dados para a tela do usuário com o innerHTML ou innerText.
Clicando aqui você será redirecionado para o repositório do projeto de clima tempo GlobalWeather.
Visite o meu GitHub.
- Terceiro Projeto
Um conversor de moedas que consome a api do European Central Bank
Quem nunca quis saber quantos reais o dólar estava valendo ? Foi a partir dessa pergunta que eu decidi fazer esse projeto. A primeira dificuldade foi achar uma API boa e de graça para fazer o conversor de moedas e a melhor que pude encontrar foi a Exchange Rate API criada pelo banco central da Europa. Para utilizar essa API não precisa de uma API KEY
A idéia desse projeto é ter dois campos do tipo select, onde serão mostrada as moedas disponíveis; dois Inputs do tipo Number para receber os valores das moedas e um botão para trocar as moedas escolhidas de lugar entre si.
Como fazer para os valores das moedas aparecerem nos Inputs ? Primeiro temos que selecionar os Inputs criando uma variável let para eles e depois calcular o valor de uma moeda em relação a outra. Exemplo:
definimos os inputs como
let inputMoeda1 = document.getElementById(‘inputValor1’);
consta valorMoeda1 = document.getElementById(‘valorMoeda1’); esse é o input onde será mostrado o valor da moeda 1.
let inputMoeda2 = document.getElementById(‘inputValor2’); e em seguida criaremos uma função para calcular esses valores através dos dados da API.
consta valorMoeda2 = document.getElementById(‘valorMoeda2’); esse é o input onde será mostrado o valor da moeda 2.
function calcularValor() {
const moeda1 = inputValor1.value;
const moeda2 = inputValor2.value;
com o método fetch() usaremos a API conforme foi explicado no projeto 2.
fetch(`https://api.exchangeratesapi.io/latest?base=${moeda1}`) foi selecionado a moeda1 dentro da API porque ela será a referencia para o valor mostrado da moeda2. .then(response => response.json()).then(data => {
const rate= (data.rates[moeda2]).toFixed(3);
valorMoeda2.value = (valorMoeda1.value * rate).toFixed(2);
)
Dessa maneira você conseguirá que seja mostrado o valor, conforme na Figura 4, de 1 dólar em relação ao real. Esse projeto por incrível que pareça é o mais simples dos 4. ele basicamente trabalha com contas básicas de matemática e lógica de programação. Para ver o código completo clique aqui.
Visite o meu GitHub.
- Quarto Projeto
O bom e velho TO-DO LIST ou Lista de tarefas.
Lista de tarefas com certeza é um dos projetos mais importantes para um iniciante na programação, principalmente por que nesse projeto ele trabalhará com criação de elementos e como adicioná-lo no HTML.
Para ser possível criar as linhas contendo o conteúdo da nossa lista de tarefas utilizaremos o método Constructor do JavaScript, que é um método especial para criar e inicializar um objeto criado a partir de uma classe. Então, primeiro criamos uma classe ( Class item ) e dentro dela usamos o constructor. Logo o código fica assim:
class item {
constructor(itemName) {
this.createDiv(itemName);
}
O createDiv já induz que será criado uma div onde conterá o texto que queremos adicionar. Para fazermos isto escreveremos:
createDiv(itemName) {
let Input = document.createElement(‘input’); para criar o input.
input.value = itemName;
input.disabled = true;
input.classList.add(‘item_input’); para adicionar um nome a classe do input que recebe o texto da tarefa.
let itemBox = document.createElement(‘div’); cria a div que receberá os inputs dos textos das tarefas.
itemBox.classList.add(‘item’);
container.appendChild(itemBox); Container é classe da div do HTML que terá a div dos inputs dos textos.
itemBox.appendChild(input); o método appendChild significa que você está adicionando algo ao elemento itemBox.
Com isso já é possível adicionar tarefas em sua lista. O método para adicionar botões de editar e remover é o mesmo do itemBox, usando o appendChild e o createElement(‘button’), e as funções dos botões estão disponíveis no repositório desse projeto.
Visite o meu GitHub.
Lista Bônus de projetos com código disponível no meu GitHub.
1 — App de Meditação em JavaScript
2 — Gerenciador de gastos em JavaScript
3 — Uma aplicação de busca de letras de músicas que consome uma API de lyrics chamada lyrics.ovh.
Espero que tenham gostado do conteúdo e que ajude, de alguma forma, os seus estudos e projetos.
