abraao2501 / agua_count

Contador de copos de água

Contador de Copos de Água

Aplicação Web baseado em Javascript

Bem-vindo(a)! 👋

Este projeto é um contador de copos de água onde o usuário poderá registrar toda vez que ele ingerir um copo**

As tecnologias utilizadas nesse jogo foram:

HTML5

CSS3

Javascript

Tecnologias utilizadas

• jsPDF(Biblioteca javascript para geração e formatação de PDFs)
• Ajax(Carregamento assíncrono do Javascript por meio do objeto XMLHttpRequest)
• Validação de Inputs
• Manipulação da API DOM(Document Object Model)

Aprendizado Principal do Projeto: jsPDF - Como foi implementado

Abaixo segue o código referente à biblioteca utilizada para gerar um documwento pdf com dados do histórico do usuário

    //Instanciando um novo objeto doc
    let doc = new jsPDF();

    //Adiconando Cabeçalho
    doc.setFontSize(30);
    doc.setFont("times", "bold");
    doc.text("Histórico de Copos de Água", 40, 25);
    doc.addImage(image, "JPG", 85, 40, 40, 40);

    //Laço para percorrer cada histórico do usuário e adicionando no PDF
    for (let i = 0; i < cupsHistory.length; i++) {
      doc.setFontSize(20);
      doc.setFont("arial", "normal");
      doc.text(`${cupsHistory[i].data}`, 25, heigthDefine());
      doc.text(`${cupsHistory[i].hora}`, 25, heigthDefine());
      doc.text("1 copo bebido", 25, heigthDefine());
      doc.text("===============================", 25, heigthDefine());
    }

O código acima gera o seguinte PDF:

Responsividade

O layout do sistema esá totalmente responsivo para dispositivos móveis

Quer experimentar?

O site foi hospedado no sistema de hospedagem da Vercel

Clique aqui para acessar o site!