DEV Community: Adeola Ajiboso

A Guide to Application Programming Interfaces(APIs)

Adeola Ajiboso — Thu, 19 Oct 2023 16:23:49 +0000

You may not be familiar with the functions or meaning of an API, but you have almost certainly come across them.

APIs play a crucial role in the streaming of movies online, the sharing of recipes on Instagram, and the booking of flights through Emirates Airline.

This guide will take you through the meaning of Web APIs, how APIs work, API call and request methods, API keys, types, and benefits of API. Let's dive straight into the topic! 🚀

What is an API?

An API means Application Programming Interfaces, which enable diverse software applications to establish communication and interaction via the Internet. APIs empower developers to connect with external data sources from third-party providers, such as weather service, payment gateways, video streaming, etc.

How do APIs work?

APIs work by sharing data between applications, systems, and devices. This happens through a request and response cycle. A user initiates a request for data by interacting with an application. The request is sent to the API, which retrieves the data and returns it to the user.

What is API Call

An API call refers to the action of a client application sending a request to a server's API. It encompasses all subsequent processes following the submission of the request, which involves the API fetching data from the server and transmitting it back to the client.

Request Method

There are four primary request methods for communicating with a server:

GET: Used for fetching a resource
POST: To create a new resource
PUT: To edit or update an existing resource
DELETE: To delete a resource.

What is an API Key?

An API key is a distinct identification used to verify API calls. The key is a series of characters and numbers that identify the client. (Remember that the application or website is making the request.)

The client's access permissions determine whether the key grants or denies that request. The key also tracks how many queries are submitted for pricing and use purposes.

Types of APIs

APIs come in a wide variety of forms, with numerous classification schemes. One way to classify APIs is based on who can access them. This includes the following:

1. Private APIs: Also referred to as internal APIs, private APIs are used only within an organization to link various software components and are not accessible to other parties. For example, in a social networking platform, one private API may manage the login process, another that controls the feed, and another that helps with user communication. There could be hundreds or even thousands of secret APIs in some apps.

2. Public APIs: Public APIs give third-party developers public access to an organization's data, functionality, or services, which they can incorporate into their applications. Some public APIs are free, while others are available as paid goods. For example, an e-commerce application may use a public payment API like Stripe to handle payment processing rather than building that feature from scratch.

3. Partner APIs: Partner APIs allow two or more firms to collaborate on a project by sharing data or functionality. They rely on authentication techniques to ensure that only authorized partners access them because they are not accessible to the general public.

How to use an API

1. Choose an API.
First, you'll need to choose an API to integrate into your business. You may already be interested in an API, especially if you want to use one of the big names, such as the YouTube API. You might also wish to search by price – for example, you might want to start with a free API before moving on to commercial APIs.

2. Get an API Key
As mentioned, an API key is used to identify yourself as a valid client, set access permissions, and record your interactions with the API.

Some APIs make their keys freely available, while others require clients to pay for one. Either way, you'll need to sign up for the service then have a unique identifier assigned to you, which you will include in your calls.
Always keep your key private, like you would a password. If your key leaks, a bad actor could make API requests on your behalf. You may be able to void your old key and get a new one if such a breach occurs.

3. Go over the API docs.

API documentation is a how-to guide for using an API. It usually includes examples and lessons in addition to documentation.

Refer to the documentation for instructions on obtaining your key, sending requests, and retrieving resources from the server.

4. Create an endpoint request.
Write your first request. The most straightforward technique is structuring and sending requests using an HTTP client.

5. Link your app.
You can sync your application with your API of choice now that you know how to make requests to it.

What are APIs used for?

APIs are incredibly versatile, and they support a wide range of use cases that include:

Reducing Cost

API helps to cut down development expenses by facilitating the reuse of pre-existing functionality, as opposed to the need for redundant development efforts.

App Integration

Another example of using an API to integrate systems, API helps to cut down development expenses by facilitating the reuse of pre-existing functionality, as opposed to the need for redundant development efforts.

Consider a scenario where you want to integrate your e-commerce platform with a third-party shipping service. By utilizing an API, you can automate calculating shipping costs, generating shipping labels, and tracking shipments when a customer places an order on your online store.

Enhanced user experience

Web APIs enhance the user experience by providing social media login options, geolocation services, weather forecasts, and more.
This is where Web APIs come into play, enabling you to integrate and offer these services to your users.

For instance, picture a scenario where users access your logistics app without essential features like tracking their shipments or utilizing interactive map functions. The app only displays static data, which doesn't create an optimal user experience.

Wrapping Up

In conclusion, understanding the utilization of web APIs is a fundamental skill for developers looking to create interactive applications that significantly improve the user experience.

In this article, you learned the various types of APIs, their advantages, and the underlying mechanics of how APIs operate. With this knowledge, developers are well-equipped to leverage the power of APIs and create dynamic, user-friendly applications.

Happy Coding

What is Asynchronous JavaScript?

Adeola Ajiboso — Fri, 14 Jul 2023 09:16:57 +0000

Asynchronous simply refers to making many events occur simultaneously in any order without waiting for one another, and this definition applies to asynchronous Javascript.

In this article, I'll go through the concept of asynchronous JavaScript, Callback, Promises, Async/Await, Callback queue, Event Loop, and Web browser features (Web API).

Javascript is a single-threaded language that can only run one process at a time. JavaScript uses an event loop to carry out the operation, for now, consider the event loop as a queue where all Javascript processes are maintained and executed one at a time.

You should note Javascript is actually a Synchronous language. JavaScript executes lines of code sequentially, not concurrently, because it is by default, synchronous and single-threaded.

For instance, the code below will run and be executed line by line.

let username = "John";
let points = 5000;
let message = `${username} has earned ${points} points`;

console.log(message);

//Output
John has earned 5000 points

The code above is executed synchronously, each line is completed before moving on to the next line.

Let's consider a scenario where you need to retrieve a large amount of data from an API and display it. By default, in JavaScript, the execution is blocked, and all further instructions are halted until the retrieval request is completed. This is where asynchronous programming becomes crucial.

Let’s dive in.

What is Asynchronous JavaScript

Asynchronous JavaScript refers to the programming paradigm in which code execution does not follow the usual sequential flow from top to bottom. Instead, asynchronous code allows certain operations to be initiated and completed separately without blocking the execution of other code.

The concept of asynchronous JavaScript enables you to break down big complex projects into smaller tasks.

What is involved in Asynchronous JavaScript?

Web Browser features (Web API).
Callback queue.
Event loop.
Callback.
Async/Await.
Promise.

Web Browser Features (Web API)

Browser APIs, also known as web APIs, are pre-existing interfaces embedded within web browsers. These APIs offer built-in functionalities that can be leveraged within web applications.

Web APIs allow developers to access and interact with these additional functionalities using JavaScript. By utilizing web APIs, developers can seamlessly incorporate specific features into their codebase while minimizing code complexity. Examples of such features include making network requests and efficiently managing client-side storage.

Some web browser features include:

setTimeout()

The setTimeout() method allows you to run a block of code after a certain time delay. It is designed to execute the code once.

The syntax of setTimeout() is:

setTimeout(function, milliseconds);

Example:

function username() {
  console.log("John")
}

setTimeout(username, 5000)
console.log("Doe")

Output:

Doe
John

setInterval()

The setInterval() method repeats a block of code at every given timing event.

The syntax of setInterval() is :

setInterval(function, milliseconds);

Example:

// program to display a text using setInterval method
function orderItem() {
    console.log('I want a bag');
}

setInterval(orderItem, 1000);

Output:

I want a bag
I want a bag
I want a bag
I want a bag
...

In the above program, the orderItem() function is invoked by the setInterval() method at an interval of 1000 milliseconds. Consequently, the program outputs the message "I want a bag" every 1 second.

clearTimeout()

clearTimeout() method cancels a timeout previously established by calling setTimeout().

The syntax of clearTimeout() is:

clearTimeout(timeoutId)

Example:

// Set a timeout that logs a message after 3 seconds
const timeoutId = setTimeout(() => {
  console.log("Timeout executed!");
}, 3000);

// Clear the timeout before it executes
clearTimeout(timeoutId);

Output:
If you run the code snippet provided, there will be no output. The clearTimeout() function cancels the execution of the timeout set by setTimeout() preventing the callback function from being invoked. As a result, the message “Timeout executed!" will not be logged to the console.

clearInterval()

clearInterval() is used If you want to stop the function call.

The syntax of clearInterval() is:

clearInterval(intervalId);

Example:

// Define a variable to store the interval ID
let intervalId;

// Function to be executed repeatedly
function showMessage() {
  console.log("Hello!");
}

// Start the interval
intervalId = setInterval(showMessage, 1000);

// After 5 seconds, stop the interval
setTimeout(() => {
  clearInterval(intervalId);
  console.log("Interval stopped");
}, 5000);

Output:

Hello!
Hello!
Hello!
Hello!
Interval stopped

In the above program, you first declare a variable intervalId to store the ID returned by setInterval function. The showMessage function is defined, which will be executed repeatedly every 1000 milliseconds (1 second) using setInterval.
After 5 seconds (5000 milliseconds), clearInterval is called with the intervalId as the argument to stop the interval. This will stop the execution of the showMessage function. Finally, a message is logged to the console indicating that the interval has been stopped.

fetch()

The fetch() method in JavaScript is used to request data from a server.

They are not part of the JavaScript language, but they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code.

Read more about Web APIs 👉 here 👈.

Callback queue

The callback queue is where the callback function is pushed and awaits execution. The callback queue follows the First-In-First-Out(FIFO) principle.

Now let’s go through this example:

function username() {
  console.log("John")
}

setTimeout(username, 5000)
console.log("Doe")

//output
Doe
John

This block of code demonstrates the usage of the setTimeout() function to delay the execution of a callback function.

Here's how it works:

The username function is defined and stored in the Global memory, which logs the string "John" to the console.
The setTimeout() function is called with two arguments. The first argument is the username function, which specifies the callback function to be executed, and the second argument is the delay in milliseconds, which in this case is 5000 milliseconds (or 5 seconds).
After calling setTimeout(), the code continues to the next line and logs the string "Doe" to the console.
The string "Doe" is logged to the console first.
After the delay of 5000 milliseconds, the username function is executed and logs the string "John" to the console.

Event Loop

The event loop continuously checks if the call stack is empty. If the call stack is empty, it means that there are no functions currently being executed. In that case, the loop takes the functions waiting in the callback queue and pushes them onto the call stack for execution. The event loop acts like a gatekeeper for the callback queue.

The event loop manages code execution to avoid blocking, enabling the program to proceed with its operation even during the completion of asynchronous tasks.

What is Callback?

When you pass a function as an argument to another function, and that function is invoked or executed within the outer function, it is commonly referred to as a callback function.

Now let’s go through this example:

function placeOrder() {
    setTimeout(() => {
       return (Math.random() * 10) <= 5 ? 'Bag' : 'Shoe';
    }, 2000);
}

let order = placeOrder();
console.log('Order is for: ' + order);

//Output
// Order is for: undefined

Here in the placeOrder function, the setTimeout() will run after 2 seconds, and by that time the console.log statement has already been executed, the printed value of order is undefined.

Now, you can resolve this issue by logging your message to the console only after the data has returned from placeOrder. This can be done by passing a callback function to placeOrder, which will be invoked inside the placeOrder function.

function placeOrder(callback) {
    setTimeout(() => {
        const order = (Math.random() * 10) <= 5 ? 'Bag' : 'Shoe';
        callback(order);
    }, 2000);
}

placeOrder((order) => {
    console.log('Order is for: ' + order);
});

//Output
// Order is for: Bag

After two seconds, the callback function will be called, and the console statement will get executed with the correct order value.

The output of placeOrder function may differ in your case as you are using Math.random() to decide order value.

Promise

Promise is an object in JavaScript that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Promises simplify handling asynchronous code, making it easier to write and maintain asynchronous operations without resorting to callback functions or nested callbacks (known as callback hell).

Callback hell is a term used to describe a situation where the code becomes hard to read and understand due to a large number of nested callback functions.

A promise can be in one of three states:

Pending: The initial state when a promise is created, and the asynchronous operation is still ongoing.
Fulfilled: The state when the asynchronous operation is successfully completed, and the promise has a resolved value.
Rejected: The state when the asynchronous operation encounters an error or fails, and the promise has a reason for rejection.

There are three main aspects of promises.

Creating a promise
Handling a promise
Chaining of promise

Creating Promises

To create a promise, you use the Promise constructor, which accepts a function (commonly referred to as the executor) as an argument. The executor function is provided with two parameters: resolve and reject. Within the executor function, you execute your asynchronous task and invoke either resolve or reject based on the result.

Here's an example of creating a promise :

const fetchData = new Promise((resolve, reject) => {
  // Simulating asynchronous task (e.g., making an API call)
  setTimeout(() => {
    const data = { id: 1, name: "John Doe" };
   // Fulfilled the promise with the fetched data
    resolve(data); 
    reject(new Error("Failed to fetch data")); 
    // Alternatively, reject the promise with an error
  }, 2000);
});

Handling a Promise

After creating a promise, you can assign callbacks to handle the result using the then() and catch() methods.

The then() method takes a callback function as an argument and manages the fulfilled promise. It receives the resolved value or result of the promise as an argument.

The catch() method is used to handle the rejection of a promise and it is called when the promise is rejected, allowing you to handle any errors that occurred during the asynchronous operation.

Now let's go through this example:

fetchData
  .then((data) => {
    // Handle the fulfilled promise (access the resolved value)
    console.log("Fetched data:", data);
  })
  .catch((error) => {
    // Handle the rejected promise (access the error)
    console.log("Error:", error);
  });

Chaining Promises

Using the then() method, you can chain promises together to create a sequence of asynchronous operations. Each then() callback produces a new promise, enabling you to handle the outcome of the previous operation and proceed with the next one. Chaining promises allows you to establish a more sequential and readable flow of asynchronous operations.

fetchData
  .then((data) => {
    // Handle the first fulfilled promise
    console.log("Fetched data:", data);
    return someOtherAsyncTask(); 
 // Return a new promise
  })
  .then((result) => {
    // Handle the result of the second fulfilled promise
    console.log("Second async task result:", result);
  })
  .catch((error) => {
    // Handle any errors in the chain
    console.log("Error:", error);
  });

Async/Await

Async/Await is a relatively recent addition to JavaScript, introduced in ES8, that provides a means to write asynchronous code in a synchronous manner.

If you use the Async keyword before the function definition, you can then use await within the function. Await gives you the power to pause the function in a non-blocking way until the promise is resolved.

Now let's go through this example:

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    console.log('Fetched data:', data);
  } catch (error) {
    console.log('Error fetching data:', error);
  }
}
fetchData();

Here’s the explanation to the code snippet:

An async function called fetchUserData() is declared. Inside this function, an asynchronous HTTP request is made to the API endpoint using the fetch() function. The fetch() function returns a promise that resolves to a response object.
The execution is paused using the await keyword, allowing the code to wait for the promise returned by fetch() to resolve. The resolved response object is stored in the response variable.
Another await keyword is used to pause the execution and wait for the promise returned by the response.json() method. This method parses the response body as JSON. The parsed JSON data is then stored in the data variable.
Finally, the fetched user data is logged to the console. If any errors occur during the execution of the async function, they are caught in the catch block, enabling the handling and logging of the errors.

Conclusion

In this article, you’ve learned what asynchronous JavaScript is and how to write asynchronous JavaScript using promises and async/await. You’ve also seen how to send requests using the fetch API and async/await and how to return a response to asynchronous calls.

In JavaScript, synchronous instructions always take precedence over asynchronous instructions. For instance, if you have a scenario with numerous console.log statements followed by a setTimeout() function with a duration of 0 milliseconds, all the console.log statements will be executed first before the setTimeout().

I hope this article was informative? You can give it a like or a comment on what you think.

I'm available on Twitter, LinkedIn, or GitHub. Keep an eye out for my upcoming blog post, in which I'll go over another important area of web development. As a developer, I'm glad to provide additional information. Until then, happy coding, and take care!

Resources

Here are some blogs/post I read as a reference, you should check them out:

Let's Build A Weather Application With JavaScript

Adeola Ajiboso — Sat, 17 Jun 2023 09:51:10 +0000

Building a JavaScript Weather application is an excellent project choice for beginners, as it imparts a fundamental understanding of DOM (Document Object Model) and showcases how to utilize the Fetch API to fetch data from external services.

A weather application is a digital tool that provides users with real-time weather information and forecast.

This tutorial guides you in building a weather application, where you can search for any city, region, or country and get its current weather using Weather API.

What We Will Build

Take a glimpse at the stunning application we'll be coding.

Here's the Live Demo to explore the weather ☁ application.

Note: I have provided a concise overview of key points and steps that you can incorporate into your code in this article. If you would like to review the complete code, please visit my Github repository. Feel free to check it out!

Prerequisites

Basic HTML
Basic CSS
Basic JavaScript (knowing JavaScript Async/Await is a plus)

What we’ll learn? By creating this application, we will gain knowledge in the following areas:

Interacting with the DOM
Utilizing the Fetch API
Implementing a third-party API service

Now that we have a grasp of the prerequisites and essential details, let's dive right into building.

The back story for the project

Okay, so I recently learned about the concept of APIs, which I find fascinating. Shortly after learning about it, I stumbled upon the Mini JS-thon hackathon( a week-long hackathon) organized by FemCode Africa. I decided to participate, and guess what I built? A real-time Weather App.

Key Functionality Of The App

Weather Forecast: Displays real-time weather information for the specified city.
User input: This feature allows users to input the name of the city they want to know the weather forecast.
The application provides humidity and air pressure details.
Temperature Conversion: This feature allows you to view weather forecasts in Celsius (°C) and Fahrenheit (°F).

Setup

Step 1

First thing first, we'll need to set up the environment and add all the resources. Use your preferred code editor, create a folder called "Weather App" or choose any name you prefer. Inside the folder, create the necessary folders and files, and add the required resources as shown below. 👇👇

You can download all the resources from the provided link 👉 here 👈.

Step 2

Begin by creating the standard HTML file template. Choose a title of your preference
Link the style.css and index.js files, and include the desired Google font. I have imported the Lora font in my style.css. (You can explore more fonts at Google Fonts).

Markup of the App

The HTML file is going to be basic, nothing complicated. Also, the HTML file should be linked to both the CSS file and the JS file.



<!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" />
    <!----------------- cSS ----------------->
    <link rel="stylesheet" href="./style.css" />
    <!----------------- Favicon ----------------->
    <link rel="shortcut icon" href="../images/clouds.png" type="image/x-icon" />
    <title>Weather App</title>
  </head>
  <body>
    <div class="card">
        <h1>Weather App</h1>

        <!-- Search bar start -->
        <div class="search">
            <input id="search-result" type="text" placeholder="enter city name" spellcheck="false" name="city" required/>
            <button class="btn">search</button>
        </div>
        <!-- Search bar end -->

        <div class="err">
            <p>Invalid city name</p>
        </div>

        <!-- Weather Section start -->
        <div class="weather">
            <img src="images/clouds.png" alt=" clouds" class="weather-icon" />
            <h1 id="temp" class="temp"></h1>
            <h2 class="city">Lagos, NG</h2>
        <!-- Weather Section end -->

        <!-- Card section start -->
        <div class="details">
            <div class="col">
                <img src="../images/humidity.png" alt="humidity" />

                <div class="card-details">
                    <p class="humidity">66%</p>
                    <p>Humidity</p>
                </div>
            </div>


            <div class="col">
                <img src="../images/barometer.png" alt="barometer" />

                <div class="card-details">
                    <p class="pressure">1013</p>
                    <p>Air pressure</p>
                </div>
            </div>
        </div>

        <!-- degree button -->
        <div class="degree-button">
            <button id="celcius" class="btn-item1">°C</button>
            <button id="farenheit" class="btn-item2">°F</button>
        <div>
        </div>
    </div>
      <script src="index.js"></script>
    </body>
  </html>
  </body>
</html>

Step 3 - Style the Index file

Start with styling the body and other elements. ``` CSS @import url(""); *{ margin:0; padding:0; font-family: "Lora", serif; box-sizing: border-box; }

body{
background: #e8eA96;
}


- Do check my [GitHub repository](https://github.com/Ajiboso-Adeola/Weather-app) to access the CSS code.

## Step 4 - Retrieving data from API

To obtain weather data, it is essential to comprehend the process. Obtaining the data relies on a third-party service, named OpenWeatherMap, a website that offers diverse weather data through an API. By integrating this API into our application, we can utilize the weather data on our website. In this context, an API acts as an intermediary, akin to a waiter, facilitating the transmission of data from the server to the client based on the client's specific requests.

To utilize the API, it is necessary to acquire an API key. Let's explore the process of obtaining our API key:

**Step 1:** Step 1: Visit [OpenWeatherMap](https://home.openweathermap.org/users/sign_in) and choose the "Sign In" option.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz0y53uka5u2kwzt4dwx.png)

**Step 2:** If you do not have an account, click on the "Not Registered? Create an account" option.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bugqyooo141ucew44etc.png)

**Step 3:** Fill out the form and click on Sign up to create your account.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/maorr5y0o0d6lwj2atg9.png)

**Step 4:** Navigate to the menu and select the API option.

**Step 5:** To obtain the current weather data, it is necessary to subscribe to the Current Weather Data API service. Click on the Subscribe button to proceed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/018or7ol90ofevw4etro.png)

**Step 6:** Next, a pricing window will appear. We don't require any paid plans. Therefore, choose the free option from the available choices, and we are nearly done.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xfc1jnkg52l69ns7hkp.png)

**Step 7:** Once you have successfully subscribed, locate your profile name in the top right corner and click on it. From the dropdown menu, select My API Keys.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mk2ihl91sw6o3snvy1as.png)
**Step 8:** Your API key will be displayed in this section. Remember to keep it secure and avoid sharing it publicly with anyone.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8qkjoroepkli2g2zgb6.png)

Now that we have obtained our API key, let's dive back into building our app. 😎

## Step 5: JavaScript coding Part

Understanding how to integrate APIs in JavaScript is essential when it comes to utilizing APIs for web applications. I have provided the complete code below for you to review and gain a thorough understanding of its functionality.

- Let’s start by getting the API key and endpoint URL.
```js


// API key and endpoint URL
let apiKey = "8b3c2188b1fe57******************";//Enter your API key here
let apiUrl ="https://api.openweathermap.org/data/2.5/weather?units=metric&lang=en";

The code above defines the apiKey variable, which should be replaced with your own API key obtained from OpenWeatherMap. The apiUrl variable contains the base URL for making API requests to OpenWeatherMap's weather endpoint. It includes query parameters for units (metric) and language (English).



// DOM elements
let searchBox = document.querySelector(".search input");
let searchButton = document.querySelector(".search button");
let weather_icon = document.querySelector(".weather-icon");

Then we select the DOM elements using document.querySelector and assigned them to variables: searchBox (input field), searchButton (button), and weather_icon (image element for weather icon).



// Variable to store Celsius value
let cel;

The cel variable is declared to store the Celsius temperature value.



// Function to check the weather for a city
async function checkWeather(city) {
  try {
    // Make API call to fetch weather data
    const response = await fetch(`${apiUrl}&q=${city}&appid=${apiKey}`);

    if (!response.ok) {
      throw new Error("Unable to fetch weather data.");
    }

    // Parse the response JSON
    const data = await response.json();

    // Update the DOM with weather information
    document.querySelector(".city").innerHTML = data.name;
    const tempCelcius = Math.round(data.main.temp);
    document.querySelector(".temp").innerHTML = tempCelcius + "°C";
    document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
    document.querySelector(".pressure").innerHTML = data.main.pressure;

    // Set the weather icon based on weather conditions
    if (data.weather[0].main === "Clouds") {
      weather_icon.src = "../images/clouds.png";
    } else if (data.weather[0].main === "Clear") {
      weather_icon.src = "../images/clear.png";
    } else if (data.weather[0].main === "Rain") {
      weather_icon.src = "../images/rain.png";
    } else if (data.weather[0].main === "Drizzle") {
      weather_icon.src = "../images/drizzle.png";
    } else if (data.weather[0].main === "Mist") {
      weather_icon.src = "../images/mist.png";
    }

    // Display the weather section and hide error message
    document.querySelector(".weather").style.display = "block";
    document.querySelector(".err").style.display = "none";

    // Store the Celsius value
    cel = tempCelcius;
  } catch (error) {
    // Display error message and hide weather section
    document.querySelector(".err").style.display = "block";
    document.querySelector(".weather").style.display = "none";
    console.error(error);
  }
}

Next we define an async function named checkWeather that is responsible for checking the weather for a given city.
Here's an explanation of what the code does:

checkWeather()takes a parameter city, which represents the city for which the weather needs to be checked.
Inside the function, it makes an API call to fetch weather data using the fetch function. The API call is made to the OpenWeatherMap API with the specified city and apiKey.
If the API response is not successful (status code other than 200), it throws an error with the message "Unable to fetch weather data."
If the API call is successful, it parses the response JSON using the response.json() method.
The function then updates the DOM (HTML) with the weather information obtained from the API response. It sets the city name, temperature in Celsius, humidity, and pressure values to their respective HTML elements.
Based on the weather conditions obtained from the API response, it sets the src attribute of the weather_icon element to the corresponding weather icon image file.
It displays the weather section by setting the display style property to block and hides the error message by setting its display property to none.
The Celsius temperature value is stored in the cel variable for later use.
If any error occurs during the execution of the try block, it catches the error, displays the error message, hides the weather section, and logs the error to the console.




// Event listener for search button click
searchButton.addEventListener("click", () => {
  const city = searchBox.value.trim();
  if (city !== "") {
    // Call checkWeather function with the entered city
    checkWeather(city);
  }
});

// Event listener for Fahrenheit button click
document.getElementById("farenheit").addEventListener("click", () => {
  // Convert Celsius to Fahrenheit and update the HTML
  if (cel !== undefined) {
    let fer = Math.floor(cel * 1.8 + 32);
    document.querySelector(".temp").innerHTML = fer + "°F";
  }
});

// Event listener for Celsius button click
document.getElementById("celcius").addEventListener("click", () => {
  // Restore the Celsius value and update the HTML
  if (cel !== undefined) {
    document.querySelector(".temp").innerHTML = cel + "°C";
  }
});

Here’s what the code snippet above does:

The search button has an event listener that triggers when clicked. It calls the checkWeather() function with the entered city name obtained from the search input field.
The Fahrenheit button has an event listener that converts the Celsius temperature to Fahrenheit when clicked. It updates the HTML with the converted temperature.
The Celsius button has an event listener that restores the Celsius temperature and updates the HTML when clicked.

Result

Here's the complete view of the Weather Application below.

Conclusion

Let's make it more fun! I would love to know about the weather in your area. Comment below with your current weather info, and let's see what the weather is like in different locations.

If you have any inquiries regarding the project, don't hesitate to ask. Thank you for reading, and stay tuned for more exciting projects in the Let's Build series!

I'm available on Twitter, LinkedIn, and GitHub. Keep an eye out for my upcoming blog post, in which I'll go over another important area of web development. As a developer, I'm glad to provide additional information. Until then, happy coding, and take care!

A beginner's guide to Objects in JavaScript

Adeola Ajiboso — Wed, 10 May 2023 16:51:56 +0000

Introduction

JavaScript is a popular programming language that is commonly used in web development. As a newbie in JavaScript, you may have come across the term objects and wondered about its significance.

However don't fret, because in this article, we'll talk about objects in a fun and easy-to-understand method. We'll also look at some code samples to better understand the concept of objects.

Specifically, we will explore object-oriented programming, object methods, prototypes, inheritance, constructors, and classes.

Let's dive into the topic at hand!

What are Objects in JavaScript?

Objects in JavaScript refer to a group of properties. Properties consist of key-value pairs, where the key is represented by a string, and the value can be of any data type, including another object. In JavaScript almost anything can be treated as an object, and each object can contain properties with values. In simple terms, objects are like Rockstar's of JavaScript - they come in style, save the day, and organize your data like a boss.

Let’s consider the example below:

// object literals syntax
const person = {
  firstName: "Adeola";,
  lastName:"Comfort";,
  age: 19;,
  country: 'Nigeria';
};

In this example, person is an object with four properties and values respectively:

firstName - Adeola
lastName -Comfort
age-19
country- Nigeria

Accessing Objects Properties

Accessing objects in JavaScript can be compared to gaining entry to a vault filled with valuable data, where the key to unlock the vault is the object property. There are two ways to access an object's properties, using either dot notation or bracket notation.
Let’s consider the example below using the dot notation:

// accessing object value using the dot notation
console.log(person.firstName) // output: Adeola

Let’s consider the example below using the bracket [] notation:

//using [] to access object value
console.log(person['age'])

In this example, the person['age'] returns the value of the age property, which is 19.

Objects Method

Methods are actions that can be performed on objects. Methods are still functions, but it's defined on an object.

Let’s consider the example below, creating an object method:

// object literals syntax
const person = {
  firstName: "Adeola",
  lastName:"Comfort",
  age: 19,
  country: 'Nigeria',
  fullname: function(){
console.log(`Hello, my full name is ${this.firstName} ${this.lastName}`)
};
};
person.fullname()
output: //Hello, my full name is Adeola Comfort

In JavaScript, this keyword is a context object representing the context in which the current code is executed.

Getters and Setters

Getters are used to access objects' properties, and setters are used to change or mutate them.
Let’s consider this example of getters:

//Getters
const person = {
  firstName: "Blue",
  lastName: "Doe",
  occupation: "Writer",
  get job() {
    return this.occupation;
  }
};
console.log(person.occupation) // Output: Writer

Let’s consider this example of setters:

//object literals syntax
   const person = {
   firstName: "John",
   lastName: "Doe",
   occupation: "NO",
   set lang(value) {
        this.occupation = value;
      }
    };
    person.lang = "Software Developer";
    console.log(person.occupation)      
//Output: Software Developer

Object.entries

The Object.entries() method converts an object into an array of key-value pairs.

Let’s consider the example below to understand Object.entries() better:

//Object literals
const user = {
  name: 'Zoe',
  age: 4,
  color:  'Blue',
  email:'zoe@gmail.com'
};

// object.entries
console.log(Object.entries(object1))

/* output
 we have a subarray of a key and value pair
[
  [ 'name', 'Zoe' ],
  [ 'age', 4 ],
  [ 'color', 'Blue' ],
  [ 'email', 'zoe@gmail.com' ]
]
*/

Object.keys

Object.keys return an array of the object's property name. For example, Let’s consider the code below to understand Object.keys:


const user = {
  name: 'Zoe',
  age: 4,
  color:  'Blue',
  email:'zoe@gmail.com'
};
console.log(Object.keys(user))

/*output
 we have the array of those property name
[ 'name', 'age', 'color', 'email' ]
*/

Object.values

Object.values return an array of the object values. Let’s consider the example below:


const user = {
  name: 'Zoe',
  age: 4,
  color:  'Blue',
  email:'zoe@gmail.com'
};
console.log(Object.values(user))

/* output
[ 'Zoe', 4, 'Blue', 'zoe@gmail.com' ]
*/

Object-Oriented Programming(OOP) In JavaScript

Object-oriented programming is a programming paradigm centered around objects rather than functions.

OOP is not a programming language rather, it's a style of programming.

In JavaScript, objects are used to model real world , giving them properties. For instance, think of a laptop: a laptop has object properties such as make, model, operating system(OS), RAM specification, etc., and methods like on(), off(), etc.

Objects can be defined using factories or constructor functions. Creating an object with the object literal syntax is an issue only if the object has behaviors.

Constructor

Constructor functions are used to create new objects with specific properties and methods. Object-oriented programming often uses them to create multiple instances of an object with the same properties and methods.

Let’s consider the example of an object constructor function:

function Person(name, interest) {
  this.name = name;
  this.interest = interest;
  this.greet = function() {
    console.log("Hello, my name is " + this.name + " and  I love " + this.interest);
  }
}

// create new objects from the constructor
let person1 = new Person("John", "Slepping"); 
let person2 = new Person("Jane", "Writing");

//access properties in the created object
person1.greet(); //Output:Hello, my name is John and  I love Slepping
person2.greet(); //Output:Hello, my name is Jane and  I love Writing

In creating a constructor, the naming convention we use for constructor function is different, the first letter should be uppercase.

In the above example, we define a Person constructor function that takes two parameters, name and interest. Inside the constructor function, we use the this keyword to create properties on the newly created object. We then create two instances of the Person object using the new keyword and passing in the appropriate parameters.

When we access the properties in the created object person1.greet andperson2.greet`, we see that they contain the expected values as shown in code snippet above.

When we access the properties in the created object person1.greet and person2.greet`, we see that they contain the expected values as shown in code snippet above.

Prototype

Every object in JavaScript has a prototype property that allows for object inheritance. The prototype property is an object that acts as a template or blueprint for creating new objects.

When a property or method is called on an object, JavaScript first looks for that property or method directly on the object itself. If it can't find the property or method on the object, it looks to the object's prototype property for the property or method. If the property or method still can't be found, it looks up the prototype chain until it reaches the end of the chain, which is the Object.prototype object.

Let’s consider the example below:

// create the constructor
function Students(name, age, grade) {
  this.name = name;
  this.age = age;
  this.grade = grade;
  this.register = function() {
    console.log("Hello, " + this.name + " you have been registered");
  }
}
// creating a method using the prototype keyword
Students.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
}
// generate new objects from the constructor
let person1 = new Students("July", 30); 
let person2 = new Students("Jane", 35);

person1.register(); // "Hello, July you have been registered"
person2.register(); // "Hello, Jane you have been registered"

person1.greet(); // "Hello, my name is July and I'm 30 years old."
person2.greet(); // "Hello, my name is Jane and I'm 35 years old."

The given code defines a constructor function named Students. The constructor function takes three parameters (name, age, and grade) and assigns them as properties of the newly created object using the this keyword. It also defines a method called register() that logs a message to the console, welcoming the student by their name and letting them know they have been registered.

Then, using the prototype property of the constructor function, it defines another method called greet(). The greet() method logs a message to the console, introducing the student by their name and age.

Finally, the code creates two instances of the Students object, person1 and person2, by using the new keyword and passing in the appropriate values for each student's properties.
When the register() method is called on each object, it logs a welcome message to the console. Similarly, when the greet() method is called on each object, it logs an introduction message to the console.

Classes

In JavaScript, classes provide a way to define a blueprint for creating objects with similar properties and methods. Classes are syntactical sugar over the existing prototype-based inheritance system in JavaScript.

Here's an example of how to create a class in JavaScript:

//create the  class constructor
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
}
const student2 = new Person('Adeola', '30')
console.log(student2)

Inheritance

Inheritance refers to an object's ability to inherit properties and methods from a parent object. Inheritance is implemented in JavaScript classes by using the extends keyword to create a child class that inherits from a parent class.

The idea behind inheritance is code reusability. Inheriting from the Parent class makes the Child class able to use all the methods and properties of the parent class.

Here's an example of how to create a Person class with a child class that inherits from it:


// create the constructor
class Person {
  constructor(name, age, grade) {
    this.name = name;
    this.age = age;
    this.grade = grade;
  }

  greet() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
}
class Student extends Person {

  study() {
    console.log(this.name + " is studying hard for his " +  this.grade + ' grade');
  }
}
const student1 = new Student("John", 18, '12th');

student1.greet(); // Output: "Hello, my name is John and I'm 18 years old."
student1.study(); // Output: "John is studying hard for his 12th grade."

Conclusion

In conclusion, understanding object is essential for web development. By knowing what an object entails and how its applicable, developers can write more efficient and effective code.

To be clear, I'm not an expert on these topics. I'm simply sharing what I've been taught and learning along the way. I hope you've gained some knowledge.

Resources

I highly recommend you check out the following resources, which cover the concepts explained further:

Do not hesitate to ask questions or leave comments on this post. I'm available on Twitter, LinkedIn, or GitHub. Keep an eye out for my upcoming blog post, in which I'll go over another important area of web development. As a developer, I'm glad to provide additional information. Until then, happy coding, and take care!

Understanding JavaScript Data Types In Web Development

Adeola Ajiboso — Mon, 13 Mar 2023 21:17:13 +0000

JavaScript is a popular programming language for web development. Developers can create dynamic and interactive web applications by manipulating web page elements and responding to user interactions.

JavaScript supports several primitive data types, including numbers, strings, booleans, null, and undefined, and it also supports more complex data types like arrays and objects. Each data type has its unique properties and behaviours, and understanding how to use them effectively can make a big difference in the performance and reliability of our code.

This article will review the various JavaScript data types in depth, looking at their characteristics and best practices for using them in web development projects.

What Are Data Types?

Data types describe the characteristics of data. Also, a data type is a classification of data that tells the compiler or interpreter how the programmer intends to use the data.
Data types can be classified into two: primitive data types and non-primitive data types.

Primitive data types in JavaScript

Primitive data types are non-modifiable data types. Once a primitive data type is created, we cannot modify it. Primitive data types in JavaScript include:

Numbers:
Numbers are integers or decimal values which can perform arithmetic.

let a = 25;    // integer value
let b = 27.0;  // decimal value

Strings:
Strings are text enclosed by a single, double, or backtick quote. We need a variable name, an assignment operator, and a value enclosed by a single, double, or backtick quote to declare a string.

let nameOne = “Ade”;   //This is a string
let nameTwo= ‘Ola’;
let name = `love`;

Let's consider the example below :

let animal = "Dog";
animal[0] = "C";
console.log(animal);    //This returns Dog

The expression above indicates that the variable "animal" value remains unchanged after evaluating the expression. As a result, we can conclude that strings are immutable.

Primitive variables are compared, their values are compared directly to determine whether they are equal.

Boolean:
Boolean gives either true or false values. They are mostly used to check logical conditions.

let a = 5;
let b = 6;
console.log(a==b)    // returns false

let a = 5;
let b = 5;
console.log(a==b)    // returns true

Let's consider some more examples below:

let firstName = "Ade";
let lastName = "Ade";
console.log(firstName == lastName);    // This returns true

//Another example
let ageOne = 10;
let ageTwo = 11;
console.log( ageOne == ageTwo);        // This returns false

Null:
Null is an empty value

let a = null;
console.log(a)        //This returns null

Undefined:
A declared variable without a value

let a;
console.log(a)       // This returns undefined

Non-Primitive Data types in JavaScript

Non-primitive data types are modifiable or mutable, i.e., the value of non-primitive data types can be changed after it gets created. Non-primitive data types in JavaScript include:

Object: An object is a collection of properties, which are key-value pairs.
Array: An array is a list of data values in a square bracket. Arrays can contain the same or different data types.

Let's consider the code below.

let name = ["Adeola", "Tosin", "Comfort"];
name[1] = "Daniel";
console.log(name);      //output: ["Adeola", "Daniel", "Comfort"]

An array is a mutable non-primitive data type, meaning its contents can be changed.

Note: To avoid unexpected results, it is generally recommended not to directly compare non-primitive data types like objects and arrays, as they are typically compared by reference rather than by value.

// array example
let age = [10, 26, 38]
let ages = [10, 26, 38]
console.log(age == ages)     // This returns false

// object example
let user_info_One = {
name: 'Adeola',
role: 'Writer',
country:'Nigeria'
}
let user_info_Two = {
name: 'Adeola',
role: 'Writer',
country: 'Nigeria'
}
console.log(user_info_One == user_info_Two)  // This returns false

Note: Two objects are only strictly equal if they refer to the same underlying object.

// array example
let age = [10, 26, 38]
let ages = age
console.log(age == ages)     // This returns true

// object example
let user_info_One = {
name:'Adeola';,
role:'Writer';,
country:'Nigeria';
}
let user_info_Two = user_info_One
console.log(user_info_One == user_info_Two)    //This returns true

String Concatenation

Concatenation is the term used to describe the process of joining multiple strings together to create a single string.

Let's consider the code below.

let firstName =  "Adeola";
let lastName =  "Ajiboso";
let gender =  "Girl";
let hobby =  "writing";
let fullName =  firstName + ' ' + lastName;
let userInfo = fullName + ' is a  ' + gender + ' and  she loves ' + hobby;
console.log(userInfo);

// Output
Adeola Ajiboso is a Girl and she loves writing

Template Literals

Template literals provide an easy way to interpolate variables and expressions into strings.

Backticks are used instead of single or double quotes to create a template string. We can include placeholders for expressions or variables within a template string by enclosing them in curly braces () and prefixing them with a dollar sign ($).

For example,

let name = "Peter";
let age = 20;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message)  
//output
My name is Peter and I am 20 years old.

String Methods

JavaScript methods are actions that can be performed on objects. Common string methods include:

toUpperCase(): toUpperCase() is a built-in string method that changes a string to uppercase

let myWord = "hello, world!";
let myUppercase = myWord.toUpperCase();
console.log(myUppercase);               
// Output: HELLO, WORLD!

toLowerCase(): This method changes the string to lowercase.

let myWord = "Hello, World!";
let myLowercaseString = myWord.toLowerCase();
console.log(myUppercaseString); 

// Output:hello,world!"

length(): This method returns the number of characters in a string, including space.

let fruit = "Banana ";
console.log(fruit.length);         // This return 7

substr(): This method takes two arguments, the substring's starting index and the substring's length to be returned.

let myString = "hello, world!";
let mySubstring = myString.substr(7, 5);
console.log(mySubstring);                  // Output: "world"

split(): This is a built-in string method that splits a string into an array of substrings based on a specified separator.

let string = 'Technical writing is fun'
console.log(string.split())     
console.log(string.split(' '))  

//output
// Changes to an array -> [ 'Technical writing is fun' ]
// Split to an array at space -> [ 'Technical', 'writing', 'is', 'fun' ]

trim(): This method removes trailing space at a string's beginning or end.

let firstName = ' Prestige '
console.log(firstName)
console.log(firstName.trim())

//output
  Prestige
Prestige

includes(): This method returns a boolean value indicating whether the specified string is within the original string.

let word = "hello, world!";
let isWordFound = word.includes("world");
console.log(isWordFound);                   // Output: true

replace(): replace is used to replace all occurrences of a particular substring in a string with a new substring or character.

The syntax for replace looks like this

string.replace(oldsubstring, newsubstring)

For example,

let hobby = 'I love writing'
console.log(hobby.replace('writing', 'singing')) 

// output: I love singing

indexOf(): Takes a substring, and if the substring exists in a string, it returns the first position of the substring; if it does not exist, it returns -1.

Let’s consider the code below.

let string = 'Technical is fun'
console.log(string.indexOf('T'))               // 0
console.log(string.indexOf('fun'))            // 13
console.log(string.indexOf('Fun'))           // -1
console.log(string.indexOf('i'))            // 5
console.log(string.indexOf('Technical'))   // 0
console.log(string.indexOf('Is'))         //-1
console.log(string.indexOf('e'))         // 1

Casting and Checking of Data Type

Casting

Casting refers to the process of converting a value from one data type to another. We use parseInt(), parseFloat(), Number(), +, str()

String to int
We can use various methods to convert a string number to a numeric value. As mentioned, any number inside a pair of quotes is considered a string number. We can convert string to number using the following methods:

parseInt(),
Number(),
Plus sign(+)

For example, let's consider the code below.

//using parseInt to convert from string to int
let num = '10'
let numInt = parseInt(num)
console.log(numInt)   // 10

//using Number to convert string to int
let num = '20'
let numInt = Number(num)
console.log(numInt)   // 20

//using + to convert from string to int
let num = '40'
let numInt = +(num)
console.log(numInt)   // 40

Float to int
We can convert float numbers to integers using the following methods

parseInt()

Let’s consider the code below.

let num = 7.82;
let numInt = parseInt(num);
console.log(numInt);            //output: 7

Checking Of Data Type In Javascript

We make use of the typeof method to check data type.

Let's consider the code below.

let firstName = 'John';      
let lastName = 'Doe';        
let country = 'Nigeria';       
let city = 'Lagos';          
let age = 25;                 
let job;                         
console.log(typeof 'lastName')  // string
console.log(typeof firstName)   // string
console.log(typeof country)     // string
console.log(typeof city)        // string
console.log(typeof age)          // number
console.log(typeof 3.14)        // number
console.log(typeof true)        // boolean
console.log(typeof false)       // boolean
console.log(typeof NaN)         // number
console.log(typeof job)         // undefined

Conclusion

In conclusion, understanding JavaScript data types is essential for web development. By knowing the different types of data used in JavaScript, developers can write more efficient and effective code.

Do not hesitate to ask questions or leave comments on this post. I'm available on Twitter, LinkedIn, and GitHub. Keep an eye out for my upcoming blog post, in which I'll go over another important area of web development. As a developer, I'm glad to provide additional information. Until then, happy coding, and take care!

Git cheat sheet (Part 1)

Adeola Ajiboso — Thu, 17 Nov 2022 10:49:05 +0000

Have you ever been stucked while using git🤔? If your answer is yes, This article is for you. You dont need to memorize all of git command. Here is a cheat sheet that will simply your life.

What is Git?

Git is a free, open-source version control software. It was created by Linus Torvalds in 2005.
Therefore, Git is essentially a content tracker. Git can therefore be used to store content; however, due to its other features, it is primarily used to store code.

GIT CHEAT SHEET

Initialze a local repository:

git init <directory>

Set configuration value for your usernmae and email:

git config --global user.name <your name>

git config --global user.email <your email>

Clone a repository:

git clone <repository-url>

Add a file to the staging area:

git add <file>

Add all files changes to the staging area:

git add .

Check the unstaged changes:

git diff

Commit the staged changes:

git commit -m "Your Message"

Add changes made to track files and commit:

git commit -a -m "Your Message"

Reset staging area from last commit:

git reset <file>

Check the status of the working directory:

git status

Remove a file from the index and working directory

git rm <file>

List the commit history:

git log

To display branches:

git branch

To create a branch:

git branch <branch name>

To switch to a branch:

git checkout <branch name>

To delete a branch:

git branch -d <branch name>

To merge a branch:

git merge <branch name>

Pull changes from a remote repository:

git pull <remote name>

Push changes to a remote repository:

git push  <remote name>

Conclusion

Git is used for source code management. It is a free and open-source version control system used to handle small to very large projects efficiently. Git is used to tracking changes in the source code, enabling multiple developers to work together on non-linear development.

I hope you found this article helpful in understanding Git command. Follow me here on Dev or Twitter for more updates 😊

DEV Community: Adeola Ajiboso

A Guide to Application Programming Interfaces(APIs)

What is an API?

How do APIs work?

What is API Call

Request Method

What is an API Key?

Types of APIs

How to use an API

What are APIs used for?

Wrapping Up

What is Asynchronous JavaScript?

​​What is Asynchronous JavaScript

What is involved in Asynchronous JavaScript?

Web Browser Features (Web API)

Callback queue

Event Loop

What is Callback?

Promise

Creating Promises

Handling a Promise

Chaining Promises

Async/Await

Conclusion

Resources

Let's Build A Weather Application With JavaScript

What We Will Build

Prerequisites

The back story for the project

Key Functionality Of The App

Setup

Step 1

Step 2

Markup of the App

Step 3 - Style the Index file

Result

Conclusion

A beginner's guide to Objects in JavaScript

Introduction

What are Objects in JavaScript?

Accessing Objects Properties

Objects Method

Getters and Setters

Object.entries

Object.keys

Object.values

Object-Oriented Programming(OOP) In JavaScript

Constructor

Prototype

Classes

Inheritance

Conclusion

Resources

Understanding JavaScript Data Types In Web Development

What Are Data Types?

Primitive data types in JavaScript

Non-Primitive Data types in JavaScript

String Concatenation

Template Literals

String Methods

Casting and Checking of Data Type

Casting

Checking Of Data Type In Javascript

Conclusion

Git cheat sheet (Part 1)

What is Git?

GIT CHEAT SHEET

Conclusion

What is Asynchronous JavaScript