Skip to content

Abraao2501/agua_count

Repository files navigation

Contador de Copos de Água

Aplicação Web baseado em Javascript

Design preview for the Rock, Paper, Scissors coding challenge

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:

PDF image

Responsividade

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

Mobile Design

Quer experimentar?

O site foi hospedado no sistema de hospedagem da Vercel

Clique aqui para acessar o site!

About

Contador de copos de água

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors