DEV Community: Ifeoluwa isaiah

Simplifying API Calls and Promises with async/await in JavaScript

Ifeoluwa isaiah — Tue, 04 Jul 2023 22:14:20 +0000

Introduction:

Asynchronous operations and handling promises are essential concepts in modern JavaScript development, especially when working with APIs. Fortunately, JavaScript provides the async/await syntax, a powerful tool for simplifying the management of asynchronous tasks and making API calls more straightforward. In this blog post, we'll explore how async/await can simplify your code and demonstrate its usage with practical examples.

Understanding Promises:

Before we dive into async/await, let's briefly understand Promises. Promises are objects in JavaScript that represent the eventual completion or failure of an asynchronous operation. They provide a more organized and readable way to handle asynchronous tasks compared to traditional callback functions.

Introducing async/await:

Async/await is a syntax built on top of Promises that makes asynchronous code more concise and easier to read. It allows developers to write asynchronous functions that look similar to synchronous code, eliminating the need for nested callbacks or chaining multiple .then() methods.

Making API Calls with async/await:

Let's start with an example of making an API call using async/await. We'll use the Fetch API, a built-in browser feature, to fetch data from a remote server. Here's an example:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not OK');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

In this code, we define an asynchronous function fetchData() using the async keyword. Inside the function, we use the await keyword to pause the execution until the Promise returned by fetch() resolves. We then check the response's ok property to ensure a successful request. If not, we throw an error. If the response is successful, we can extract the JSON data using await response.json() and process it as needed.

Handling Errors with try...catch:

One of the main advantages of async/await is the ability to handle errors gracefully using the familiar try...catch syntax. In the previous example, we wrap the await statements within a try block and catch any errors in the catch block. This allows us to centralize error handling and maintain cleaner code.

Real-Life Examples and Best Practices:

Async/await is particularly useful in scenarios involving multiple asynchronous operations. For instance, you might need to fetch data from one API, process it, and then make another API call based on the result. With async/await, you can write such code in a more sequential and readable manner.

Here's another example that demonstrates the power of async/await:

async function processUserData() {
  try {
    const userData = await fetchUser();
    const processedData = await processData(userData);
    await saveData(processedData);
    console.log('Data processing and saving complete.');
  } catch (error) {
    console.error('Error:', error);
  }
}

In this example, we define an async function processUserData() that fetches user data, processes it, and saves it. Each step is clearly defined and easier to follow.

Conclusion:

The async/await syntax is a powerful addition to JavaScript, simplifying asynchronous operations and making code more readable. It provides a cleaner alternative to handling promises and enables developers to write asynchronous code that resembles synchronous code.

By understanding async/await and utilizing it in your API calls and other asynchronous tasks, you can enhance the efficiency and maintainability of your JavaScript codebase. Embrace this powerful feature, experiment with it, and leverage its benefits to build more robust and efficient applications.

Thanks for reading and happy hacking!

Exploring 17 Prominent ES6 Features: Unlocking JavaScript's Power

Ifeoluwa isaiah — Mon, 03 Jul 2023 21:34:20 +0000

Introduction:

In 2015, ECMAScript 2015 (ES6) brought a significant update to JavaScript, introducing a lot of powerful features that transformed the way we write code. In this blog post, we will delve into 17 prominent ES6 features, accompanied by code examples for each, to demonstrate how they can enhance your JavaScript development experience.

1. let and const: Improved Variable Declarations

ES6 introduced block-scoped variables with let and constants with const. This allows for better variable scoping and the creation of immutable values, respectively.

When you save something in a let variable then it can be changed or overridden to something else for example;

let num = 0;
num = 1;
// num is now equal to 1

But the opposite applies to a constant, as its name suggests, whatever you save in a const can't be changed later on and you won't be given a chance to override it or redefine it as with the let variable.

const count = 10;
count = 20;  // an error would occur here

2. Arrow Functions for Concise Function Expressions

Arrow functions provide a shorter syntax for defining functions and automatically bind the surrounding context for this.

const add = (a, b) => a + b;
add(2, 2);

At first sight this may look weird. You might want to ask if that is a function or variable or both. It is a function saved in a variable and its equivalent to this below;

const add = function(a, b) {return a + b};
add(2, 2)

But we can agree that the arrow function is more concise, in fact if we had only one argument you can remove the brackets;

const greet = name => console.log('Welcome'+ ' ' + name)
greet('Ife');
// check your console

3. Template Literals: Flexible String Formatting

Personally this is one of my favourites. Template literals enable multi-line strings and the interpolation of variables within a string using backticks. Before template literals writing strings had some problems, the one that got to me was this;

let text= 'It\'s alright.';
// I just hated the backslash for no reason

another option was to use double quotes, which wasn't really my thing:

let text = "It's alright."
// this looked better though

The above used to be a better approach to handling the apostrophe in words and whether the word was in "quotes" or not but sometimes there was need to join a string with a variable and the resort was usually this:

let name = 'Ife';
console.log('My name is' + ' ' name)

Of course there always had to be an additional empty string to separate the words from each other, but congratulations to all javascript developers as ES6 brought about glad tiding.

Instead of the 'single' or "double" quotes you can just use template strings

const name = 'Ife';
console.log(`Hello, ${name}!`);

instead of concatenating variables and string together you can simply add them provided you use a template string and wrap your variable in a dollar and curly bracket sign ${}.

In fact not only can you keep a variable inside but also perform some mathematical operations amongst others.

const answer = `The answer is ${50 % 40}`;
console.log(answer)

4. Destructuring Assignment: Extracting Values with Ease

Destructuring allows extracting values from arrays and objects into distinct variables, making code more concise.

Before we used to got through the route of ;

    let user = {
        email: 'ife@gmail.com',
        password: 12345,
        name: 'ifeoluwa',
        username: 'ife_xxo'
    }
    const name = user.name;
    const email = user.email;

    console.log(name, email)

But now destructuring finds where the value is itself and saves it in a variable providing you supplied the right name;

    let user = {
        email: 'ife@gmail.com',
        password: 12345,
        name: 'ifeoluwa',
        username: 'ife_xxo'
    }
    const {name, email} = user; 

    console.log(name, email)

5. Default Parameters: Simplified Function Arguments

ES6 introduced default parameter values, which are used when an argument is not provided or is undefined.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet('Ife') // then default valid won't apply
greet() // then default value will apply and it will say "Hello Guest!"

6. Rest Parameters: Variable-Length Arguments

Rest parameters enable functions to accept any number of arguments as an array, making it easier to handle variable-length parameter lists.

function examp(a, b, ...therest) {
    console.log('a', a)
    console.log('b', b)
   console.log(therest)
}
examp(1, 2, 3, 4, 5, 6)

The rest of the argument are stored in an array, if you check your console you will find 3, 4, 5, 6.

7. Spread Operator: Unpacking Arrays and Objects

The spread operator allows expanding arrays and objects into individual elements, making it useful for function arguments or array manipulation.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };

8. Classes: Object-Oriented Programming Made Easier

ES6 introduced a more structured syntax for creating classes, constructors, and inheritance. For example;

    class Animal {
        constructor(name) {
            this.name = name;
        }
        eat() {
            console.log(`${this.name} is eating some food`)
        }
       sleep() {
            console.log(`${this.name} is asleep`)
        }
   }

Inheritance allows classes to inherit properties and methods from other classes, forming a hierarchical relationship. In JavaScript, inheritance is achieved using prototypes.

class Dog extends Animal {
  bark() {
    console.log(`${this.name} is barking.`);
  }
}

const myDog = new Dog('Buddy');
myDog.eat();  // Output: Buddy is eating.
myDog.bark(); // Output: Buddy is barking.
myDog.sleep(); // Output: Buddy is sleeping

In the above snippet, Dog inherits it's method eat() and sleep() from it's parent Animal, because if you think about it all animals eat and sleep but the method bark() is peculiar to dogs only.

9. Modules: Organized Code Sharing

ES6 modules provide a standardized way to organize and share code across multiple files, improving code maintainability.

// math.js
export const PI = 3.14159;
export function double(x) {
  return x * 2;
}

// app.js
import { PI, double } from "./math.js";
console.log(double(PI));

We do this a lot in react when we're importing or exporting one component or another.

10. Promises: Managing Asynchronous Operations

Promises simplify asynchronous programming, allowing more readable and maintainable code for handling asynchronous operations.

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

11. Enhanced Object Literals: More Expressive Objects

ES6 enhanced object literals allow concise syntax for defining methods, dynamic property names, and object shorthand.

const name = 'Ife';
const person = {
  name,
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
};

12. Iterators and Generators: Custom Iteration Control

Iterators and generators provide ways to define custom iteration behavior, enabling advanced control over looping in JavaScript.

const iterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const item of iterable) {
  console.log(item);
}

13. Map and Set: Advanced Data Structures

ES6 introduced built-in data structures such as Map for key-value pairs and Set for unique values, offering powerful alternatives to arrays and objects.

const map = new Map();
map.set("name", "John");
map.set("age", 30);
console.log(map.get("name"));

const set = new Set([1, 2, 3, 3, 4, 5]);
console.log(set.size);

15. Symbol: Unique Identifier Creation

Symbols are unique and immutable values that can be used as object property keys, preventing unintentional property name collisions.

const firstName = Symbol('firstName');
const lastName = Symbol('lastName');

const person = {
  [firstName]: 'John',
  [lastName]: 'Doe',
  age: 30,
  city: 'New York'
};

console.log(person[firstName]); // Output: John
console.log(person[lastName]); // Output: Doe

16. String Methods: Enhancing String Manipulation

ES6 introduced new string methods, including startsWith(), endsWith(), and includes(), facilitating common string operations.

const str = "Hello, World!";
console.log(str.startsWith("Hello")); // true
console.log(str.endsWith("!")); // true
console.log(str.includes("World")); // true

17. Async/Await: Simplifying Asynchronous Code

Async/await is a powerful syntactic feature that makes asynchronous code look more synchronous and easier to understand.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Using the Async/Await, the above is a simple way of fetching data from an api, off course in the course of this other functions can be called to carry out other actions.

Conclusion:

These 17 prominent ES6 features have revolutionized JavaScript development, enhancing its readability, maintainability, and overall capabilities.

By leveraging these features in your projects, you can unlock the full potential of JavaScript and write more efficient and elegant code. Explore and experiment with these features further to elevate your JavaScript skills to the next level. Happy coding! And thanks for reading.

How to highlight a code block on dev.to

Ifeoluwa isaiah — Fri, 23 Jun 2023 14:26:49 +0000

I found that this code was generally more pleasing to the eyes

const name = 'Ifeoluwa'
function Welcome() {
console.log(`Welcome ${name} you made it here!`)
}

To this below

const name = 'Ifeoluwa'
function Welcome() {
console.log(`Welcome ${name} you made it here!`)
}

What's the secret? Nothing too complicated. To achieve this, you only need to specify the language the code is written in.

Normally when you open a code block it goes something like

Add the name like this

And it will render this

const msg = 'You did it!';

Conclusion

Congratulations! Now your blog post would have a nicer look from today onward, thanks for reading.

How to validate an html form with JavaScript

Ifeoluwa isaiah — Thu, 22 Jun 2023 22:34:14 +0000

So you have or want to create a form and would like to get data from it, as well as have it checked so it doesn't submit empty.

Before we dive into that, I want to assume you are a little bit familiar with JavaScript, if you don't know javascript in-depth don't worry we won't be doing any pro coding.

For this tutorial we will be using this login page as a real life demo.

The Html

I have a really simple html below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple login page</title>
  </head>
  <body>
    <section class="log-in-page">
      <div class="main-page">
        <div class="welcome">
          <h2>Welcome back</h2>
          <span class="guide">Please enter your details.</span>
        </div>
        <form class="form" action="#!">
          <label for="email" class="label">
            Email
            <input name="email" type="email" class="input-field" id="email"
                   placeholder="Enter your email" />   
          </label>

          <label for="password" class="label">
            Password
            <input name="password" type="password" class="input-field" id="password"
                   placeholder="Enter your password" />
          </label>

          <p class="error"></p>

          <div class="actions">
            <label for="check-box">
              <input type="checkbox" class="check-box" id="check-box" />
              Remember for 30 days</label>

            <a href="#!">Forgot Password?</a>
          </div>
          <button class="btn">Sign in</button>
        </form>

        <p>
<a href="#!">Don't have an account? Sign up</a>
     </p>
      </div>
      <div class="sub-page">
        <img src="https://images.unsplash.com/photo-1675050757561-741bd739bc06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEwfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=900&q=60" 
             alt="image from unsplash"
             class="img" 
      />
      </div>
    </section>
  </body>
</html>

The Css

  body {
        line-height: 1.5em;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        font-family: poppins, Verdana, Geneva, Tahoma, sans-serif;
        margin: 0;
    }
    .welcome {
        text-align: center;
        margin: 10px 0 10px 0;
    }
    h2 {
        margin-bottom: 10px;
        font-size: 31px;
    }
    .log-in-page {
        width: 100%;
        height: 100vh;
        display: flex;
    }
    .main-page {
        width: 50%;
        height: 100vh;
        background: radial-gradient(circle, #83c5bf85  0%,#d8e2dc 30%);  
     /* background-color: white; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
    .sub-page {
        width: 50%;
        height: 100vh;
    }
    .form {
        width: 450px;
        margin: 15px 0 15px 0;
        position: relative;

    }
    .actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 40px 0 10px 0;
    }
    .input-field {
        display: block;
        width: inherit;
        height: 50px;
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #006d77;
        background-color: transparent;
        font-size: 18px;
        box-sizing: border-box;
        border-radius: 5px;
        transition: ease-in-out;
        transition-duration: .4s;
    }
    .input-field::placeholder {
        font-size: 16px;
    }
    .input-field:focus {
        outline: none;
        border: 1px solid #006d77bb;
    }
    .btn {
        box-sizing: border-box;
        border: none;
        width: 100%;
        height: 46px;
        padding: 10px;
        margin-top: 20px;
        border-radius: 5px;
        background-color: #006d77;
        transition: ease-in-out;
        transition-duration: 1s;
        color: white;
        font-size: 18px;
    }
    .btn:hover {
        background-color: #006d77bb;
    }
    .btn:active {
        transform: scale(0.8);
    }
    .btn:focus {
        outline: none;
    }
    .label {
        width: 100%;

    }
    .img {
        width: 100%;
        object-fit: cover;
    }
    a {
        color: #075157;
        text-decoration: none;
    }
    .error {
        text-align: center;
        color: #9d0208;
        font-size: small;
        margin: 10px 0 10px 0;
    }
    .check-box{
        accent-color: #006d77bb;
    }

    @media (max-width: 900px) {
        .main-page {
            width: 100%;
            background-color: white; 
        }
        .sub-page {
            display: none;
        }
        .form {
            width: 70%;
        }
  }
    @media (max-width: 600px) {
         .main-page {
            background: white; 
        }
        .form {
            width: 90%;
        }
      .actions {
        font-size: 14px;
      }
      h2 {
        font-size: 25px;
      }
  }

After html and css have been sorted we have something like this set up.

The JavaScript

The first thing we need to do is to define some variables, now depending on what your form consists of you may need different variable to hold different values, but working with the html above, here are the variables we would be using.

  const form = document.querySelector('.form');
  const formData = [];

  const emailInput = document.getElementById('email');
  const passwordInput = document.getElementById('password');

  const errorMsg = document.querySelector('.error');

The form is saved in a variable so an event Listener like submit can be called on it, the formData is empty for now but later on it is going to hold our data gotten from the form. Then, our html form fields email and password are stored in a variable, lastly there's an html paragraph that is stored in the errorMsg variable which would display any error that occurs, like if a field is empty.

In order to track the effect of what we would be doing to our form add the following code below.

   form.addEventListener('submit', (event) => {
       event.preventDefault();
      formValidation()
    })

The event listener above listens for the submit event either by clicking on the form's submit button or by clicking on your device's enter key. Then what it does is to first prevent the normal way an html form is submitted which by default causes the browser to refresh, right after that a function we would be creating next is called in advance.

With that being done, lets create the formValidation function called above.

The formValidation is created to check that the form isn't empty or one of it's fields void, only after that is sorted out, would we be able to get the data from the fields.

Add the code below

 function formValidation() {
        if (emailInput.value === '' 
        && passwordInput.value === '') {
          errorMsg.textContent = 'The form is empty';

        } else if (emailInput.value === '') {
           errorMsg.textContent = 'Please enter your email'
        } else if (passwordInput.value === '') {
          errorMsg.textContent = 'Please enter your password';

        } else {
            // At this stage the form is definitely not empty

            errorMsg.textContent = ''
            emailInput.value = '';
            passwordInput.value = '';
        }

    }

The above function consists of if statements that sees to the fact that the form cannot be submitted empty or one field left out and if that occurs then an error message pops up to alert the user that something is wrong.

A quick addition;
There are different ways to handle errors, you may not need to display an error message but simply changing the colour of say the border of the input to red can point the user to the fact that a particular field is empty.

The code below

 function formValidation() {
        if (emailInput.value === '' 
        && passwordInput.value === '') {
            emailInput.style.border = '1px solid red';
            passwordInput.style.border = '1px solid red';

        } else if (emailInput.value === '') {
            emailInput.style.border = '1px solid red';
            passwordInput.style.border = '1px solid #006d77';
        } else if (passwordInput.value === '') {
            passwordInput.style.border = '1px solid red';
            emailInput.style.border = '1px solid #006d77';
        } else {
           // At this stage the form is definitely not empty
           emailInput.style.border = '1px solid #006d77';
           passwordInput.style.border = '1px solid #006d77';
            emailInput.value = '';
            passwordInput.value = '';
        }

    }

Now that we have handled all possible form errors, its time to get the data from the form fields, for this another function will be created.

Add the code below;

   function getFormData() {
        const userEmail = emailInput.value;
        const userPassword = passwordInput.value;

        formData.push(
            {
                'Email': userEmail,
                'Password': userPassword
            }
        )
        console.log(formData) 
    }

New variables like userEmail and userPassword are where the form input values are stored and pushed as an object into the formData array. If you check your console you will find this data.

Right after our form have been proven valid, call getFormData at the top of your else statement in your formValidation function.

 function formValidation() {

      ********
    else {
            // below this comment
           getFormData()
           // above this comment
            errorMsg.textContent = ''
            emailInput.value = '';
            passwordInput.value = '';
        }

    }

The full code below:

const form = document.querySelector('.form');
const formData = [];
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');

const errorMsg = document.querySelector('.error');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  formValidation()
})

//validate that the form isn't empty
function formValidation() {
  if (emailInput.value === '' 
      && passwordInput.value === '') {
    // I chose to show that there's an error by changing the color of the input's border
    emailInput.style.border = '1px solid red';
    passwordInput.style.border = '1px solid red';

  } else if (emailInput.value === '') {
    emailInput.style.border = '1px solid red';
    passwordInput.style.border = '1px solid #006d77';
  } else if (passwordInput.value === '') {
    passwordInput.style.border = '1px solid red';
    emailInput.style.border = '1px solid #006d77';
  } else {
    // gets the data from the form
    getFormData()
    emailInput.style.border = '1px solid #006d77';
    passwordInput.style.border = '1px solid #006d77';
    emailInput.value = '';
    passwordInput.value = '';
  }

}
function getFormData() {
  const userEmail = emailInput.value;
  const userPassword = passwordInput.value;

  formData.push(
    {
      'Email': userEmail,
      'Password': userPassword
    }
  )
  console.log(formData) 
}

Conclusion

And congratulations! You've validated a simple form and gotten reasonable data from it.

Keep in mind that there are other ways to do this and it is not within the scope of this tutorial to validate passwords and emails as this isn't an advance form. But don't be limited, now that you have an idea on what to do feel free to try different things, you can create an actual login page that verifies your email and password and a whole lot can be done to improve this simple form.

Drop a comment if you want a more advanced form validation tutorial.

That brings us to the end of the blog post, thanks for reading.

How to visualize data with a bar chart using d3

Ifeoluwa isaiah — Sun, 04 Jun 2023 22:31:29 +0000

Maybe it just occurred to you that you haven't visualized any data before since the start of your coding journey, or perhaps you haven't found a good blog explaining how data can be visualized.

Say no more.

In this blog post, we are going through the process of displaying data with a bar-chart using my freeCodeCamp data visualization project as a real life demo.

We would also be using a javaScript library called D3.js, for those unfamiliar with D3 it is a JavaScript library for producing dynamic, interactive data visualizations in web browsers.

The first step is to add the D3 script tag in the head of your html.

<script src="https://d3js.org/d3.v7.min.js"></script>

With that added, congrats we can now visualize data.

I am keeping in mind that d3 can be a very confusing thing to grasp at first sight, which is why I am going to break it down into much smaller bit so you understand why we do what we do.

The HTML

1. Add an svg element in your html:

This can be done manually by adding the following line of code

   <svg id="chart"></svg>

Your svg id be anything you like as long as it relates to what is being done.

Now, adding an svg doesn't do anything but hold the rest of the element we are going to put in it later. Before moving on to the javascript aspect, our bar chart needs an heading.

2. Add a text element:

we can again just include this with a text tag directly in our svg, add the line below in the svg tag.

 <text id="title" x="280" y="40">United States GDP</text>

Not a fan of Maths? Don't be confused the x and y above only helps with the positioning as it doesn't behave like a normal html element, x is the left and y is the top think of it as a margin left and margin top.

In summary our html file should look similar to this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bar chart</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
    <body>
       <svg id="canvas">
         <text id="title" x="280" y="40">United States GDP</text>
        </svg>
    </body>
</html>

Some CSS

If you aren't ready to give your bar chart some styling, I suggest giving the svg at least a background-color so you can see the changes that will be made, for this project I have a few styles added, you can customize this to suit your taste.

 body {
     width: 100%;
     height: 100vh;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background-color: #4a4e69;
     font-family: Arial, Helvetica, sans-serif;
  }
  svg {
     background-color: white;
     border-radius: 10px;
     padding: 10px;
  }
  #title {
     font-size: 20px;
  }
   #tooltip {
     margin-top: 20px;
     font-size: 18px;
     color: white;
  }
  rect {
     fill: #4a4e69;

  }
  rect:hover {
     fill: #f2e9e4
  }

With html and css out of the way, lets get to why you are here.

The JavaScript

1. Defining some variables:

In your script we are going to define the variables that are going to be used later in the creation of our bar chart, add the code below in your script

let values = [];

let heightScale;
let xScale;
let xAxisScale;
let yAxisScale;

let width = 800;
let height = 600;
let padding = 40;

The values array is empty because later on it's going to contain the data we are going to get from an api.

The heightScale is what will determine the height of each of the bars as it cannot have say a constant value like 50 or 60, if that were so then all bars will have the same height irrespective of the value it represents.

The xScale will determine where the bars are placed horizontally in the chart.

The xAxisScale will be use to create the xAxis at the bottom while the yAxisScale will be used to create to the yAxis on the left, you can think of it as the x and y axis on a graph.

The width, height and padding are attributes that are going to be added to the svg .

2. Select the `svg`:

To select an element in normal javascript we usually go through the route of document.getElementById() or document.querySelector() or whatnot but because we are using d3 here we can just do this

let svg = d3.select('svg')

and that's it, you have selected the svg element in your html and saved it in a variable called svg, if there are more than one svg in the document then it will return the first element, you can also select by the id or class of the element for example

let svg = d3.select('#chart')

both are valid ways of selecting an element in d3.

3. Create functions:

Now that we have our variables set, we need to create some functions that will be called to do one thing or another in order to create our bar chart.

I. Let's `drawChart()`:

The svg is where all other element are going to sit like the xAxis, yAxis and the bars. For that we need to define the width and height of it using a function.
Add the code below after selecting your svg

  let drawChart = () => {
        svg.attr('width', width)
           .attr('height', height)
   }

The above code is a simple arrow function that takes the svg variable and adds an attribute to it. The d3 .attr() takes two argument first is the attribute we want to add which in this case is the width and height and second is the value.

II. Let's `fetch()` some data:

Before we proceed creating the bar chart, we need to fetch the data that the bar chart will be created with, now freeCodeCamp gave us an api to work with.

https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json

You can open this up in a new tab to see how the data is structured.
To fetch this data I am going simply use javaScript's own fetch method, add the below code after the drawChart()

  fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') //get the data
      .then(res => res.json()) //convert the data to json
      .then(data => { 
       values = data.data //save the data in the values array
       console.log(values) //just so you can see that values now contains the data
 });

javascript
The code above simply gets the data and stores them in the values array, if you check your console you should see this

Lastly within the fetch method we want to call the functions we'll be creating later, add the code below to your fetch

drawChart()
generateScales()
drawBars()
generateAxes()

You should have something like this

  fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json') 
      .then(res => res.json()) 
      .then(data => { 
       values = data.data;
       console.log(values) 

       drawChart()
       generateScales()
       drawBars()
       generateAxes()
 });

III. Let's `generateScales()`:

We need to create the scales that the axis are going to use, add the below code after your drawChart()

let generateScales = () => {
    heightScale = d3.scaleLinear()
                    .domain([0, d3.max(values, (item) => {
                    return item[1]
                    })])
                   .range([0, height - (2 * padding)])

    xScale = d3.scaleLinear()
              .domain([0, values.length - 1])
              .range([padding, width - padding]) 
}

javascript
First, we defined the heightScale by calling d3.scaleLinear() function, after that we had to call a domain, a domain is simply telling it that the values we are expecting here have a maximum and minimum, take the code below for an example

const arr = [100, 200, 300, 400, 500, 600];

In the array above the minimum number present is 100 and the maximum is 600. That is essentially what the domain does, it gets the min and max of the data.

But the domain can't magically know the min and max of the data, we have to tell it by opening an array in it and specifying the lowest value as the first item and highest value as the second.

.domain([0, ])

Since we are working with GDP data we know for sure that the lowest can only be 0 else we'd have worked with d3.min() to find the lowest value in the array.

Now that the min of the domain is set we have to find the max as the second item in the domain array, now in real life one cannot always know the exact figure and it maybe subject to change in the future, that's why the below code is added as the second item in the array, it takes the values array and maps over each item before returning the highest value of the second index.

d3.max(values, (item) => {
 return item[1]
})

That's how we have this

.domain([0, d3.max(values, (item) => {
            return item[1]
})])

Now to the range, it also takes in an array with two values, the first is the min then the max, take the code below for an example

// our data
const arr = [100, 200, 300, 400, 500, 600];

If you think about it how can one represent a huge value like 600 should the height then be 600px tall? Then what happens when we work in thousands or millions how to be present the height of that bar representing the value? That is what the range does

const arr = [100, 200, 300, 400, 500, 600];
// we can say, to represent this data the range can be;
.range([10, 100])

What this does is that the value of 100 will be represented at the height of 10 because it is the min and 600 will be represented at the height of 100 because it is the max, likewise the rest of the value's height will be calculated within the range we have set for it.

I hope this code now makes more sense to you

.range([0, height - (2 * padding)])

It sets the min range to 0 and the max to the height of the svg take away the padding on both sides so there's a bit of a space.

Then we defined our xScale similarly

xScale = d3.scaleLinear()
            .domain([0, values.length - 1])
            .range([padding, width - padding])

This scale is used to position the xAxis which would sit horizontally at the bottom.

Moving on, in the generateScale() right after the xScale add the following code.

 let datesArr = values.map(item => {
    return new Date(item[0]);
    })  
   console.log(datesArr) // so you can see

   xAxisScale = d3.scaleTime()
                  .domain([d3.min(datesArr), d3.max(datesArr)])
                  .range([padding, width - padding])
  yAxisScale = d3.scaleLinear()
                 .domain([0, d3.max(values, (item) => {
                            return item[1]
                        })])
                 .range([height - padding, padding])

Now in order to have this bottom axis paired with dates below

We need to convert the string date from our data and change it to an actual date, if you studied the data you will see that the date for each value is at the index of 0

For this conversion to happen we created a datesArr to hold the newly converted dates

 let datesArr = values.map(item => {
    return new Date(item[0]);
  })

If you console.log(datesArr) you'll find our array containing the newly converted dates

After that, we defined the xAxisScale by calling the d3.scaleTime() because the values we are working with are dates, then we called the domain and range, likewise for the yAxisScale.

IV. Let's `generateAxes()`:

Now that the hard part which is generateScales() is out of the way it's time to start with our both of our axis, add this code below the generateScales() function.

 let generateAxes = () => {
       let xAxis = d3.axisBottom(xAxisScale)

       svg.append('g')
       .call(xAxis)
       .attr('id', 'x-axis')
       .attr('transform', `translate(0, ${height - padding})`);

       let yAxis = d3.axisLeft(yAxisScale);

       svg.append('g')
       .call(yAxis)
       .attr('id', 'y-axis')
       .attr('transform', `translate(${padding}, 0)`)
    }

Within the function above we defined an xAxis representing the x of our graph, before calling it with the d3.axisBottom(xAxisScale) method and giving it the xAxisScale

Now to display this on screen, a g element is appended the already selected svg then we called the xAxis which is essentially telling it to draw the xAxis within the g

 let xAxis = d3.axisBottom(xAxisScale)

       svg.append('g')
       .call(xAxis)
       .attr('id', 'x-axis')
       .attr('transform', `translate(0, ${height - padding})`);

An id attribute is added to the g and a transform attribute which if not added would naturally sit at the top of the svg, try taking away the transform attribute and you will have something like this

After that the yScale is defined and called with the d3.axisLeft(), just like we did for the xAxis, another g is appended to the svg then we told it to draw the yAxis within it, then an id attribute is given to it and a transform attribute to position it better within the svg, try taking the transform out to see its natural position.

   let yAxis = d3.axisLeft(yAxisScale);

       svg.append('g')
       .call(yAxis)
       .attr('id', 'y-axis')
       .attr('transform', `translate(${padding}, 0)`)

So in total we have something like this

V. Let's `drawBars()`:

Finally we are going to be filling the graph with bars representing its data, add the code below after the generateScales()

       let drawBars = () => {
        svg.selectAll('rect')
            .data(values)
            .enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('width', (width - (2 * padding)) / values.length)
            .attr('data-date', (item) => {
                return item[0];
            })
            .attr('data-gdp', (item) => {
                return item[1];
            })
            .attr('height', (item) => {
                return heightScale(item[1])
            })
            .attr('x', (item, index) => {
                return  xScale(index)
            })
            .attr('y', (item) => {
                return (height - padding) - heightScale(item[1])
            })

Breaking it down

  svg.selectAll('rect')
            .data(values)
            .enter()
            .append('rect')

First we selected all rect or rectangle within the svg whether they exist or not then we bind the rect with values with .data(values) to associate each rect with each value, then the .enter() is called to tell it what to do if no rectangles are found and right after that the .append(rect) is called which would create new rectangle for each value.

Then we added some attributes like width, height, class, 'x' and 'y' for proper display and positioning of each bar, other attributes like data-date and data-gdp are for the fulfillment of freeCodeCamp's test but it's good practice to add them too.

Again try taking away the x or y attribute to see how they would be positioned by default.

  .attr('class', 'bar')
  .attr('width', (width - (2 * padding)) / values.length)
  .attr('data-date', (item) => {
            return item[0];
         })
   .attr('data-gdp', (item) => {
            return item[1];
    })
    .attr('height', (item) => {
            return heightScale(item[1])
     })
    .attr('x', (item, index) => {
            return  xScale(index)
     })
    .attr('y', (item) => {
            return (height - padding) - heightScale(item[1])
}

You should have something similar to this now

VI. The Tooltip:

Now that we have our bar chart displayed the last thing is to add a tooltip to display some information about the particular bar hovered on, now for this I have created a very simple tooltip, add the code below at the top of your drawBars() before the rect selection

  let tooltip = d3.select('body')
                   .append('div')
                   .attr('id', 'tooltip')
                    .style('visibility', 'hidden')
                    .style('width', 'auto')
                    .style('height', 'auto')

What this does is to select the body add a div to it and give it an attribute of id which is set to tooltip, right after that, we gave a few styles to it like setting the visibility to hidden by default, setting the width and height to auto.

Now that we have our tooltip the next thing is displaying the necessary information when hovered upon, for this, d3 has a method for us which is the .on(), add the code below right after the y attribute of the svg, think of it as adding an event listener to the bars.

 .on('mouseover', (item, index) => {

     tooltip.style('visibility', 'visible')
            .html(`Date: ${index[0]} Data: <b>${index[1]}</b>`)
            .attr('data-date', index[0])

  })

 .on('mouseout', (item) => {
     tooltip.style('visibility', 'hidden')
   })

Using the .on() method the first argument takes the name of the the event while the second is the function that should run when the event happens, this function takes the item and the index of the item. Inside the function the tooltip visibility style is set back to visible when the mouseover happens and is given some html which include the date and value of the particular bar hovered upon. a data-date attribute is also given to the tooltip whose value is the date of the bar hovered upon.

 .on('mouseover', (item, index) => {

     tooltip.style('visibility', 'visible')
            .html(`Date: ${index[0]} Data: <b>${index[1]}</b>`)
            .attr('data-date', index[0])

  })

Now for when the mouse leaves we have this line of code below, which sets the visibility of the tooltip back to hidden that way it toggles on and off based on the event happening.

 .on('mouseout', (item) => {
     tooltip.style('visibility', 'hidden')
   })

The Full code

let values = [];

let heightScale;
let xScale;
let xAxisScale;
let yAxisScale;

let width = 800;
let height = 600;
let padding = 40;

let svg = d3.select('#canvas');

// the drawChart function

let drawChart = () => {
        svg.attr('width', width)
            .attr('height', height)
 }

// the generateScales function

let generateScales = () => {
          heightScale = d3.scaleLinear()
                .domain([0, d3.max(values, (item) => {
                    return item[1]
                })])
                .range([0, height - (2 * padding)])

        xScale = d3.scaleLinear()
            .domain([0, values.length - 1])
            .range([padding, width - padding]) 

       let datesArr = values.map(item => {
           return new Date(item[0]);
       })  
      console.log(datesArr)

       xAxisScale = d3.scaleTime()
                      .domain([d3.min(datesArr), d3.max(datesArr)])
                       .range([padding, width - padding])

       yAxisScale = d3.scaleLinear()
                       .domain([0, d3.max(values, (item) => {
                            return item[1]
                        })])
                       .range([height - padding, padding])
   }

// the drawBars function

  let drawBars = () => {
      let tooltip = d3.select('body')
                       .append('div')
                       .attr('id', 'tooltip')
                       .style('visibility', 'hidden')
                       .style('width', 'auto')
                       .style('height', 'auto')

      svg.selectAll('rect')
           .data(values)
           .enter()
           .append('rect')
           .attr('class', 'bar')
           .attr('width', (width - (2 * padding)) / values.length)
           .attr('data-date', (item) => {
                return item[0];
            })
           .attr('data-gdp', (item) => {
                return item[1];
            })
           .attr('height', (item) => {
                return heightScale(item[1])
            })
           .attr('x', (item, index) => {
                return  xScale(index)
            })
           .attr('y', (item) => {
                return (height - padding) - heightScale(item[1])
            })
           .on('mouseover', (item, index) => {

                tooltip.style('visibility', 'visible')
                .html(`Date: ${index[0]} Data: <b>${index[1]}</b>`)
                .attr('data-date', index[0])

            })

          .on('mouseout', (item) => {
                tooltip.style('visibility', 'hidden')
           })
    }

     // the generateAxes function

      let generateAxes = () => {
       let xAxis = d3.axisBottom(xAxisScale)

       svg.append('g')
       .call(xAxis)
       .attr('id', 'x-axis')
       .attr('transform', `translate(0, ${height - padding})`);

       let yAxis = d3.axisLeft(yAxisScale);

       svg.append('g')
       .call(yAxis)
       .attr('id', 'y-axis')
       .attr('transform', `translate(${padding}, 0)`)
  }

// fetching the data

      fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json')
      .then(res => res.json())
      .then(data => {

       values = data.data
       console.log(values)

       drawChart()
       generateScales()
       drawBars()
       generateAxes()
 });

Conclusion

Congratulations! You have just created a bar chart. The code above shows how HTML, SVG, CSS, and JavaScript can work together to create a stunning data graph. Understanding how each of the different elements works and their functions is crucial for developing more complex data graphs, if you want to know more about d3 there are many tutorials and online resources that can have you have better understanding of it.

This can be a lot to grasp but don't be too discouraged, if you want me to make a detailed tutorial about d3 all you need to do is comment down below.

Thanks for reading!

DEV Community: Ifeoluwa isaiah

Simplifying API Calls and Promises with async/await in JavaScript

Introduction:

Understanding Promises:

Introducing async/await:

Making API Calls with async/await:

Handling Errors with try...catch:

Real-Life Examples and Best Practices:

Conclusion:

Exploring 17 Prominent ES6 Features: Unlocking JavaScript's Power

Introduction:

1. let and const: Improved Variable Declarations

2. Arrow Functions for Concise Function Expressions

3. Template Literals: Flexible String Formatting

4. Destructuring Assignment: Extracting Values with Ease

5. Default Parameters: Simplified Function Arguments

6. Rest Parameters: Variable-Length Arguments

7. Spread Operator: Unpacking Arrays and Objects

8. Classes: Object-Oriented Programming Made Easier

9. Modules: Organized Code Sharing

10. Promises: Managing Asynchronous Operations

11. Enhanced Object Literals: More Expressive Objects

12. Iterators and Generators: Custom Iteration Control

13. Map and Set: Advanced Data Structures

15. Symbol: Unique Identifier Creation

16. String Methods: Enhancing String Manipulation

17. Async/Await: Simplifying Asynchronous Code

Conclusion:

How to highlight a code block on dev.to

Conclusion

How to validate an html form with JavaScript

The Html

The Css

The JavaScript

Conclusion

How to visualize data with a bar chart using d3

The HTML

1. Add an svg element in your html:

2. Add a text element:

Some CSS

The JavaScript

1. Defining some variables:

2. Select the svg:

3. Create functions:

I. Let's drawChart():

II. Let's fetch() some data:

III. Let's generateScales():

IV. Let's generateAxes():

V. Let's drawBars():

VI. The Tooltip:

The Full code

Conclusion

2. Select the `svg`:

I. Let's `drawChart()`:

II. Let's `fetch()` some data:

III. Let's `generateScales()`:

IV. Let's `generateAxes()`:

V. Let's `drawBars()`: