{"id":26175320,"url":"https://github.com/fernandozuchi/pratica27-08","last_synced_at":"2026-03-15T07:31:55.474Z","repository":{"id":254857530,"uuid":"847757555","full_name":"FernandoZuchi/pratica27-08","owner":"FernandoZuchi","description":"Repositório template para as práticas da mentoria do dia 27/08 - Tema -  HTML / CSS / JS - OBS: Repositório supervisionado via Github classroom","archived":false,"fork":false,"pushed_at":"2024-08-26T15:14:58.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-26T19:37:20.124Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FernandoZuchi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-26T13:44:32.000Z","updated_at":"2024-08-26T15:16:01.000Z","dependencies_parsed_at":"2024-08-26T16:23:54.912Z","dependency_job_id":null,"html_url":"https://github.com/FernandoZuchi/pratica27-08","commit_stats":null,"previous_names":["fernandozuchi/pratica27-08"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/FernandoZuchi/pratica27-08","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica27-08","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica27-08/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica27-08/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica27-08/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FernandoZuchi","download_url":"https://codeload.github.com/FernandoZuchi/pratica27-08/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FernandoZuchi%2Fpratica27-08/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30537647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-15T07:17:37.589Z","status":"ssl_error","status_checked_at":"2026-03-15T07:17:31.738Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-11T20:56:13.050Z","updated_at":"2026-03-15T07:31:55.456Z","avatar_url":"https://github.com/FernandoZuchi.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Prática da semana - Calculadora de Bitcoin\n\nBem-vindo a este projeto divertido e prático onde construiremos uma calculadora que converte Bitcoin em USD. Você aprenderá sobre como buscar dados de uma API, manipulação do DOM, e uso de localStorage, além de utilizar um pouco de matemática básica ao longo do caminho.\n\nAo final deste tutorial, você terá uma calculadora de preços de Bitcoin funcional que busca o preço atual do Bitcoin, permite calcular o valor de suas posses em Bitcoin, e salva seus dados localmente.\n\nEste é um projeto amigável para iniciantes, adequado para aqueles que entendem o básico de HTML, CSS e JavaScript puro.\n\n## Configuração do Projeto\n\nCrie uma nova pasta e dê um nome relevante ao projeto, como btc-usd-calc. Crie um arquivo chamado index.html na pasta do seu projeto.\n\nComece escrevendo o HTML. A página deve conter essencialmente:\n\n- Um título\n- O preço atual do Bitcoin\n- Um campo de texto para o usuário inserir suas posses em Bitcoin \n- Um botão para calcular o valor de suas posses em Bitcoin\n- O valor calculado\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eCalculadora de Bitcoin\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003ch1\u003eCalculadora de Bitcoin\u003c/h1\u003e\n        \u003cmain id=\"main\"\u003e\n            \u003cp\u003e\n                \u003cspan id=\"precoAtual\"\u003ePreço mais recente: \u003c/span\u003e\n                \u003cb\u003e$\u003cspan id=\"precoBitcoin\"\u003e\u003c/span\u003e USD (Dólar)\u003c/b\u003e\n            \u003c/p\u003e\n            \u003clabel for=\"qtadeBitcoin\"\u003eQuantos Bitcoins você possui?\u003c/label\u003e\n            \u003cinput type=\"number\" id=\"qtadeBitcoin\" step=\"any\" placeholder=\"0.05\"\u003e\n            \u003cbutton id=\"calcularBitcoin\"\u003eCalcular\u003c/button\u003e\n            \u003cbr/\u003e\n            \u003cbr/\u003e\n            \u003ch3 id=\"qtadeUSD\"\u003e\u003c/h3\u003e\n        \u003c/main\u003e\n    \u003c/div\u003e\n    \u003cscript src=\"script.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Buscando dados da API\n\nAgora, no mesmo diretório do index.html, crie um novo arquivo chamado script.js.\n\nNo script.js, defina uma constante para a URL da API:\n```javascript\n  const API_URL = \"https://api.coindesk.com/v1/bpi/currentprice.json\";\n```\nA próxima coisa a fazer é adicionar um event listener para chamar a API assim que o conteúdo da página for carregado. Você pode fazer isso adicionando o código abaixo diretamente abaixo da constante API_URL:\n\n```javascript\n  document.addEventListener(\"DOMContentLoaded\", async () =\u003e {\n  // Executa uma função assíncrona assim que o conteúdo do DOM for carregado\n  let precoBitcoin; // Inicializa a variável\n\n  try {\n    const response = await fetch(API_URL);\n    // Aguarda uma resposta da solicitação HTTP enviada à URL da API\n\n    const data = await response.json();\n    // Aguarda o conteúdo JSON da resposta\n\n    precoBitcoin = data.bpi.USD.rate_float.toFixed(2);\n    // Atribui à variável bitcoinPrice o valor em USD do Bitcoin, arredondado para 2 casas decimais.\n  } catch {\n    console.log(\"erro!\"); // Em caso de erro\n  }\n\n  console.log(precoBitcoin); // Exibe o preço no console\n});\n```\n\nEm caso de algum erro, o programa nos avisará no console. Caso contrário, o preço do Bitcoin será exibido no console. Você pode testar agora e ver se consegue obter o preço atual do Bitcoin!\n\n## Como Implementar o localStorage\nFundamentalmente, o localStorage é um recurso presente na maioria dos navegadores que salvam informações para que sejam mantidas na memória do navegador mesmo após a página ou o navegador serem fechados.\n\nVamos começar editando algumas linhas:\n```javascript\nconst API_URL = \"https://api.coindesk.com/v1/bpi/currentprice.json\";\n\ndocument.addEventListener(\"DOMContentLoaded\", async () =\u003e {\n    // Executa uma função assíncrona assim que o conteúdo do DOM for carregado\n    let precoBitcoin = localStorage.getItem(\"precoBitcoin\"); // Inicializa a variável\n  \n    try {\n      const response = await fetch(API_URL);\n      // Aguarda uma resposta da solicitação HTTP enviada à URL da API\n  \n      const data = await response.json();\n      // Aguarda o conteúdo JSON da resposta\n  \n      precoBitcoin = data.bpi.USD.rate_float.toFixed(2);\n      localStorage.setItem(\"precoBitcoin\", precoBitcoin);\n      // Atribui à variável precoBitcoin o valor em USD do Bitcoin, arredondado para 2 casas decimais.\n    } catch {\n      console.log(\"erro!\"); // Em caso de erro\n    }\n  \n    console.log(precoBitcoin); // Exibe o preço no console\n  });\n```\n\n## Como Implementar Manipulação do DOM\nO Document Object Model (DOM) é uma interface que permite interações de programação com documentos web. Essencialmente, a manipulação do DOM com JavaScript nos permite atualizar certas partes ou todo um documento.\n\nNeste projeto, usaremos o DOM para mostrar o preço atual do Bitcoin e o valor calculado. Também usaremos para recuperar o valor inserido pelo usuário no campo de texto #bitcoinAmount quando o botão de cálculo for clicado.\n\nVamos implementar a manipulação do DOM:\n```javascript\nconst API_URL = \"https://api.coindesk.com/v1/bpi/currentprice.json\";\n\ndocument.addEventListener(\"DOMContentLoaded\", async () =\u003e {\n    const main = document.getElementById(\"main\");\n    const elementoPreco = document.getElementById(\"precoBitcoin\");\n    const qtadeBitcoinInput = document.getElementById(\"qtadeBitcoin\");\n    const btnCalcular = document.getElementById(\"calcularBitcoin\");\n    const qtadeDolar = document.getElementById(\"qtadeUSD\");\n    // Executa uma função assíncrona assim que o conteúdo do DOM for carregado\n    let precoBitcoin = localStorage.getItem(\"precoBitcoin\"); // Inicializa a variável\n  \n    try {\n      const response = await fetch(API_URL);\n      // Aguarda uma resposta da solicitação HTTP enviada à URL da API\n  \n      const data = await response.json();\n      // Aguarda o conteúdo JSON da resposta\n  \n      precoBitcoin = data.bpi.USD.rate_float.toFixed(2);\n      localStorage.setItem(\"precoBitcoin\", precoBitcoin);\n      // Atribui à variável precoBitcoin o valor em USD do Bitcoin, arredondado para 2 casas decimais.\n    } catch {\n      if(precoBitcoin) {\n        // Se houver um preço de bitcoin existente no localStorage\n        elementoPreco.textContent = precoBitcoin; // Exibe o que está salvo lá\n      }\n      else {\n        main.innerHTML = \"\u003cp\u003eNão foi possível buscar o preço do bitcoin\u003c/p\u003e\"\n      }\n    }\n  \n    console.log(precoBitcoin); // Exibe o preço no console\n  });\n```\n\n## Como Calcular o Valor Atual da Carteira\nAgora, o objetivo de uma calculadora de Bitcoin é calcular quanto vale a carteira de Bitcoin de alguém, não necessariamente qual é o preço atual.\n\nPor exemplo, o preço atual do Bitcoin pode ser $60.000 USD. Se você possui 2 Bitcoins, sua carteira vale $120.000 USD. Se você possui metade (0,5) de um Bitcoin, sua carteira vale $30.000 USD.\n\nVamos obter a quantidade de Bitcoin que o usuário possui (bitcoinAmount) do localStorage.\n```javascript\n// continue após console.log(precoBitcoin);\n\nlet qtadeBitcoin = localStorage.getItem(\"qtadeBitcoin\");\n```\nCalcule o valor em USD com esta função:\n\n```javascript\nconst calcularMontanteUSD = () =\u003e {\n  qtadeBitcoin = qtadeBitcoinInput.value || 0;\n  // qtadeBitcoin será reatribuído para o que estiver no input no front-end, caso contrário, seu valor padrão será zero\n\n  const totalUSD = qtadeBitcoin * precoBitcoin;\n  // Suponha que você tenha 2 Bitcoins e o preço seja 60000.\n  // 2 * 60000 = 120000\n\n  qtadeDolar.innerHTML = `\u003cb\u003e$${totalUSD.toFixed(\n    2\n  )} USD\u003c/b\u003e em Bitcoin.`;\n  // Arredonde para as duas casas decimais mais próximas e exiba\n};\n```\n\nVamos verificar a existência de um valor inserido pelo usuário, e calcular em cima disso\n\n```javascript\nif (qtadeBitcoinInput.value) {\n        calcularMontanteUSD()\n    }\n```\n\nPara que o usuário atualize seu bitcoinAmount, vamos adicionar um event listener quando o botão calculateBtn for clicado:\n\n```javascript\nbtnCalcular.addEventListener(\"click\", () =\u003e {\n        localStorage.setItem(\"qtadeBitcoin\", qtadeBitcoinInput.value);\n        calcularMontanteUSD();\n    });\n```\n\nTodo o JavaScript agora deve estar completo.\n\n## Código Completo em JavaScript\nSeu código completo deve ser semelhante a este (além dos comentários e formatação):\n```javascript\nconst API_URL = \"https://api.coindesk.com/v1/bpi/currentprice.json\";\n\ndocument.addEventListener(\"DOMContentLoaded\", async () =\u003e {\n    let main = document.getElementById(\"main\");\n    let elementoPreco = document.getElementById(\"precoBitcoin\");\n    let qtadeBitcoinInput = document.getElementById(\"qtadeBitcoin\");\n    let btnCalcular = document.getElementById(\"calcularBitcoin\");\n    let qtadeDolar = document.getElementById(\"qtadeUSD\");\n    // Executa uma função assíncrona assim que o conteúdo do DOM for carregado\n    let precoBitcoin = localStorage.getItem(\"precoBitcoin\"); // Inicializa a variável\n\n    try {\n        const response = await fetch(API_URL);\n        // Aguarda uma resposta da solicitação HTTP enviada à URL da API\n\n        const data = await response.json();\n        // Aguarda o conteúdo JSON da resposta\n\n        precoBitcoin = data.bpi.USD.rate_float.toFixed(2);\n        localStorage.setItem(\"precoBitcoin\", precoBitcoin);\n        // Atribui à variável precoBitcoin o valor em USD do Bitcoin, arredondado para 2 casas decimais.\n    } catch {\n        if (precoBitcoin) {\n            // Se houver um preço de bitcoin existente no localStorage\n            elementoPreco.textContent = precoBitcoin; // Exibe o que está salvo lá\n        }\n        else {\n            main.innerHTML = \"\u003cp\u003eNão foi possível buscar o preço do bitcoin\u003c/p\u003e\"\n        }\n    }\n\n    console.log(precoBitcoin); // Exibe o preço no console\n\n    qtadeBitcoin = localStorage.getItem(\"qtadeBitcoin\");\n\n    const calcularMontanteUSD = () =\u003e {\n        qtadeBitcoin = parseFloat(qtadeBitcoinInput.value) || 0;\n        // qtadeBitcoin será reatribuído para o que estiver no input no front-end, caso contrário, seu valor padrão será zero\n\n        const totalUSD = qtadeBitcoin * precoBitcoin;\n        // Suponha que você tenha 2 Bitcoins e o preço seja 60000.\n        // 2 * 60000 = 120000\n\n        qtadeDolar.innerHTML = `\u003cb\u003e$${totalUSD.toFixed(\n            2\n        )} USD\u003c/b\u003e em Bitcoin.`;\n        // Arredonde para as duas casas decimais mais próximas e exiba\n    };\n\n    if (qtadeBitcoinInput.value) {\n        calcularMontanteUSD()\n    }\n\n    btnCalcular.addEventListener(\"click\", () =\u003e {\n        localStorage.setItem(\"qtadeBitcoin\", qtadeBitcoinInput.value);\n        calcularMontanteUSD();\n    });\n});\n\n\n```\n\nCom isso, sua calculadora estará pronta! Agora, teste a página em seu navegador e verifique se tudo está funcionando como esperado.\n\n## Estilização do Projeto (CSS)\nVamos aplicar um estilo básico para melhorar a aparência do projeto. Adicione o código CSS a seguir:\n```css\nbody {\n  font-family: Arial, sans-serif;\n  background: #f0f0f0;\n  color: #333;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  margin: 0;\n}\n\n.container {\n  background: white;\n  padding: 2rem;\n  border-radius: 8px;\n  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);\n  width: 300px;\n  text-align: center;\n}\n\ninput {\n  margin-top: 0.5rem;\n  padding: 0.5rem;\n  font-size: 1rem;\n  width: 100%;\n  box-sizing: border-box;\n}\n\nbutton {\n  margin-top: 1rem;\n  padding: 0.5rem;\n  font-size: 1rem;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nbutton:hover {\n  background-color: #0056b3;\n}\n```\n## Conclusão\nParabéns! Você agora tem uma calculadora de Bitcoin que não só busca o preço atual de Bitcoin, mas também calcula e exibe o valor em USD das posses de Bitcoin que o usuário insere. Além disso, você aprendeu a usar o localStorage para armazenar dados localmente e a manipular o DOM com JavaScript puro.\n\nAgora é hora de adicionar funcionalidades ou personalizações ao projeto! Por exemplo, você pode adicionar um seletor de moeda ou exibir gráficos de preços históricos. As possibilidades são infinitas!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandozuchi%2Fpratica27-08","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffernandozuchi%2Fpratica27-08","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffernandozuchi%2Fpratica27-08/lists"}