分类

Posted in

如何构建一个简单的比特币到美元转换计算器_AI阅读总结 — 包阅AI

by baoyueai

包阅导读总结

1. 关键词：`Bitcoin`、`Calculator`、`USD`、`API`、`DOM manipulation`

2. 总结：本文介绍了如何构建一个简单的比特币兑美元计算器项目，包括项目设置、API 获取比特币价格、使用`localStorage`存储数据、进行 DOM 操作计算比特币价值、添加样式等，适合有 HTML、CSS 和原生 JavaScript 基础知识的初学者。

3. 主要内容：

– 项目介绍

– 构建比特币兑美元计算器

– 学习相关技术

– 项目设置

– 创建文件夹和相关文件

– 编写初始 HTML 结构

– 获取 API

– 定义 API 地址

– 添加页面加载时的事件监听以获取数据

– 实现 `localStorage`

– 存储和获取比特币价格

– 实现 DOM 操作

– 获取相关元素

– 展示比特币价格

– 计算当前钱包价值

– 获取用户比特币持有量

– 计算并展示美元价值

– 添加点击事件更新计算

– 完整 JavaScript 代码

– 添加样式

– 引入样式文件

– 编写样式代码

思维导图：

文章地址：https://www.freecodecamp.org/news/build-a-bitcoin-to-usd-calculator/

文章来源：freecodecamp.org

作者：Eesa Zahed

发布时间：2024/7/22 22:36

语言：英文

总字数：1569字

预计阅读时间：7分钟

评分：89分

标签：比特币计算器,JavaScript,API 获取,DOM 操作,本地存储

以下为原文内容

本内容来源于用户推荐转载，旨在分享知识与观点，如有侵权请联系删除 联系邮箱 media@ilingban.com

Welcome to this fun and hands-on project where we’ll build a calculator that converts Bitcoin to USD. You’ll learn about API fetching, DOM manipulation, and localStorage, and you’ll use some basic math along the way.

By the end of this tutorial, you’ll have a functioning Bitcoin price calculator that fetches the current price of Bitcoin, allows you to calculate the value of your Bitcoin holdings, and saves your data locally.

This is a beginner-friendly project suited for those who understand the basics of HTML, CSS, and vanilla JavaScript.

This is what we’ll create:

ImageThe finished project!

Project Setup

Create a new folder and name it something relevant to the project, such as btc-usd-calc. Create a file titled index.html in your project folder.

Start by writing the HTML. The page should essentially contain

  • A heading
  • The current Bitcoin price
  • A text field for a user to input their Bitcoin holdings
  • A button to calculate their Bitcoin holdings
  • The calculated amount
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Bitcoin Calculator</title>    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  </head>  <body>    <div class="container">      <h1>Bitcoin Calculator</h1>      <main id="main">        <p>          <span id="currentPrice">Latest price:</span>          <b>$<span id="bitcoinPrice"></span> USD</b>        </p>        <label for="bitcoinAmount">How much Bitcoin do you own?</label>        <input type="number" id="bitcoinAmount" step="any" placeholder="0.05" />        <button id="calculateBtn">Calculate</button>        <br />        <br />        <h3 id="usdAmount"></h3>      </main>    </div>    <script src="script.js"></script>  </body></html>

Open it up in a browser and you should see this:

ImagePretty basic at the moment – styling will be done later!

Fetch the API

Now, in the same directory as index.html, create a new file titled script.js.

It’s important to know what API to use. I highly recommend that you use this one while following along with this tutorial. The CoinDesk API is:

  • Free
  • Fast
  • No API token needed
  • Minimal
  • Contains the necessary information for this project

In script.js, define a constant for the API URL:

const API_URL = "https://api.coindesk.com/v1/bpi/currentprice.json";

The next thing to do is to add an event listener to call the API once the page content loads. You can do that by adding the following code directly underneath the API_URL constant:

document.addEventListener("DOMContentLoaded", async () => {    let bitcoinPrice;   try {    const response = await fetch(API_URL);        const data = await response.json();        bitcoinPrice = data.bpi.USD.rate_float.toFixed(2);      } catch {    console.log("error!");   }  console.log(bitcoinPrice); });

In case of any errors, the program will let us know in the console. Otherwise, bitcoinPrice will be logged in the console. You can test it out now and see if you get the current Bitcoin price!

How to Implement localStorage

Fundamentally, localStorage is a feature in most web browsers (see which versions support it here) that saves information so that it is retained in the browser’s memory even after the page or browser is closed.

Let’s get started by editing some lines:

document.addEventListener("DOMContentLoaded", async () => {  let bitcoinPrice = localStorage.getItem("lastBitcoinPrice");      try {    const response = await fetch(API_URL);    const data = await response.json();    bitcoinPrice = data.bpi.USD.rate_float.toFixed(2);        localStorage.setItem("lastBitcoinPrice", bitcoinPrice);      } catch {    console.log("error!");  }  console.log(bitcoinPrice);});

How to Implement DOM Manipulation

The Document Object Model (DOM) is an interface that allows programming interactions with web documents. Essentially, DOM manipulation with JavaScript allows us to update certain parts or the entirety of a document.

In this project, we’ll use it to show the current Bitcoin price and calculated value. We’ll also use it to retrieve the user-inputted value in the #bitcoinAmount text field when the calculate button is clicked.

Let’s implement DOM manipulation:

document.addEventListener("DOMContentLoaded", async () => {  const main = document.getElementById("main");  const bitcoinPriceElement = document.getElementById("bitcoinPrice");  const bitcoinAmountInput = document.getElementById("bitcoinAmount");  const calculateBtn = document.getElementById("calculateBtn");  const usdAmountElement = document.getElementById("usdAmount");  let bitcoinPrice = localStorage.getItem("lastBitcoinPrice");  try {    const response = await fetch(API_URL);    const data = await response.json();    bitcoinPrice = data.bpi.USD.rate_float.toFixed(2);    localStorage.setItem("lastBitcoinPrice", bitcoinPrice);    bitcoinPriceElement.textContent = bitcoinPrice;      } catch {    if (bitcoinPrice) {            bitcoinPriceElement.textContent = bitcoinPrice;          } else {      main.innerHTML = "<p>Could not fetch Bitcoin price :(</p>";      return;    }  }  console.log(bitcoinPrice);});

How to Calculate the Current Wallet Value

Now, the point of a Bitcoin calculator is to calculate how much someone’s Bitcoin wallet is valued, not necessarily how much the current price is.

For example, the current price of Bitcoin might be $60,000 USD. If you own 2 Bitcoins, your wallet is valued at $120,000 USD. If you own half (0.5) a Bitcoin, your wallet is valued at $30,000 USD.

Let’s get the amount of Bitcoin that the user owns (bitcoinAmount) from localStorage.

let bitcoinAmount = localStorage.getItem("bitcoinAmount");

Calculate the amount in USD with this function:

const calculateUSDAmount = () => {  bitcoinAmount = bitcoinAmountInput.value || 0;    const usdAmount = bitcoinAmount * bitcoinPrice;      usdAmountElement.innerHTML = `<b>$${usdAmount.toFixed(    2  )} USD</b> worth of Bitcoin.`;  };

Remember when we got bitcoinAmount from localStorage? Now, when the page loads, let’s set the value of the input on the front-end to bitcoinAmount.

  if (bitcoinAmount) {    bitcoinAmountInput.value = bitcoinAmount;        calculateUSDAmount();      }

For the user to update their bitcoinAmount, let’s add an event listener to when the calculateBtn is clicked:

  calculateBtn.addEventListener("click", () => {    localStorage.setItem("bitcoinAmount", bitcoinAmountInput.value);        calculateUSDAmount();      });

All of the JavaScript should now be complete.

Full JavaScript Code

You entire code should be similar to this (aside from comments and formatting):

const API_URL = "https://api.coindesk.com/v1/bpi/currentprice.json";document.addEventListener("DOMContentLoaded", async () => {  const main = document.getElementById("main");  const bitcoinPriceElement = document.getElementById("bitcoinPrice");  const bitcoinAmountInput = document.getElementById("bitcoinAmount");  const calculateBtn = document.getElementById("calculateBtn");  const usdAmountElement = document.getElementById("usdAmount");  let bitcoinPrice = localStorage.getItem("lastBitcoinPrice");  try {    const response = await fetch(API_URL);    const data = await response.json();    bitcoinPrice = data.bpi.USD.rate_float.toFixed(2);    localStorage.setItem("lastBitcoinPrice", bitcoinPrice);    bitcoinPriceElement.textContent = bitcoinPrice;      } catch {    if (bitcoinPrice) {            bitcoinPriceElement.textContent = bitcoinPrice;          } else {      main.innerHTML = "<p>Could not fetch Bitcoin price :(</p>";      return;    }  }  console.log(bitcoinPrice);  let bitcoinAmount = localStorage.getItem("bitcoinAmount");  const calculateUSDAmount = () => {    bitcoinAmount = bitcoinAmountInput.value || 0;        const usdAmount = bitcoinAmount * bitcoinPrice;            usdAmountElement.innerHTML = `<b>$${usdAmount.toFixed(      2    )} USD</b> worth of Bitcoin.`;      };  if (bitcoinAmount) {    bitcoinAmountInput.value = bitcoinAmount;        calculateUSDAmount();      }  calculateBtn.addEventListener("click", () => {    localStorage.setItem("bitcoinAmount", bitcoinAmountInput.value);        calculateUSDAmount();      });});

Test it out in the browser and play around with it!

Image

How to Add Some Styling

Right now, there isn’t any CSS so it looks pretty basic. You’re more than welcome to customize the styling to your own preferences.

If you’d like to style it how I did, then follow along by adding this line at the bottom of <head>:

   <link rel="stylesheet" href="style.css" /></head>

Then, create a new file titled style.css within the same directory as index.html.

Write the following code in style.css:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");body {  font-family: "Inter", sans-serif;  margin: 0;  padding: 0;  background-color: #f5f5f5;}.container {  max-width: 50rem;  margin: 5rem auto;  background-color: #fff;  padding: 2rem;  border-radius: 1rem;  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);}#main {  width: 50%;  margin: auto;}h1 {  text-align: center;  font-size: 3rem;  margin-bottom: 2rem;  background-image: linear-gradient(to right, #4b0bff, #68b2ff);  -webkit-background-clip: text;  background-clip: text;  color: transparent;}h3 {  font-weight: normal;}button {  padding: 0.5rem 0.75rem;  border: none;  background-color: #007bff;  color: #fff;  cursor: pointer;  border-radius: 0.5rem;  transition: 0.3s;  margin-left: 0.25rem;}button:hover {  background-color: #0056b3;}label {  display: block;  margin-bottom: 1rem;}input[type="number"] {  padding: 0.5rem;  font-size: 1rem;  border: none;  background-color: #e3e3e3;  border-radius: 0.5rem;}@media (prefers-color-scheme: dark) {  body {    color-scheme: dark;    color: white;    background: #2b0057;  }  h1 {    background-image: linear-gradient(to right, #4facfe, #00f2fe);  }  .container {    background: #16022c;  }  input[type="number"] {    background-color: #33194d;  }}

You should see this if you’re in dark mode:

ImageDark mode

And this if you’re in light mode:

ImageLight mode

And that’s everything!

You can see it on GitHub here: https://github.com/eesazahed/bitcoin-calc/

Here’s the live preview: https://eesazahed.github.io/bitcoin-calc/

Conclusion

Feel free to check out my LinkedIn or GitHub.

If you’d like to reach out, my email address is eszhd1 (at) gmail.com