Eesa Zahed - freeCodeCamp.org

How to Build a Simple Bitcoin-to-USD Calculator

Eesa Zahed — Mon, 22 Jul 2024 22:36:23 +0000

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:

The 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

html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bitcoin Calculatortitle>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  head>
  <body>
    <div class="container">
      <h1>Bitcoin Calculatorh1>
      <main id="main">
        <p>
          <span id="currentPrice">Latest price:span>
          <b>$<span id="bitcoinPrice">span> USDb>
        p>
        <label for="bitcoinAmount">How much Bitcoin do you own?label>
        <input type="number" id="bitcoinAmount" step="any" placeholder="0.05" />
        <button id="calculateBtn">Calculatebutton>
        <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:

Pretty 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 () => {
  // Run an asynchronous function once the DOM content has loaded
  let bitcoinPrice; // Initialize the variable

  try {
    const response = await fetch(API_URL);
    // Await a response from the HTTP request sent to the API URL

    const data = await response.json();
    // Await the json content of the response

    bitcoinPrice = data.bpi.USD.rate_float.toFixed(2);
    // Reassign the bitcoinPrice variable to the USD value of Bitcoin, rounded to the nearest 2 decimal places.
  } catch {
    console.log("error!"); // In case of error
  }

  console.log(bitcoinPrice); // Log the price in the console
});

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");
  // Retrieve the last stored Bitcoin price from localStorage, if it exists
  // Note: It should be null the first time you try running the page

  try {
    const response = await fetch(API_URL);
    const data = await response.json();
    bitcoinPrice = data.bpi.USD.rate_float.toFixed(2);
    // bitcoinPrice will be re-written

    localStorage.setItem("lastBitcoinPrice", bitcoinPrice);
    // Save most recent price to localStorage
  } 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;
    // Set the text content of bitcoinPriceElement to the current bitcoinPrice
  } catch {
    if (bitcoinPrice) {
      // If there's an existing bitcoinPrice in localStorage...
      bitcoinPriceElement.textContent = bitcoinPrice;
      // ...display whatever is saved localStorage
    } else {
      main.innerHTML = "Could not fetch Bitcoin price :(
";
      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.

// continue after console.log(bitcoinPrice);

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

Calculate the amount in USD with this function:

const calculateUSDAmount = () => {
  bitcoinAmount = bitcoinAmountInput.value || 0;
  // bitcoinAmount will be reassigned to whatever is in the input on the front end, otherwise it's default value will be zero

  const usdAmount = bitcoinAmount * bitcoinPrice;
  // Say you have 2 Bitcoins and the price is 60000.
  // 2 * 60000 = 120000

  usdAmountElement.innerHTML = `$${usdAmount.toFixed(
    2
  )} USD worth of Bitcoin.`;
  // Round it to the nearest 2 decimals and display it
};

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;
    // Set the input's value to bitcoinAmount

    calculateUSDAmount();
    // Calculate and update the front-end
  }

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);
    // Save the input value to localStorage

    calculateUSDAmount();
    // Calculate and update the front-end
  });

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;
    // Set the text content of bitcoinPriceElement to the current bitcoinPrice
  } catch {
    if (bitcoinPrice) {
      // If there's an existing bitcoinPrice in localStorage...
      bitcoinPriceElement.textContent = bitcoinPrice;
      // ...display whatever is saved localStorage
    } else {
      main.innerHTML = "Could not fetch Bitcoin price :(
";
      return;
    }
  }

  console.log(bitcoinPrice);

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

  const calculateUSDAmount = () => {
    bitcoinAmount = bitcoinAmountInput.value || 0;
    // bitcoinAmount will be reassigned to whatever is in the input on the front end, otherwise it's default value will be zero

    const usdAmount = bitcoinAmount * bitcoinPrice;
    // Say you have 2 Bitcoins and the price is 60000.
    // 2 * 60000 = 120000

    usdAmountElement.innerHTML = `$${usdAmount.toFixed(
      2
    )} USD worth of Bitcoin.`;
    // Round it to the nearest 2 decimals and display it
  };

  if (bitcoinAmount) {
    bitcoinAmountInput.value = bitcoinAmount;
    // Set the input's value to bitcoinAmount

    calculateUSDAmount();
    // Calculate and update the front-end
  }

  calculateBtn.addEventListener("click", () => {
    localStorage.setItem("bitcoinAmount", bitcoinAmountInput.value);
    // Save the input value to localStorage

    calculateUSDAmount();
    // Calculate and update the front-end
  });
});

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

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 :

   <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:

Dark mode

And this if you're in light mode:

Light 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

How to Write More Efficient JavaScript Conditions

Eesa Zahed — Wed, 03 May 2023 17:44:11 +0000

When you're coding in JavaScript, conditions are important for developing a functional application.

Conditional statements are important because you use them as "validators" which can either return truth or false. You can then use them to trigger further actions within the program.

But with many long, messy if statements in the program, it can cause confusion for developers and heavily reduce readability. This is why it's important for developers to implement more efficient conditions.

Conditional Statement Example

Imagine you are creating a polling app. Each user has to choose their favorite color, but the only options are red, green, and blue.

Clearly there aren't many choices for users, but let's stick to a simple solution for now.

The function for voting may look something like this:

const vote = (color) => {
  // code goes here
}

But what if a user votes for a color that isn't a valid option? They might have used a dropdown you forgot to remove some colors from, or the user could have manipulated the client-side JavaScript.

Try to imagine if a user voted for the color orange. You would need to use some JavaScript logic to prevent this.

How would you do this? You could create a simple condition where a user can only choose red:

const vote = (color) => {
  if (color !== "red") {
    return "invalid color";
  }

  return "valid color";
}

This is great! Now, the first condition the function checks is: "Is the color NOT red? Well, that’s not allowed", and returns accordingly.

vote("orange"); // "invalid color"

Now, how can you make it so that the color blue is also accepted? All you need to do is add another condition:

const vote = (color) => {
  if (color !== "red" && color !== "blue") {
    return "invalid color";
  }

  return "valid color";
}

This works, too. But what if you want to verify that the color is red, orange, yellow, green, blue, or purple? Then the code would look like this:

const vote = (color) => {
  if (color !== "red" && color !== "orange"  && color !== "yellow"  && color !== "green"  && color !== "blue"  && color !== "purple") {
    return "invalid color";
  }

  return "valid color";
}

vote("cyan"); // "invalid color"

As you can see, this definitely works. But the code is long, messy, and is less readable now. To implement this efficiently, you need to use an array.

How to Do this Using an Array

First, define the array. A good variable name is validColors:

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];

You can use the array.includes() method here. The syntax for this is:

array.includes(item) // returns a boolean

To implement this in the code, the syntax looks like this:

!validColors.includes(color)

The exclamation point (!) at the beginning is there because you want to know if the color is NOT in the validColors array.

The full code for this is:

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];

const vote = (color) => {
  if (!validColors.includes(color)) {
    return "invalid color";
  }

  return "valid color";
}

This code is far easier to read and to edit. And it will be much easier to add new colors to the validColors array.

And you can test the code to make sure it works:

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];

const vote = (color) => {
  if (!validColors.includes(color)) {
    return "invalid color" ;
  }

  return "valid color";
}

console.log(vote("red")); // "valid color"
console.log(vote("orange")); // "valid color"
console.log(vote("yellow")); // "valid color"
console.log(vote("green")); // "valid color"
console.log(vote("blue")); // "valid color"
console.log(vote("purple")); // "valid color"

console.log(vote("cyan")); // "invalid color"
console.log(vote("black")); // "invalid color"

Now, this implementation uses much less code and is more readable.

Why Arrays are More Efficient Than Switch Cases

This is much easier than using a switch case, which would look like this:

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];

const vote = (color) => {
  switch (color) {
    case "red":
        console.log("you voted red");
        break;
    case "orange":
        console.log("you voted orange");
        break;
    case "yellow":
        console.log("you voted yellow");
        break;
    case "green":
        console.log("you voted green");
        break;
    case "blue":
        console.log("you voted blue");
        break;
    case "purple":
        console.log("you voted purple");
        break;
    default:
        console.log("invalid color");
    }
}

As you can see, this uses a lot more code. Another issue would arise if you needed to add another color as a valid option. Instead of just updating an array, you would need to carefully edit a switch case, which has a higher potential to break something in the code.

The Issue with Nested Conditional Statements

For another example, let's try to add the user's name when voting. The name must be less than or equal to 15 characters.

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];

const vote = (name, color) => {
  if (!validColors.includes(color)) {
    return "invalid color" ;
  } else {
    if (name.length > 15) {
      return "name is too long";
    }
  }

  return "valid name and color";
}

console.log(vote("bob", "red")); // "valid name and color"

The code works correctly, but is difficult to read, and can cause confusion if more code is added. You can clean this up by not nesting conditions.

const validColors = ["red", "orange", "yellow", "green", "blue", "purple"];

const vote = (name, color) => {
  if (!validColors.includes(color)) {
    return "invalid color" ;
  }

  if (name.length > 15) {
    return "name is too long";
  }

  return "valid name and color";
}

console.log(vote("bob", "red")); // "valid name and color"

This works well, as the code first checks if the color is valid, and then it checks if the name is valid. The code is also much easier to read now.

It’s looking good! I hope this has helped you understand how to write more efficient conditions in JavaScript.

Conclusion

Feel free to check out my GitHub and Replit to view my projects.

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

How to Use SQLite with Python

Eesa Zahed — Tue, 21 Feb 2023 21:41:41 +0000

Databases are a crucial component in software development. After all, we need to collect data in a location where we can digitally access it for reading, writing, updating, and deleting.

In this tutorial, you'll learn how to use SQLite with Python. Learning SQLite is a great way to learn how databases operate and how to perform basic CRUD (create, read, update, delete) operations.

Many software developer positions involve working with databases, and if you ever consider creating a full-scale application (such as a social media app or an online game), you'll definitely need a database too.

This tutorial will explain many basic concepts and simple operations, so that you can understand how to work with databases better.

What is SQLite?

SQLite is an embedded SQL (Structured Query Language) database engine library that works with many languages.

According to the official website, SQL text is compiled into bytecode, which is then run by a virtual machine. Therefore, it is extremely fast and can efficiently handle complex queries.

A SQLite database is stored as a disk file, similar to a CSV (comma-separated values) file. But SQLite has many advantages over using a CSV file:

It is written using C. C is a statically-typed, compiled language which is much faster than most languages, including Python.
It’s lightweight, so it performs better and faster than reading from a CSV file.
It’s easy to set up
It can handle more complex queries.
It’s more useful to learn, in case you are ever tasked with using SQL or MySQL in the future.

How to Setup SQLite

Here is an example of using SQLite with Python. I’m using Replit’s online IDE, but you are welcome to follow along on any IDE you like.

First, I’ll create a Python project with a main.py file. I’ll be using CS50’s SQL library, which you can install by running pip3 install cs50.

The first step is to create a database.db file in the root directory, which you can do by entering the following command in the terminal:

touch database.db

At this point, the following code should be added to main.py:

from cs50 import SQL

db = SQL("sqlite:///database.db")

How to create a database table

The next step is to create a table in the database. SQL stores data in tables, which are similar to tables found in Excel or Google Sheets. The code for this is:

db.execute("CREATE TABLE IF NOT EXISTS users (name TEXT, age NUMBER, fav_food STRING)")

To break this down, db is the database that the data is written to. Next, a command gets executed. If the table users doesn’t exist, create a table with the name users, with the column names name, age, and fav_food, with the data types for each value specified.

How to write to the database

You can use the INSERT operation to add a user.

db.execute("INSERT INTO users (name, age, fav_food) VALUES(?, ?, ?)", "eesa", 14, "pizza")

The value “eesa” gets inserted into the name column, the value 14 is inserted into the age column, and the value “pizza” is inserted into the fav_food column.

The code for adding another user (in this case, Bob), would be this:

db.execute("INSERT INTO users (name, age, fav_food) VALUES(?, ?, ?)", "bob", 20, "burgers")

How to read from the database

After this, we can attempt to read all the users from the database. You can do this by running the following code.

people = db.execute("SELECT * FROM users")
print(people) # [{'name': 'eesa', 'age': 14, 'fav_food': 'pizza'}]

The code above is fairly straightforward. The * in the SELECT statement selects everything that’s in the database.

To only select specific values, you can use the DISTINCT statement. Say for example, you only want the favorite food of each user. You can do this by running the following code:

people = db.execute("SELECT DISTINCT fav_food FROM users")
print(people)

You can also separate values using commas in a SELECT DISTINCT query:

people = db.execute("SELECT DISTINCT age, fav_food FROM users")
print(people)

What if we wanted to just read the data for Bob, and ignore everyone else? You can do this by using the SQL WHERE Clause:

people = db.execute("SELECT * FROM users WHERE name='bob'")
print(people)

How about for more complex queries? You can do this using the AND, OR and NOT syntax. You can separate WHERE clauses with these keywords for more complex queries.

people = db.execute("SELECT * FROM users WHERE name='bob' AND age=20")
print(people)

This will print out the data for Bob, because Bob is 20.

How to update a row in the database

To update a row, you can use the UPDATE statement like this:

db.execute("UPDATE users SET fav_food='shawarma' WHERE name='eesa'")

How to delete a row in the database

To delete a row, use the DELETE Syntax (as you might’ve guessed). It looks like this:

db.execute("DELETE FROM users WHERE name='bob'") # goodbye bob

people = db.execute("SELECT * FROM users")
print(people) # [{'name': 'eesa', 'age': 14, 'fav_food': 'shawarma'}]

To delete all the rows in the table, just remove the WHERE clause:

db.execute("DELETE FROM users") # :(

people = db.execute("SELECT * FROM users")
print(people) # []

Conclusion

And that’s it for now. For more information on SQLite, I'd recommend checking out the official documentation. I wish you the best in creating amazing things!

Feel free to check out my GitHub and Replit to view my projects.

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

How to Get GitHub Pro and Replit Hacker for Free as a Student

Eesa Zahed — Fri, 10 Feb 2023 17:47:17 +0000

If you are in high school or college/university and are interested in coding, you should consider signing up for GitHub Education.

This allows you to use GitHub Pro, as well as having many other benefits.

In this quick guide, I'll show you the steps to sign up for GitHub Education and I'll discuss its benefits. Then I'll show you how you can get free access to Replit Hacker for a year.

How to Get a Free GitHub Pro Account as a Student

If you do not already have a GitHub account, you will need to create one. Sign in with your personal email address (so you can use your account even after your school email address gets deactivated when you graduate).

Next, go to settings and click Emails. Here is where you will add your school email to your GitHub account.

Add your school email in your GitHub account

Add your school email address and verify it. Once it is verified, go to https://education.github.com/. This will allow you to be eligible for GitHub Pro. Sign in with your GitHub account.

Then, head to Benefits. Scroll down and click Get student benefits (just make sure you are eligible first).

Student benefits

Select Student as your academic status. Scroll down and use your school email address. After that, you have to select your school name as your school. Using a few sentences, explain why you are using GitHub.

Once you have completed those steps, press continue.

You’ll need to verify you’re a student at your school. To do this, you can upload a screenshot of an email from your school board or another official school document. It’ll take a few days to verify, so you’ll have to wait until then.

After that has been completed, you should see your dashboard looking something like this:

You'll now have access to many student benefits, including a $200 Digital Ocean credit, a free domain from Namecheap, and a free subscription to the JetBrains IDE, which you can renew annually.

Next in this tutorial, you will be learning how to get the Replit Hacker plan for free (which is not mentioned as a student benefit offer).

How to Get a Free Replit Hacker Plan

Once you have GitHub Pro, you’ll have access to many other benefits as well. One of the most notable benefits is a free Replit Hacker Plan for one year.

If you don't know what Replit is, it's a web-based IDE which allows users to create amazing projects (called Repls) that are stored on the cloud.

I have found Replit incredibly useful for coding in Rust, as it makes installing packages and setting up the dev environment really simple and easy.

You can also import GitHub repositories directly into Replit, so you can work on your code from any device, as long as you have an internet connection.

Replit is free to sign up, but having the Hacker plan gives you certain benefits that are extremely useful for development.

One notable benefit is having unlimited private Repls. Some more advantages are having 10x the account storage, and double the Repl storage. This plan starts at $7.00 a month, but luckily for students, there is a way to get the plan for free (Source).

If you don’t have a Replit account, create one with your personal email address (so you can use your account even after you school email address gets deactivated when you graduate).

Next, head to Account in the home menu.

Scroll down to Connected services and connect your GitHub account.

You should now have GitHub Pro (until you graduate) and Replit Hacker (for one year).

Enjoy!

Conclusion

Now with your upgraded accounts, I hope you enjoy creating amazing things! Feel free to check out my GitHub and Replit to view my projects.

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