Franklin Okolie - freeCodeCamp.org

How to Use the Ternary Operator in JavaScript – Explained with Examples

Franklin Okolie — Tue, 27 Feb 2024 13:04:50 +0000

Tired of bulky if-else statements? JavaScript's ternary operator offers a powerful solution. This handy tool lets you condense complex conditional logic into a single line, making your code cleaner, more elegant, and efficient.

In this article, we'll take a deep dive into the ternary operator, understanding its syntax and showcasing real-world examples to help you understand how it works to harness its full potential.

Here is What We'll Cover:

What is A Ternary Operator?
How to Use the Ternary Operator
How to Refactor if-else Statements to Ternary operator
How to Chain Ternary Operators
Best Practices when using the Ternary Operator
Conclusion

What is A Ternary Operator?

A ternary operator is a conditional operator in JavaScript that evaluates a conditional expression and returns either a truthy or falsy value.

To understand how this works, let's take a closer look at its syntax below:

conditionalExpression ? truthyValue : falsyValue

From the syntax above, the condionalExpression is the expression that serves as the evaluation point, determining either a truthy or falsy value.

Following the ? (question mark), the value provided is returned in case the expression evaluates to truthy, whereas the value following the : (colon) is returned if the expression results in a falsy outcome.

The truthyValue and falsyValue can be anything in JavaScript. It can encompass various entities such as functions, values stored in variables, objects, numbers, strings, and more. The ternary operator grants you the flexibility to return any desired value, offering versatility in your code.

How to Use the Ternary Operator

Now that we've examined the syntax and its functionality, let's explore how to use the ternary operator to deepen our understanding.

Consider this scenario: we're building a gaming platform that only allows users that are aged 18 and above. We'll design a function to check a user's age. If they're under 18, they'll be denied access; otherwise, they'll gain entry to the platform.

function canAccessPlatform(age) {
  const shouldAccess = age >= 18 ? true : false;

  return shouldAccess;
}

From the code snippet above, we created a function, canAccessPlatform, which evaluates whether a user, represented by their age parameter, meets the requirement to access the platform.

It utilizes a ternary operator to determine if the age is 18 or older, assigning true to shouldAccess if the condition is met, and false otherwise. Finally, it returns the value of shouldAccess, indicating whether the user can access the platform or not.

If the age is 18 or older, the expression becomes true, so the operator returns true after the ?. Otherwise, it returns false. This result is saved in a variable and then returned from the function.

While this basic use case simplifies code and improves readability by replacing unnecessary if-else blocks, it's important to use it sparingly to avoid cluttering and complicating your code. Later, we'll discuss best practices for using the ternary operator.

Here's another example illustrating the use of the ternary operator. We'll create a function to determine whether a number is even or odd. Check out the code snippet below:

function checkEvenOrOdd(number) {
  const result = number % 2 === 0 ? "even" : "odd";
  return result;
}

// Usage:
console.log(checkEvenOrOdd(4)); // Output: "even"
console.log(checkEvenOrOdd(7)); // Output: "odd"

From the code snippet above:

We define a function checkEvenOrOdd that takes a number parameter.
Inside the function, we use the ternary operator to check if the number is even or odd.
If the number modulo 2 equals 0 (meaning it's divisible by 2 with no remainder), then the condition evaluates to true, and the string "even" is assigned to the result variable.
If the condition evaluates to false (meaning the number is odd), the string "odd" is assigned to result.
Finally, the function returns the value of result, which indicates whether the number is even or odd.

This code shows how the ternary operator quickly checks if a number is even or odd, making the code easier to read and understand.

How to Refactor if-else Statements to Ternary Operator

An advantage of the ternary operator is avoiding unnecessary if-else blocks, which can complicate code readability and maintenance. In this section, we'll refactor some if-else statements into ternary operations, providing a clearer understanding of how to use ternary operators effectively.

Let's start with our first example:

function decideActivity(weather) {
  let activity;

  if (weather === "sunny") {
    activity = "go out";
  } else {
    activity = "stay in";
  }

  console.log(activity);
}

// Usage
console.log(decideActivity("raining")); // Output: "stay in"
console.log(decideActivity("snowing")); // Output: "stay in"
console.log(decideActivity("sunny")); // Output: "go out"

This function, decideActivity, takes a weather parameter and determines the appropriate activity based on the weather condition.

If the weather is "sunny", it suggests to "go out". Otherwise, it advises to "stay in". When we call the function with different weather conditions like "raining" or "snowing", it outputs the corresponding activity recommendation using console.log().

For instance, calling decideActivity("raining") will output "stay in". Similarly, decideActivity("snowing") also outputs "stay in". When decideActivity("sunny") is called, it outputs "go out". This straightforward function helps decide on activities based on the weather condition provided.

Now, we can refactor these blocks of code to make them look simpler and neater. Let's see how to do that below:

function decideActivity(weather){
   const activity = weather === "sunny" ? "go out" ? "stay in";

   console.log(activity)

}

// Usage
console.log(decideActivity("raining")); // Output: "stay in"
console.log(decideActivity("snowing")); // Output: "stay in"
console.log(decideActivity("sunny")); // Output: "go out"

From the code sample above, this function, decideActivity, uses the ternary operator to quickly determine the activity based on the weather condition. It checks if the weather is "sunny" and assigns "go out" if true, otherwise "stay in".

We've simplified the if-else statements into a one-liner ternary operator. This makes our code cleaner, clearer, and easier to read.

Let take a look at another example:

function checkNumber(number) {
  let result;
  if (number > 0) {
    result = "positive";
  } else {
    result = "non-positive";
  }
  return result;
}

// Usage
console.log(checkNumber(5)); // Output: "positive"
console.log(checkNumber(-2)); // Output: "non-positive"

Let's explain what the code above is doing:

Function Definition: We begin by defining a function named checkNumber that takes a single parameter called number.
Variable Declaration: Inside the function, we declare a variable named result without assigning any value to it yet. This variable will store the result of our check.
Conditional Statement (if-else): We have a conditional statement that checks whether the number parameter is greater than 0.
If the condition is true (meaning the number is positive), we assign the string "positive" to the result variable.
If the condition is false (meaning the number is not positive, (meaning it is either negative or zero), we assign the string "non-positive" to the result variable.
Return Statement: Finally, we return the value stored in the result variable.
Function Calls:We then call the checkNumber function twice with different arguments: 5 and -2.

When we call checkNumber(5), the function returns "positive", which is then logged to the console.

Similarly, when we call checkNumber(-2), the function returns "non-positive", which is again logged to the console.

This function efficiently determines whether a number is positive or non-positive and provides the appropriate result based on the condition.

Let's simplify and improve the code by rewriting it using a ternary operator.

function checkNumber(number) {
  const result = number > 0 ? "positive" : "non-positive";
  return result;
}

// Usage
console.log(checkNumber(5)); // Output: "positive"
console.log(checkNumber(-2)); // Output: "non-positive"

Great job! By refactoring the function and utilizing the ternary operator for conditional evaluation, we've achieved cleaner, more concise, and readable code.

This code, using the ternary operator, feels more concise and elegant. It efficiently determines if a number is positive or non-positive, making the code cleaner and easier to understand. When we call checkNumber(5), it returns "positive", while checkNumber(-2) returns "non-positive". Overall, the ternary operator enhances the code's readability.

How to Chain Ternary Operators

When dealing with conditional checks, sometimes a single condition isn't enough. In such cases, we use 'else-if' statements alongside 'if/else' to incorporate multiple conditions.

Let's take a look at the syntax:

function exampleFn() {
  return conditionalExpression1
    ? value1
    : conditionalExpression2
    ? value2
    : conditionalExpression3
    ? value3
    : value4;
}

This can be translated into an if/else chain:

function exampleFn() {
  if (conditionalExpression1) {
    return value1;
  } else if (conditionalExpression2) {
    return value2;
  } else if (conditionalExpression3) {
    return value3;
  } else {
    return value4;
  }
}

Let's explore an example below:

function checkNumber(number) {
  let message;

  if (number > 0) {
    message = "Positive";
  } else if (number === 0) {
    message = "Zero";
  } else {
    message = "Negative";
  }

  return message;
}

// Usage
console.log(checkNumber(5)); // Output: "Positive"
console.log(checkNumber(0)); // Output: "Zero"
console.log(checkNumber(-3)); // Output: "Negative"

This code above defines a function called checkNumber that takes a number parameter and determines its status (positive, zero, or negative). It utilizes an if-else block with one else-if statement to evaluate the number's value. If the number is greater than 0, it's considered positive and if it's equal to 0, it's zero. Otherwise, it's negative. The function returns the result.

Let's refactor this code using a ternary operator to achieve the same functionality.

function checkNumber(number) {
  return number > 0 ? "Positive" : number === 0 ? "Zero" : "Negative";
}

// Usage
console.log(checkNumber(5)); // Output: "Positive"
console.log(checkNumber(0)); // Output: "Zero"
console.log(checkNumber(-3)); // Output: "Negative"

That's it! We've refactored the function, and upon closer examination, we can observe that the operators are chained together. Now, let's explore how the chained ternary operator works in the checkNumber function.

In the first ternary operator:

The first part number > 0 checks if the number is greater than 0.
If it's true, the expression returns "Positive".

In the second ternary operator (chained):

If the first condition is false (meaning the number is not greater than 0), it moves to the next part of the expression: number === 0.
This part checks if the number is equal to 0.
If it's true, the expression returns "Zero".

And the default value:

If neither of the above conditions is true (meaning the number is not greater than 0 and not equal to 0), it defaults to the last part of the expression: "Negative".
This part acts as the default value if none of the preceding conditions are met.

In summary, the chained ternary operator evaluates multiple conditions in a single line of code. It checks each condition sequentially, and the first condition that evaluates to true determines the result of the entire expression. This allows for concise and efficient conditional logic.

Let's examine another example of a chained ternary operator.

function getDrink(age) {
  return age >= 21
    ? "Enjoy a cocktail"
    : age >= 18
    ? "Have a beer"
    : age >= 16
    ? "Grab a soft drink"
    : "Sorry, you're too young to drink";
}

// Usage
console.log(getDrink(25)); // Output: "Enjoy a cocktail"
console.log(getDrink(19)); // Output: "Have a beer"
console.log(getDrink(16)); // Output: "Grab a soft drink"
console.log(getDrink(10)); // Output: "Sorry, you're too young to drink"

In the given code sample, the ternary operators are chained together to provide different drink suggestions based on the age provided. Each conditional expression in the chain evaluates a specific age range.

If the first condition is true (truthy), it returns 'Enjoy a cocktail'. If false (falsy), it moves to the next conditional expression, and so on. This chaining process continues until a condition evaluates to true. If none of the conditions in the chain are true, the last value is returned as a fallback, similar to the 'else' block in an if/else statement.

The concept of 'chaining' ternary operators involves linking conditional expressions based on the value of the previous expression. This can be compared to the else if structure in an if/else statement, providing a concise way to handle multiple conditions in JavaScript.

Best Practices when Using the Ternary Operator

Using the ternary operator efficiently can significantly enhance code readability and conciseness. In this section, we'll explore key best practices for utilizing the ternary operator effectively.

Keep it simple and readable: Write concise expressions that are easy to understand at a glance. Avoid nesting too many ternary operators or writing overly complex conditions.
Use for simple assignments: Ternary operators are ideal for simple assignments where there are only two possible outcomes based on a condition. For more complex scenarios, consider using if/else statements.
Know when to use it: Use the ternary operator when you need to perform a simple conditional check and assign a value based on the result. It's particularly useful for assigning default values or determining the value of a variable based on a condition.
Test thoroughly: Test your code thoroughly to ensure that the ternary operator behaves as expected under different conditions. Check for edge cases and validate the correctness of the assigned values.
Avoid nested ternaries: While chaining ternaries is possible, excessive nesting can lead to code that is difficult to read. Prefer clarity and consider using if/else for complex conditions.
Keep ternaries short: Aim to keep ternary expressions short and concise. Long ternaries can be difficult to read and understand, leading to code maintenance challenges.

These best practices outline guidelines for effectively utilizing the ternary operator. While they are not strict rules, they offer valuable insights to enhance the clarity and readability of your code.

Conclusion

As we conclude this article, you've gained a comprehensive understanding of the ternary operator—its application in daily coding tasks, converting if/else statements, chaining operators, and best practices. I'm confident that you've acquired valuable insights that will enhance your coding practices using the ternary operator.

Thank you for reading, and see you next time!

Contact information

Would you like to get in touch with me? Don't hesitate to reach out through any of the following channels:

Twitter / X: @developeraspire
Email: developeraspire5@gmail.com

How to Build a Custom HTML5 Video Player Using TailwindCSS and JavaScript

Franklin Okolie — Tue, 13 Feb 2024 15:14:21 +0000

HTML5 comes equipped with a native video player. It's shipped with a simple user interface, functionality, and some basic controls in the browser. And while the functionality of the default video player via the browser works perfectly, the user interface isn't so beautiful and fancy, and it's just not generally aesthetically pleasing.

For this reason, most modern web applications and platforms like Udemy, Netflix, YouTube, and Amazon Prime don't ship the default built-in HTML5 video player to their users. Instead, they build their own customized versions with a sleek user interface to make their platforms more attractive and user-friendly.

If you have ever been curious how these companies and web platforms are able to pull off such feat, then this article is for you.

You'll get some hands-on experience while following along with a step-by-step guide that teaches you how you can build and customize your own HTML5 video player. You'll learn how to customize the user interface, extend the functionality, and build your own fantastic custom controls and features.

You'll also learn how to build all this using nothing other than the native Video API provided by JavaScript in the browser – no external libraries or tools required.

Prerequisites

Fundamental knowledge of HTML5 and CSS
Fundamental knowledge of Tailwind CSS
Fundamental knowledge of JavaScript (ES6)
A code editor of your choice
A browser that supports modern features of JavaScript (for example Chrome or Mozilla Firefox)

Here's what we'll cover:

Getting Started
How to Set Up the Development Environment
How to Build a Customized UI using Tailwind CSS
How to Implement the Play and Pause Functionality
How to Implement the Rewind and Fast Forward Functionality
How to Implement the Mute and Unmute Functionality
How to Update the Progress Bar Relative to the Video Time
How to Implement the Seeking Functionality
How to Implement Keyboard Navigations for Accessibility
Where to Go from Here
Conclusion

Getting Started

In this article, we will be using Tailwind CSS as the styling tool to build out the custom video player UI. We'll also use JavaScript to build out the functionality of the controls.

Note that using Tailwind CSS is optional, as any styling tool will suffice here like SCSS, CSS, styled-components and so on – it's totally up to you.

I've split this tutorial into different sections, each addressing a specific aspect of the custom video player functionality. Each new section will build upon the previous ones to complete the player. By the end of the article, you will have a fully functional HTML5 custom video player.

In this tutorial, we'll concentrate on specific features of the video player. These features will offer opportunities and ideas for building additional functionalities. The features we'll cover are:

Play and Pause
Rewind and Fast Forward
Mute and Unmute
Video Seeking
Keyboard navigations (utilizing the Spacebar for play and pause, and the Arrow keys for rewind and fast forward).

We won't address responsive design here, as we won't be focusing on making the video player mobile responsive. This omission should present a challenge and a learning opportunity for you.

Now, let's delve into setting up our development environment so we can start building.

How to Set Up the Development Environment

The initial step is to setup an efficient development environment to ensure smooth workflow. We'll use Vite for this purpose.

Before progressing to the next part of this section, make sure that you have NodeJS and NPM or Yarn installed on your computer, as they are necessary for installing tools and setting up your development environment seamlessly.

How to setup the project with Vite

To scaffold a project in Vite, open your terminal and type in the following command:

yarn create vite

Vite will guide you in configuring and selecting the appropriate tools for your development environment.

The first step is to choose a project name – you have the freedom to choose any name you prefer. In this article, I'll be using "html5-video-player" as the project name.

Terminal output after running 'yarn create vite' command

The next step is selecting the project framework. This project will be written in pure JavaScript, so choose "Vanilla" and then select "JavaScript" on the next prompt.

Terminal output after inputting a project name, asking to select a framework for the project

Terminal output afte selecting the 'Vanilla' framwork

Now, Vite has successfully set up your environment using the selected tools. It's time to install the dependencies necessary for Vite to function properly. Follow the instructions provided by Vite in the CLI.

Terminal showing a success message on setting up the environment

If you named your project like mine, then run the command below exactly as it is. If you chose a different name, simply substitute my project name with yours and proceed in the same manner.

cd html5-video-player

This command will navigate to the project directory where your development environment resides. From there, you can proceed to install the dependencies.

yarn

Once the dependencies are installed, let's proceed to the next step, which involves setting up Tailwind CSS as our styling tool. This process is straightforward, similar to how we set up Vite.

Open your terminal and execute the following commands:

yarn add -D tailwindcss postcss autoprefixer

This will install Tailwind CSS, our styling tool, as well as PostCSS and Autoprefixer. These tools will assist Tailwind CSS in functioning effectively within your project.

The next command involves setting up the configuration files for Tailwind CSS and PostCSS.

Open your local terminal once again and type in the following command:

npx tailwindcss init

Creating Tailwind CSS configuration file.

As mentioned in the command message, a file named tailwind.config.js will be generated at the root of the project folder. This file will contain your configuration for styling, including settings for fonts, colors, plugins, and more. For further details, refer to the TailwindCSS documentation.

Open the Tailwind CSS configuration file that was generated in your code editor and make the following edits to it:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Here, we simply edited the content key to specify the file where TailwindCSS should read for Tailwind CSS classes. This file happens to be the index.html file, where our main work will take place.

Next, you'll need to configure PostCSS, which doesn't have an automated setup command like TailwindCSS. So you'll create the configuration file manually. Navigate to the project's root folder and create a file named postcss.config.js.

After creating the postcss.config.js file, simply copy and paste the provided code snippet into the file.

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Next, configure your style.css file to utilize Tailwind CSS defaults. This saves you from the tedious task of setting up CSS defaults manually.

Open the style.css file in your code editor, delete its contents, and then paste the following code snippet into the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Delete unneccasary files and code

The files generated by Vite primarily serve as guides for adding your own files and using the bundler effectively. So you can delete most of them since they are unnecessary for this project.

Below are the files to be removed from the project:

counter.js
javascript.svg

Once you've done that, you can move on to the next step in this section, which involves removing unnecessary code.

Open the main.js file located at the root of the project, and delete all the code within it.

Then, navigate to the index.html file and delete all of its current content. Afterwards, copy and paste the below code snippet into the file:

html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>HTML5 Custom Video Playertitle>
  head>
  <body>
    <h1 class="text-3xl font-bold underline text-red-800">Hello world!h1>
    <script type="module" src="/main.js">script>
  body>
html>

And with that, you're finished with this part! Your development environment is now set up, ready for you to begin building your custom HTML5 video player

To confirm that your environment is set up properly, check the following:

The project files and folders should resemble the following structure:

Project setup completed: Visual Studio Code displaying project structure.

Open your terminal and run the following command:

yarn dev

This will create a development server where your webpage will be hosted. Open the URL provided by Vite.

Launching Vite development server with 'yarn dev' command.

Upon opening the link http://localhost:5173/, you should see this:

The initial user interface displayed after executing 'yarn dev' command.

Congratulations! You have successfully completed this section on setting up your development environment, which will let us work effectively as we build our custom HTML5 video player.

Troubleshooting: If you find that your setup isn't working as expected, don't worry. Simply delete the project folder and repeat the process. You may have missed a step or some tools might not have installed correctly. Also, double-check your Tailwind CSS and PostCSS configuration files to ensure they contain the correct code as shown above.

How to Build a Customized UI using Tailwind CSS

This section covers all the styling required to construct the UI of the custom HTML5 video player. We'll take a step-by-step walkthrough of the process.

First, copy and paste the following link tag into the head of your HTML, above the link to the stylesheet:

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

This allows us to use Materialize CSS icons, which are essential for styling our buttons in the UI.

Next, let's focus on styling the video element in our markup. Simply replace the body element with the provided code snippet below:

<body class="bg-indigo-950 p-10">
  <div
    id="container"
    class="w-4/5 h-4/5 mx-auto rounded-lg overflow-hidden relative group"
  >
    
    <figure>
      <video class="w-full">
        <source src="/your-video.mp4" />
      video>
    figure>
  div>
  <script type="module" src="/main.js">script>
body>

The provided code snippet includes the markup and styling for the video element, as well as an outer div acting as a container for the entire video player UI. The video element is nested within a figure element.

For the source element, specify the path to the video you wish to play. You can find videos online, download them, and add them to the "public" directory within the project folder. Then, link the src attribute of the source element to the video file. You can find free downloadable videos here.

Next, let's style the controls using the Materialize CSS Icons you linked in your HTML. Place the following code snippet below the figure element inside the body element.


<div
  id="controls"
  class="opacity-0 p-5 absolute bottom-0 left-0 w-full transition-opacity duration-300 ease-linear group-hover:opacity-100"
>
  
  <div id="progress-bar" class="h-1 w-full bg-white cursor-pointer mb-4">
    <div
      id="progress-indicator"
      class="h-full w-9 bg-indigo-800 transition-all duration-500 ease-in-out"
    >div>
  div>
  <div class="flex items-center justify-between">
    <div class="flex items-center justify-between">
      
      <button
        id="rewind"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl w-12">replay_10 i>
      button>

      
      <button
        id="play-pause"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-5xl inline-block w-12"
          >play_arrowi
        >
      button>

      
      <button
        id="fast-forward"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl w-12">forward_10 i>
      button>
    div>

    <div>
      
      <button
        id="volume"
        class="transition-all duration-100 ease-linear hover:scale-125"
      >
        <i class="material-icons text-white text-3xl">volume_upi>
      button>
    div>
  div>
div>

This code segment defines the layout and behavior of the controls for a video player. It begins by setting up a container div (

) that holds all the control elements. The container is initially invisible (opacity-0) and becomes visible with a smooth transition (transition-opacity duration-300 ease-linear) when the user hovers over it (group-hover:opacity-100).

Within the container, there's a progress bar (

) for tracking the video's progress. It consists of a white background bar (bg-white) with a movable indicator (

) colored in indigo (bg-indigo-800). The progress bar is responsive and allows users to seek to different parts of the video.

Below the progress bar are control buttons for various functions. The rewind, play/pause, and fast forward buttons are grouped together within a flex container (

). Each button (

How to Use Callbacks and Higher Order Functions in JavaScript

Franklin Okolie — Fri, 12 Jan 2024 18:07:08 +0000

The way functions are treated and used in JavaScript is quite interesting. They are very flexible – we can assign functions as a value to a variable, return them as a value from another function, and pass them as an argument to another function. We can do all this because JavaScript treats functions as first class citizens.

In this article, I'll go over what higher order functions and callbacks are, and how they work in JavaScript.

Functions as First Class Citizens in JavaScript

Functions are defined as first class citizens or first class objects in JavaScript because functions are treated like variables.

This means that functions in JavaScript can be:

Passed as an argument to a another function.

Assigned as a value to a variable.

Returned as a value from a function.

It is essential to understand how functions are treated in JavaScript, as they serve as a building block to understanding higher order and callback functions in JavaScript and how they work.

What are Higher Order Functions?

Higher order functions are functions that take functions as arguments and also return a function as a value.

There are a lot of built-in higher order functions provided in JavaScript. We'll take a look at some and take advantage of how functions are treated as first class citizens. We'll also create our own higher order functions.

First, let's take a look at some examples of built-in higher order functions.

Array Methods

Array methods are usually the first introduction of higher order functions a developer will have when learning JavaScript. These include, but are not limited to, the map, filter, forEach, find, findIndex, some, and every array methods provided by JavaScript.

These array methods or functions have a lot in common, but one of the most common feature is that they all accept a function as an argument. Below is a code snippet that demonstrates how the forEach array method works:

const people = [ { firstName: "Jack", year: 1988 }, { name: "Kait", year: 1986 }, { name: "Irv", year: 1970 }, { name: "Lux", year: 2015 }, ]; people.forEach(function (person) { console.log(person); }); // Output: Logs every person object in the array

From the code sample above, we can see that the forEach method accepts a function as an argument which it calls on every iteration on the array. Therefore the forEach array method is a higher order function.

Timer Events

Another set of commonly used built-in higher order functions are the setInterval and setTimeout functions, known as timer events in JavaScript.

Each function accepts a function as one of its arguments and uses it to create a timed event.

Take a look at the code sample below to see how setTimeout works:

setTimeout(function () { console.log("This is a higher order function"); }, 1000); // Output: "This is a higher order function" after 1000ms / 1 second

The code snippet above is the most basic example of how a setTimeout function works. It accepts a function and a time duration in milliseconds and executes the function after the provided duration has passed.

From the example above, This is a higher order function is printed to the console after 1000 ms, or one second.

setInterval(function () { console.log("This is a higher order function"); }, 1000); // Output: "This is a higher order function" after every 1000ms / 1 second

The setInterval function is similar to the setTimeout function, just like the array methods – although it functions differently. But we can see a common pattern: it also accepts a function as one of its parameters.

Unlike setTimeout (that executes the function after the provided duration has passed), setInterval executes the function over and over again every 1000ms or 1 second.

How to Create and Use a Higher Order Function

Higher order functions are not limited to the built-in ones provided by JavaScript.

Since functions in JavaScript are treated as first class objects, we can take advantage of this behavior and build highly performant and reusable functions.

In the examples below, we'll build a couple of functions. They'll accept the name of a customer and a greeting, and then print that info to the console.

First, here is a simple function that does both of those things:

function greetCustomer(firstName, lastName, salutation) { const fullName = `${firstName} ${lastName}`; console.log(`${salutation} ${fullName}`); } greetCustomer("Franklin", "Okolie", "Good Day"); // Output: "Good Day Franklin Okolie"

greetCustomer accepts 3 arguments: a first name, a last name, and a salutation. Then it prints a greeting to the customer to the console.

But there is a problem with this function – it's doing two things: composing the full name of the customer and also printing the greeting.

This is not a best practice, as functions should do only one thing and do it well. So we are going to refactor our code.

Another function should compose the customer's name so that the greetCustomer function only has to print the greeting to the console. So let's write a function that handles that:

function composeName(firstName, lastName) { const fullName = `${firstName} ${lastName}`; return fullName; }

Now that we have a function that combines the customer's first and last names, we can use that function in greetCustomer:

function greetCustomer(composerFunc, firstName, lastName, salutation) { const fullName = composerFunc(firstName, lastName); console.log(`${salutation} ${fullName}`); } greetCustomer(composeName, "Franklin", "Okolie", "Good Day"); // Output: "Good Day Franklin Okolie"

Now this looks cleaner, and each function does just one thing. The greetCustomer function now accept 4 arguments, and since one of those arguments is a function, it's now a higher order function.

You might have wondered earlier, how is a function being invoked inside of another function, and why?

Now we'll take a deep dive into function invocation and answer both of those questions.

Returning a Function as a Value

Remember that higher order functions either take a function as a parameter and/or return a function as a value.

Let's refactor the greetCustomer function to use fewer arguments and return a function:

function getGreetingsDetails(composerFunc, salutation) { return function greetCustomer(firstName, lastName) { const fullName = composerFunc(firstName, lastName); console.log(`${salutation} ${fullName}`); };

The last version of greetCustomer accepted too many arguments. Four arguments isn't a lot, but it would still be frustrating if you messed up the order of the arguments. Generally, the fewer arguments you have, the better.

So in the example above, we have a function called getGreetingDetails which accepts composerFunc and salutation on behalf of the inner greetCustomer function. It then returns the inner greetCustomer function, which itself accepts firstName and lastName as arguments.

By doing this, greetCustomer has fewer arguments overall.

And with that, let's take a look at how to use the getGreetingDetails function:

const greet = getGreetingsDetails(composeName, "Happy New Year!"); greet("Quincy", "Larson"); // Output: "Happy New Year Quincy Larson"

Now take a step back and admire this beautiful abstraction. Marvelous! We have used the magic of higher order functions to simplify the greetCustomer function.

Let's walk through how everything works. The higher order function named getGreetingDetails takes in two arguments: a function to compose the customer's first and last name, and a salutation. Then it returns a function named greetCustomer which accepts the first and last name of a customer as arguments.

The returned greetCustomer function also uses the argument accepted by getGreetingDetails to execute some actions, too.

At this point you're probably wondering, how can a returned function use arguments provided to a parent function? Especially given how the function execution context works. It's possible because of closures. Let's learn more about them now.

Closures Explained

A closure is a function that has access to the variable in the scope where it was created even after the scope doesn't exist anymore in the execution context. This is one of the underlying mechanism of callbacks, as callbacks can still reference and use variables created in an outer function after that outer function has been closed.

Let's take a quick example:

function getTwoNumbers(num1, num2) { return function add() { const total = num1 + num2; console.log(total); }; } const addNumbers = getTwoNumbers(5, 2); addNumbers(); //Output: 7;

The code in this example defines a function called getTwoNumbers and shows you how closures work. Let's explore it in more detail:

getTwoNumbers is defined as a function that takes two parameters, num1 and num2.

Inside getTwoNumbers, it returns another function, which is an inner function named add.

The add function, when invoked, calculates the sum of num1 and num2 and logs the result to the console.

Outside the getTwoNumbers function, we create a variable called addNumbers and assign it the result of invoking getTwoNumbers(5, 2). This effectively sets up a closure where addNumbers now "remembers" the values 5 and 2 as num1 and num2.

Finally, we call addNumbers() to execute the inner add function. Since addNumbers is a closure, it still has access to the num1 and num2 values, which were set to 5 and 2, respectively. It calculates their sum and logs 7 to the console.

If you want to learn more about closures, read more here.

Back to our higher order function. The returned function greetCustomer gets returned as a value which we store in a variable named greet.

Doing that makes the greet variable itself a function, meaning we can invoke it as a function and pass in arguments for a first and last name.

And violà There you have it. These concepts can be a bit complex to grasp at first, but once you get the hang of them, they never leave you.

I encourage you to read through the previous sections again, play with the code in your editor, and to get the hang of how everything works together.

Now that you have an in-depth understanding about how higher order functions work, let's talk about callback functions.

What are Callback Functions?

A callback function is a function that is passed into another function as an argument.

Again, one of the defining factors of functions as first class citizens is its ability to be passed as an argument to another function. This is called the act of passing callbacks.

Let go back and take a look at the timing events we discussed earlier when we were learning about the built-in functions provided in JavaScript. Here's the setTimeout function again:

setTimeout(function () { console.log("This is a higher order function"); }, 1000); // Output: "This is a higher order function" after 1000ms / 1 seconds

We've established that the setTimeout function is a higher order function because it accepts another function as an argument.

The function that's passed as an argument to the setTimeout function is called a callback function. This is because it is invoked or executed inside of the higher order function it's passed into.

To get a better understanding of callback functions, let's take another look at the greetCustomer function from earlier:

// THIS IS A CALLBACK FUNCTION // IT IS PASSED AS AN ARGUMENT TO A FUNCTION function composeName(firstName, lastName) { const fullName = `${firstName} ${lastName}`; return fullName; } // THIS IS A HIGHER ORDER FUNCTION // IT ACCPEPTS A FUNCTION AS A ARGUMENT function greetCustomer(composerFunc, firstName, lastName, salutation) { const fullName = composerFunc(firstName, lastName); console.log(`${salutation} ${fullName}`); } greetCustomer(composeName, "Franklin", "Okolie", "Good Day"); // Output: "Good Day Franklin Okolie"

The composeName is a callback function that is passed as an argument into the greetCustomer function a higher order function and it is executed inside this function.

The Difference Between Higher Order Functions and Callback Functions

It's important that we understand the difference between these two terms so we can communicate more clearly with teammates and during technical interviews:

Higher Order Function: A function that accepts a function as an argument and/or returns a function as its value.

Callback Function: A function that's passed as a argument to another function.

A Bag and Book

To further understand these terms, I'll share a simple analogy.

Imagine you have a bag and a book. You carry the book in your bag while attending a meeting, going to class, going to church, and so on.

In this scenario, the bag accepts your book to carry it, and also returns it when you want to use it. So the bag is like a higher order function.

The book is kept inside of the bag until it's ready to be used, so it's like a callback function.

Fuel and Fuel Tank

Let's take a look at another analogy; fuel and a fuel tank.

To fuel a car, we have to pour the fuel through the fuel tank, the fuel tank recieves the fuel – just like a higher order function.

The fuel is poured into the fuel tank – like a callback function.

I hope these analogies help to further simplify higher order and callback functions and the difference between them.

Conclusion

As you can see, functions in JavaScript are very flexible, and can be used in a lot of helpful ways. This flexibility also lead to two common technical terms in JavaScript, higher order functions and callback functions.

If you want to learn more about these topics, check out the MDN documentation on functions as first class citizens, higher order functions, and callback functions.

I hope you learned a lot from this article, and I hope you use your newfound knowledge to communicate your thoughts more clearly during pair coding sessions or during technical interviews.

For more JavaScripts tips, follow me on Twitter.

Thanks for reading! See you next time.

JavaScript Operators and Operator Precedence – Beginner's Guide

Franklin Okolie — Mon, 20 Mar 2023 21:15:49 +0000

A few months ago, I attempted to solve a math problem in my head before writing it in JavaScript. It was then that I received the most stunning revelation of my career, which was both shocking and eye-opening.

So what did I attempt to do? I made the following mental arithmetic calculations:

2 + 3 * 4

Naturally, my response was 20, so I proceeded to code it. But when the output on the console revealed the answer to be 14, it completely altered how I thought about JavaScript.

But how did I perform arithmetic operations before JavaScript? Well, I just entered the relevant numbers into a calculator and waited for my results. Easy!

How inaccurate my mental model was about how mathematical operations are carried out in JavaScript was made clear by mentally performing the calculations.

As a JavaScript developer, you may have encountered this type of "error" when doing mathematics in your head versus how JavaScript or your calculator does it. It's not magic, but rather a simple concept known as Operator Precedence.

In this article, we'll go over what operators are and how operators in JavaScript are parsed. This will help you not only with JavaScript but also with other programming languages if you choose to learn them.

What are Operators?

Operators are special symbols used to perform operations on operands, which can be variables or values. For example, in 13 / 3, the "/" division symbol serves as the operator, while "13" and "3" serve as operands.

A value or variable on which operators conduct operations is known as an operand. This is a little exercise to put yourself to the test. Examine the code snippet below and distinguish between operators and operands:

1. 2 + 5 * 3 2. (12 + 4) / 4 3. 20 ** 4 - 4 /* ANSWERS Operators from the above operations are "+", "*" , "()", "**", "/" and "-" The numbers are the operands of the operation */

Types of Operators in JavaScript

Not all operators in JavaScript perform arithmetic operations. Rather, operators vary in their functions. In this section we will look at some of the different types of operators and how they work in JavaScript.

Arithmetic Operators

An arithmetic operator is used to perform basic mathematical operations. It takes numerical values as operands, which can be variables or literals, and returns a value.

Arthmetic operators in JavaScript include:

Addition (+)

Subtraction (-)

Multiplication (*)

Exponentiation (**)

Modulus (%)

Decrement (--)

Increment (++)

Division (/)

The following code snippet contains example operations that use the arithmetic operators:

2 + 3 // ANSWER: 5. This adds the operands. 10 * 5 // ANSWER: 50. This multiplies the operands. 10 % 3 // ANSWER: 1. This returns the remainder of dividing the two operands. 10++ // ANSWER: 11. This increases the operands by 1. 100-- // ANSWER: 9. This decreases the operands by 1 10 ** 3 // ANSWER: 1000. This multiplies the operands by the power of 3 ( 10 * 10 * 10) 10 - 3 // ANSWER: 7. This substracts the operands 10 / 5 //ANSWER: 2. This divides 10 by 5

Comparison Operators

A comparison operator compares two operands and returns a Boolean (true or false) value as a result of the comparison.

The JavaScript comparison operators are as follows:

Equals (==)

Not Equal (!=)

Strict Equal (===)

Strict Not Equal (!==)

Greater than (>)

Greater than or equal (>=)

Less than (<)

Less than or equal (<=)

The code snippet below provides some examples of how the comparison operators operate:

10 == 10 // ANSWER: True. It returns true because 10 is equal to 10. 10 != 7 // ANSWER: True. It returns a Truthy value because 10 is not equal to 7. 10 == "10" //ANSWER: True. It returns true because 10 equals 10. 10 === "10" //ANSWER: False. This returns false because 10, which is of type number, is not equal to "10" which is of type string. It compares them strictly by their values and by their type. 10 !== "10" // ANSWER: True. It returns a Truthy value because 10, which is of type number, is not equal to "10", which of type string. 10 > 30 //ANSWER: False. It returns false because 10 is not greater than 30. 10 < 50 //ANSWER: True. This returns a truthy value because 10 is less than 50. 10 >= 70 //ANSWER: False. This will return a falsly value because 10 is not greater than 70, nor is it equal to 70. 10 <= 34 //ANSWER: True. This is true because 10 is less than 34 (even though it's not equal to 34 - it's "less than or equal to").

Assignment Operators

Based on the value of its right operand, an assignment operator assigns a value to its left operand. The most fundamental application is the use of the assignment operator (=) to assign a value to a variable. It essentially assigns the value of one operand to another.

The code snippet below provides some examples of how the assignment operator works:

const author = "Franklin" const platform = "Freecodecamp" const age = 78

Let's look at some further assignment operator examples:.

Assignment (=)

Addition Assignment (+=)

Subtraction Assignment (-=)

Division Assignment (/=)

Multiplication Assignment (*=)

Exponentiation Assignment (**=)

Modulus Assignment (%=)

It's important to remember that when employing assignment operators other than the "=" operator—which I like to refer to as "arthmetic assignments"—that they also carry out an arthmetic operation before assigning the value to the operand.

To see an example of it in action, look at the code below:

let people = 20; people += 20 console.log(people) // OUTPUT: 40 let cars = 30 cars -= 20 console.log(cars) //OUTPUT: 10

We can see from the code excerpt above that the arthimetic operations were first performed on the operands before they were assigned, using the appropriate arithmetic operators.

The "arithmetic assignments" basically operate as follows: JavaScript first executes the arithmetic operation, then it assigns the value of the operation to the operand (variable).

After seeing how that operates, let's learn more about the various operators and how to use them:

let result = 400; //The Assignment operator was used to assign the value 400 to the variable result. result += 20; consle.log(result) //OUTPUT: 420. The value of the left operand was added to 20 and the value assigned to the left operand. (400 + 20) result -= 20; consle.log(result) //OUTPUT: 400. The value of the right operand was subtracted from the left operand the value assigned to the left operand. (420 - 20) result *= 10 consle.log(result) //OUTPUT: 4000. The values of both operands are multiplied and the value from the operation is assigned to the left operand. result /= 10; consle.log(result) //OUTPUT: 400. The left operand is divided by 10 and the value from the operation is assigned to the left operand. result %= 21; consle.log(result) //OUTPUT: 21. The left operand is divided by 21 and the remainder from the operation is assigned to the left operand. result **= 2; consle.log(result) //OUTPUT: 440. The left operand is raised by the power of 2 and the value is assigned to the left operand.

Let's move on to the next type of operator now that we have seen how the assignment operators function and how we may use them.

Logical Operators

When used with boolean values, a logical operator produces a boolean value (true or false), otherwise it returns the value of one of the operands. Logical operators are used to check and determine the logic between two or more operands.

Although they can be difficult to understand, let's go over the operators and see how they function:

OR (| |)

AND (&&)

NOT (!)

Examples of the operators in use are provided below:

// USING THE AND(&&) OPERATOR let canDrive = true; let hasLicense = false; const readyToDrive = canDrive && hasLicense; console.log(readyToDrive) //OUTPUT: false

With the help of the code snippet above, we were able to construct a logic that determines whether a person is qualified to drive if they possess a driver's license and have driving experience. Both requirements must be satisfied before the person can pass the eligibility test.

The AND (&&) operator determines this because if one of the requirements is false, the operation's result will also be false. The operation cannot produce a truthy value unless both values are true:

// USING THE AND(&&) OPERATOR let canDrive = true; let hasLicense = true; const readyToDrive = canDrive && hasLicense; console.log(readyToDrive) // OUTPUT: true

Next, given the identical scenario as earlier, let's investigate how we can use the OR(||) operator:

// USING THE OR(||) OPERATOR let canDrive = true; let hasLicense = false; const readyToDrive = canDrive || hasLicense; console.log(readyToDrive) // OUTPUT: true

As an illustration, the eligibility regulations were changed to permit those who lack a license to drive as long as they are capable of doing so.

We created a logic that tests this using the OR (||) operator. If one of the operands is a true value, the operation returns true, indicating that in this case the person has passed the eligibility test and is permitted to drive.

You might find it difficult to determine whether an operation returns true or false when using logical operators, so I made a little cheat sheet you can memorize and refer to whenever you get stuck:

// AND(&&) Operator cheatsheet. true && false = false; false && false = false; true && true = true

// OR(||) Operator cheatsheet. true || false = true; false || false = false; true || true = true

If the above is too long for you to memorize, here is another cheat sheet that is as simple:

false && anything = false; true || anything = true;

Hopefully, these little tips will serve as a reference as you utilize the logical operators in JavaScript.

Check out the code sample below for an example of how to use the NOT(!) operator, which is the last logical operator on the list:

const author = "Franklin" if (author != "Franklin) { console.log("This is not the author") }

We created a basic program from the above code snippet that checks the author of an article or book and outputs a message if the author does not match the original author of the book. The NOT (!) operator is typically combined with other operators to create useful operations.

You can also use it to determine whether a value is true or false by inverting a Boolean value. Let's take a look at how that works below, using the driving eligibility test scenario:

// USING THE NOT(!) OPERATOR let canDrive = true; let hasLicense = false; if (!canDrive && !hasLicense) { console.log("Sorry, you are not eligible to drive") } //OUTPUT: "Sorry, you are not eligible to drive"

Let us break down the logic. First, we have a person who knows how to drive but does not have a driver's license, which is required by law for a person to be eligible to drive.

We created logic to ensure that if a person lacks either of the two qualities, they are not permitted to drive. The preceding logic can be translated as follows:

"If a person CANNOT drive and DOES NOT have a driver's license, they are not allowed to drive".

Because the variables declared canDrive is true so the !canDrive inverts to false and the hasLicense is false, it inverts to true.

So how does it end up being false? Remember our cheatsheet from earlier? We can use it to check the outcome of the operation.

false && true will be false.

If you have read this far into the article, congratulations on your new knowledge of JavaScript operators. If you would like to explore further and see more types of operators, here is a link to an MDN resource. Operators are crucial in our day-to-day activities with JavaScript, so learning about them is important.

Now we can go on to the next section of this article where you will learn how you can utilize several operators in an operation and how JavaScript calculates this operation.

Operator Precedence in JavaScript

The concept of operator precedence describes how operators are compared to one another throughout an operation. Operators that have higher precedence are given a higher priority than the operators with lower precedence.

Aside from writing basic logic in JavaScript every day, we spend about half of our time writing complex mathematical operations, logical operations, and occasionally we even translate some physics and math formulas into JavaScript code. This causes significant complications because neither of the aforementioned formulas are simple – they both contain multiple operators and operands.

But how does JavaScript parse this condition when it encounters it? Let's see an example below:

/*GIVEN A SET OF SCORES GOTTEN BY A TEAM, CALCULATE THE AVERAGE SCORE OF THE TEAM FORMULA FOR AVERAGE IS: SUM OF VALUES DIVIDED BY TOTAL NUMBER OF VALUES firstScore = 40; secondScore = 38; thridScore = 24; fourthScore = 32; */ const averageScore = 40 + 38 + 24 + 32 / 4; console.log(averageScore) //OUPUT: 110

If you use any online average calculator tool, the result will be 33.5, which is the right answer. The outcome of the aforementioned operation in our code is 110, which is quite "wrong" because the average on those values cannot be 110. Yet why? Here, operator precedence is in effect.

Similar to how hierarchies operate in the real world, some operators in the land of JavaScript are more significant than others. JavaScript first recognizes and uses the "more" important operators before the "less" essential ones in an operation.

Rules of the Operator Precedence

JavaScript doesn't randomly choose which operator it grants priority to in an operation based on the order in which they appear or for any other reason. Doing so would result in a JavaScript universe plagued by mathematical inconsistencies.

JavaScript has a rule that it carefully adheres to in order to determine precedence. Rather to going through a lengthy table or chart of all these rules, there is a quicker method that is easier to remember: BODMAS

BODMAS translates to:

Bracket "()"

Of (**)

Division (/)

Multiplication (**)

Addition (+)

Subtraction(-)

Each operand is listed above in the precise order that their precedence is determined. Easy? I adore this technique and employ it regularly to avoid errors that Operator precedence can introduce.

Let's investigate how JavaScript handled the average score operation. As we can see from the small formula above (BODMAS), the Division(/) operator has a higher precedence than the Addition(+) operator, so JavaScript first performs the Division(/) operations by dividing 32 by 4, which results in 8. Then it moves on to the next operator in accordance with the precedence, which is the Addition(+) operator, which sums up all the values and returns a result of 110.

Now let's look again at the exaxmple from the beginning of this tutorial:

let attendees = 2 + 3 * 4; console.log(attendees) // OUTPUT: 14.

You may have mentally performed the preceding computation and come up with 20 (this is what I got), but JavaScript believes otherwise, which is actually right.

According to the BODMAS rule of precedence, multiplication comes before addition. So JavaScript multiplied 3 by 4 (which is 12) before adding the result to the other operand to get the number 14.

Because we needed to divide the total count of the scores by the sum of the scores, we can now adjust our average score operation with this knowledge:

/*GIVEN A SET OF SCORES GOTTEN BY A TEAM, CALCULATE THE AVERAGE SCORE OF THE TEAM FORMULA FOR AVERAGE IS: SUM OF VALUES DIVIDED BY TOTAL NUMBER OF VALUES firstScore = 40; secondScore = 38; thridScore = 24; fourthScore = 32; */ const averageScore = (40 + 38 + 24 + 32) / 4; console.log(averageScore) //OUPUT: 33.5

Hurray! Finally, we got the correct answer! Can you tell how JavaScript interpreted this?

The precedence hierarchy places brackets first, so JavaScript executes the operations contained within the brackets before moving on to the next operation. As a consequence, it added 40, 38, 34, and 32 to produce 144, which was then divided by the score count of 4, giving us the final result of 33.5.

Here are a few exercises you can try to put your newly acquired operator precedence knowledge to the test:

1. 2 + 4 - 6 / 2 2. 4 + 4 * 8 / 3 3. 8 ** 2 + 4 /* ANSWERS: 1. 3 2. 20 3. 68 */

There are certain operators missing from the BODMAS formula above. The formula is not "absloute" because it only covers a tiny portion of operators, namely the arithmetic operators that we employ in our daily coding operations. This MDN resource shows a more thorough precedence table of hierarchy.

Conclusion

We're at the end of this tutorial, in which we learned about JavaScript operators and how JavaScript parses them when performing an operation using a technique called Operator precedence. Using this MDN resource, you can learn more about Operator precedence.

As it can be pretty cumbersome to remember all of the Operator precedence, so you can use the acronym BODMAS.

I really hope you took a lot away from this article.

Follow me on Twitter. for more tip on JavaScript and CSS.

I appreciate you reading. See you next time!

How the Z-index Property Works – Stacking Order of Elements in CSS

Franklin Okolie — Thu, 09 Feb 2023 22:48:03 +0000

If you're a front-end engineer, you've probably faced weird z-index bugs and ended up spending hours trying to fix them.

Change one property here and you have your header flying away from where it was meant to be.

Well, we can attribute this to the fact that debugging CSS can be quite hard and most times we are doing so blindly. We change properties expecting to see the bugs magically get resolved, but they don't.

Unlike JavaScript that yells at you, giving you hints about what you are doing, CSS is just watches you do rubbish and quietly hopes you figure it out.

One of the many ways to get really good at using CSS is by researching and understanding the mechanism behind some CSS properties you use every day.

This will give you a clear and concise technical know-how about how to implement certain complicated designs. It'll also give you insight on how to resolve some difficult unexplainable bugs you might come across while writing code.

The Problem with the Z-index Property in CSS

We can all agree that one of the weirdest, most confusing, and not-so-straightforward CSS properties is the z-index.

When I started learning CSS, I was told by certain instructors that you use z-index when you want a certain DOM (Document Object Model) element to be on top of another. Sounds simple, right?

So I thought – but life experience has a way of letting us know that things aren't always as easy as we thought they'd be.

Not understanding how the z-index property actually works behind the scenes led me down a frustating rabbit hole of having unexplainable bugs relating to z-index. So I started cranking up the z-index value to enormous numbers like the infamous 99999 to see if I could get the desired result.

Sometimes this works, but other times it doesn't which can be the most annoying thing because it worked the other time.

Another situation is when it works fine at first, but then as you progress in your work, you face yet again the same problem on a different part of your app. So this has you doing the default – cranking up the new z-index up to 99999999, an even bigger number than the previous one.

Deep down in your heart as a professional developer, you know this is not right. It is a mess (and personally, I hate messy CSS code). But you also know you have no idea how to approach the problem that will lead to a permanent fix and a win in your z-index wars.

If you are reading this article and want to understand the z-index once and for all, you're in the right place.

I'm about to help demistify the z-index for you. By the time you're done reading through this guide, I hope you'll know how to fix tough z-index bugs and how the z-index actually works. You'll also have a deeper and more fundamental understanding of how browsers render DOM elements and how it relates to the z-index.

Ready? Let's dive right in.

What is Stacking Context in CSS?

Before we even start to understand z-index in all its glory, it'll be to your benefit if you can, for a moment, pretend like you don't know anything about z-index. Forget what you know about it, because from here on, your mental model about z-index is about to change.

There is no smoke without fire, and the fire that powers the z-index property is a concept called stacking context. In the next section, we are going to go over the meaning of this term, what it actually means in practice, how it works, and how it relates to z-index.

The stacking context is simply a term we use to define how the browser decides which elements in the DOM come first and which to "render" on top.

When we start writing a block of HTML code, one element after the other, the natural way the browser decides which element comes on top is by checking the order of the DOM elements. See the codepen playground below for more details:

<div class="green-box"> div> <div class="pink-box"> div> <div class="blue-box"> div>

div{ width: 100px; height: 100px; border: 3px solid; } .green-box{ background-color: green; } .pink-box{ background-color: hotpink; margin-top: -30px; margin-left: 20px; } .blue-box{ background-color: blue; margin-top: -30px; margin-left: 40px; }

From the example above, you can see how the browser stacks DOM elements. It does so by simply checking the DOM order of each element, and rendering the latter element on top of the former element.

Think of it this way – how do you stack books? The last one always appears on top, the first one is always the one at the bottom. When you see some stacked books, you already know that the one at the bottom of the stack was the first book to be added to the stack (it started the stack) and the one on the top of the stack was the last to be added to the stack.

In the example above, the blue box is on top because it is the last on the stack as interpreted by the browser, while the green box is at the bottom of the stack because it is the first element in the DOM order.

A pictorial representation of how the browser render DOM elements - shown as stacked books.

The process of the browser making the decision about which DOM element to be painted and rendered on top the other element is called the stacking context. Let's keep this in mind as we will make reference to this term during the rest of the article.

Whenever a stacking context gets created, it is a memo sent to the browser asking it to re-evaluate the DOM elements and render/stack them accordingly.

Now that we have seen and understood what a stacking context means and how the browser renders DOM elements, let's move to other CSS properties that have the ability to affect how the browser makes these decisions.

Positioned Elements in CSS

There is a rule of thumb I want you to always remember as you go about your daily battles with CSS, especially when working with z-index and the stacking context: "Positioned elements always come on top".

What does this mean? Let's find out below:

<div class="green-box"> div> <div class="pink-box"> div> <div class="blue-box"> div>

div{ width: 100px; height: 100px; border: 3px solid; } .green-box{ background-color: green; position: relative; } .pink-box{ background-color: hotpink; margin-top: -30px; margin-left: 20px; } .blue-box{ background-color: blue; margin-top: -30px; margin-left: 40px; }

Here it goes! What happened? In the previous Codepen snippet I shared above, we saw how the browser rendered the boxes. Because of thier DOM order, the green box was farther below the stack than it peers.

But now it is on top of the rest. From the result in the Codepen playground, we can clearly see that the green box is being rendered above the pink box. How?

The green box being rendered on top of the rest of the other elements

Just like the rule of thumb clearly stated, setting the position property on any element in the DOM tells the browser to kindly re-do its calculations. Then, after those calculations, the browser decided to render the DOM element with the position property on top of any other elements regardless of their DOM order.

It is also worth mentioning that no matter the number of the z-index value we add for the other elements, they will never come on top of a positioned element. Yeah! I know you just had that euphoric revelation moment of "So this was the cause of my bug the other day at work".

You can play around with the playground by adding a z-index property to the other elements and adding a large value and see the result – take it up to 500 even. I assure you none of those elements will get placed on top of the positioned element.

Note: This doesn't apply to position: static. This is because position: static is the default positioned value assigned by CSS to all DOM elements. You can check it out by editing the playground above to have position: static.

You are probably thinking, "oh well, what if more than one element has the position property set. If you face this scenario, who wins the stacking context war?".

First I would like you to try it out. Try editing the playground above and setting the position properties on the two other elements.

When this happens, we have just evened all the elements by setting a position property. When the browser sees this, it returns to its default way of stacking these elements by following their DOM order. So it again renders the latter over the former just like how we stack up books. Check out the code snippet below to get a proper understanding.

<div class="green-box"> div> <div class="pink-box"> div> <div class="blue-box"> div>

div{ width: 100px; height: 100px; border: 3px solid; } .green-box{ background-color: green; position: relative; } .pink-box{ background-color: hotpink; margin-top: -30px; margin-left: 20px; position: relative; } .blue-box{ background-color: blue; margin-top: -30px; margin-left: 40px; position: relative; }

This is how stacking context works in the browser. Adopting this mental model is one of the fundamental ways of truly understanding how z-index works.

From the explanations above and the code snippets we saw, you might be wondering: if the z-index won't work when we try to use it when sibling elements have the position property set, how then do we even use it?

Well, what we just experienced is how the browser decides stacking context by default. z-index is simply a property that allows us to override this default value.

But that comes with some rules of its own. We'll explore this in the section below.

How to Use the Z-index Property

If we are looking to change how things work and opt-out from the default way of how the browser renders and stacks DOM elements, CSS has provided us with a property called z-index. And we can use it to achieve this.

First let's demisfity the almighty z-index property:

The z in z-index refers to the z-axis. z-axis represents the 3 dimensional part of an element.

x-axis is left and right

y-axis is up and down

z-axis is forward and backward

The mental model is that z-index works like 3D – elements with a higher z-index are elevated and pushed closer to a user's view in the browser so that it looks like they are over/in front of the rest of the other elements.

This is the same way 3D billboards work, by pushing images closer to us optically so that if feels almost as if the characters in these billboards are jumping out of the screen. The z-index shares the same concept with a 3D billboard.

Just like every other CSS property with default values, the default value for the z-index property is auto, which can be interpreted as zero.

When we are using z-index on any DOM element, adding a value of 1 or above is a direct command/signal that tells the browser to push that particular DOM element so that it sits right in front of its siblings.

For us to be able to use z-index effectively, there are some rules guiding how it works. Understanding and properly digesting how these rules apply is very important as it takes you one step closer to being free from the z-index struggle and uneccassary bugs. Check out the code snippet below:

<div class="green-box"> div> <div class="pink-box"> div> <div class="blue-box"> div>

div{ width: 100px; height: 100px; border: 3px solid; } .green-box{ background-color: green; z-index: 6; } .pink-box{ background-color: hotpink; margin-top: -30px; margin-left: 20px; } .blue-box{ background-color: blue; margin-top: -30px; margin-left: 40px; }

Even after adding a big z-index value to the green box it still doesn't comes on top the pink box

Isn't it surprising that, after setting a z-index value of 6 (a relatively big number for z-index), stacking context doesn't change?

The expectation after doing this is to see the green box being rendered on top of the rest the the boxes (since of course we know that z-index is used to get one element to be on top of the rest).

But in this case it is not working. Moments like this will lead to endless frustration and pulling out of hair and the rhetorical question: "Why aren't you not working?" and eventually a bad day at work.

I introduce you to the first rule of z-index:

z-index only works with positioned elements.

Now, I want you to go edit the playground and set position: relative on the green box and see the result. Try it by editing the Codepen playground above.

If you did, you will immediately see that the green box is now being rendered on top and the browser has re-calculated the stacking context and rendered the DOM elements accordingly via the new information it received. Always remember this first rule. See the first rule in action below:

<div class="green-box"> div> <div class="pink-box"> div> <div class="blue-box"> div>

div{ width: 100px; height: 100px; border: 3px solid; } .green-box{ background-color: green; z-index: 6; position: relative; } .pink-box{ background-color: hotpink; margin-top: -30px; margin-left: 20px; } .blue-box{ background-color: blue; margin-top: -30px; margin-left: 40px; }

After setting a position property on the green box, the z-index now works properly, rendering the green box on top.

Next stop is the second rule – but before we go into the details and understand what that rule does, I want to introduce you to a little bug. And I want you to see if you know what is happening and if you can resolve it.

If you can't, don't worry, as I will be explaining it in great detail below.

<body> <header> This is a header header> <main> <p>Hello there I am the main p> <button> Click me button> main> body>

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200..900&display=swap'); body{ font-family: 'Mulish', sans-serif; } header { background-color: hotpink; text-align: center; padding: 30px; position: relative; z-index: 2; } main { text-align: center; background-color: blue; color: white; padding: 30px; position: relative; z-index: 1; } button { margin: 0 auto; width: 90px; border: none; text-align: center; padding: 8px; background: white; box-shadow: 1px 2px 8px hsl(0deg 0% 0% / 0.25); border-radius: 6px; position: absolute; z-index: 999999; top: -12px; }

From the code snippet above, we have seen yet another z-index issue that can lead to hours of debugging without even knowing what is wrong.

Going through the code, we can see that the button has a outrageous number as its z-index value, and yet it is not sitting on top of the header. This might make you take a step back and reflect on the first rule of z-index and say "But it is a positioned element, why is it not working?".

That brings us to the second rule of z-index:

A z-index property in an Isolated stacking context is not regarded outside the Isolated stacking context.

What does this mean? Let me break it down:

From the code above, we can see that the main has a position property and also a z-index property. The same thing applies to the header element – the browser has used this value and calculated the stacking context. Since the header has a higher z-index value, it rendered it on top. As simple as that.

Now, the button is a child of main that also has the position property set. It also a z-index set to even a higher number.

In reference to the second rule, since main has the z-index property which creates something called an isolated stacking context, the button element is not regarded when the browser tries to work up the new stacking context.

You can go ahead and remove the z-index property on the main element and see what happens.

If you did that, you likely saw that immediately the button was rendered on top of the header element.

This might be pretty confusing at first, but trust me – when you use it and pratice more with it, it'll stick. I have an analogy to help you create a mental model when you think of this second rule:

Captain analogy

In a plane, there are usually 2 pilots, both of whom are equally qualified to fly and captain an airplane. But only one of those 2 pilots are actually chosen to be the captain of that specific flight. As long as the chosen pilot is not missing, sick, or injured during the course of the flight, there is no need for the second pilot to assume being a captain.

But in a situation where something bad happens to the chosen pilot, the second pilot is allowed and mandated to be captain.

Use this same analogy on the main and button, main has already been assigned a captain by having the z-index property. Because of this, the z-index property of the button becomes useless not matter how big we bump up the numbers.

But once we take away the z-index property from the main , the button is now free to be the captain.

Incase you have forgotten what a stacking context means:

The stacking context is simply a term used to define how the browser decides which elements in the DOM comes first and which to "render" on top.

We have discussed extensively how stacking context works and how it's created, but below is a summary:

Setting a position property (relative, fixed or absolute) on a DOM element.

Setting the z-index property on a DOM element.

Setting opacity to a value less than 1.

Using the isolation property.

Using the transform, filter, clip-path, or perspective CSS properties.

This simply means that using any of the properties above tells the browser to calculate and see which DOM element should be rendered on top of the rest of the elements.

You can read more about how stacking context works on the MDN.

How to Debug the Z-Index

Before we wrap up this article, I want to introduce you to a new property that you can use alongside the z-index property. It helps you deal with stacking contexts in a more pleasant way.

I will do so by introducing a bug so we can see how to fix it. Check the codepen playground below to see:

<body> <header> This is a header header> <main> <button> Click here to suscribe button> <p>Hello there I am the main p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis numquam sapiente veniam fugiat. Harum voluptatum est ab similique incidunt,Quae, amet rem. Minima vitae, accusantium corrupti dolorem perferendis qui magnam...[view the full code snippet on the codepen playground abovep> main> body>

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200..900&display=swap'); body{ font-family: 'Mulish', sans-serif; } header { background-color: hotpink; text-align: center; padding: 30px; position: sticky; top: 0; z-index: 2; } main { text-align: center; background-color: blue; color: white; padding: 30px; position: relative; min-height: 100vh; } button { border: none; text-align: center; padding: 8px; background: white; box-shadow: 1px 2px 8px hsl(0deg 0% 0% / 0.25); border-radius: 6px; position: sticky; top: 0; right: 20px; margin-left: 100rem; z-index: 2; }

If you run the playground above and see the result you will notice an issue there. Here is what I'm trying to do:

We have a blog, and in every blog post we want a floating sticky button that says "Click here to subscribe" because of course we want more viewers subscribed to the blog.

We do this by adding the position: sticky on the button so that it is always floating and in view as the users read the blog post. Once they see it enough, maybe they'll decide to subscribe.

We also want this button to be adherent to the blog post itself, which means as soon as the blog post is no longer in view, there is no reason why the button should be there. Because of this, we made the button a child of the main element which contains the blog post.

While this is true, we also want the button to be above/in front of the content of the blog post, simply floating on top the posts' text. To do this we added a z-index property. Now, because we already have a position property, we were very confident that the button would be stacked on top of the content by the browser.

From the page, we also added a sticky header, so that the header is glued to the page and never scrolls away. We also want the header to be on top on the other elements, so the blog post and any other preceding DOM elements just slip under the header.

To accomplish this, we add a z-index value of 2 so it is pushed further up the stack and closer to the screen which renders it on top of the other DOM elements.

After doing this and feeling satisfied with our work, we notice that we have a bug (I hate bugs): the button is simply not doing what we want it do.

The button is actually going above the header instead of going below alongside the blog post as we intended.

This is a recipe for further frustration that causes quite a bit of pulling and screaming at the computer screen along with "Why is CSS so difficult?".

Try going over the code and figuring out what the issue really is. Then come back to this article and we will solve it together.

Remember our second rule of z-index? Where we used the Captain analogy to describe how stacking contexts are compared? That is what is playing out here.

Looking at the code, we can see that we created 2 stacking contexts:

When we used the positioned and z-index on the header element.

When we used the positioned and z-index on the button element.

From the points above we can see that these two elements are the ones being compared by the browser in order to create the correct stacking context.

Also remember we discussed that:

If two DOM elements have the exact same properties for creating a stacking context, the browser decides which comes out on top by following the DOM order. This means that the latter element comes on top of the former, just like in a stack of books.

That is how the browser decided that button has has to come on top. When we compare alongside the browser, we see that:

The header has position: sticky, but the button also has position: sticky. It doesn't matter which value is used as long as the element is using a position property.

The header has a z-index of 2 (because it wants to come on top), and the button also has a z-index of 2 (because it wants to be above the content of the blog).

This has left the browser with no other choice than to decide the winner by following the DOM order, which means that since button is the latter in the DOM order it will come on top of the header. Phew! What a bug.

How do we solve this? We can go back to our Captain analogy:

On a plane, there are 2 pilots, both of them are equally qualified to fly and captain the plane. But only one of those 2 pilots are actually chosen to be the captain for that flight. As long as the chosen pilot is not missing, sick, or injured, there is no need for the second pilot to assume being a captain.

But in a situation where something bad happens to the chosen pilot, the second pilot is allowed and mandated to be captain.

Remember that button is a child of main but the main has no z-index. This means it is not a captain, which also means there is no isolated stacking context hindering the button's z-index property from being disregarded. Instead, the browser will consider it and compare it with the header element to decide which element should be rendered on top.

We can resolve this by applying the second rule of z-index by simply creating an isolated stacking context. We do this by adding a z-index property and also setting a position property on the main element. Let's see this in the code snippet below:

<body> <header> This is a header header> <main> <button> Click here to suscribe button> <p>Hello there I am the main p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis numquam sapiente veniam fugiat. Harum voluptatum est ab similique incidunt,Quae, amet rem. Minima vitae, accusantium corrupti dolorem perferendis qui magnam...[view the full code snippet on the codepen playground abovep> main> body>

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200..900&display=swap'); body{ font-family: 'Mulish', sans-serif; } header { background-color: hotpink; text-align: center; padding: 30px; position: sticky; top: 0; z-index: 2; } main { text-align: center; background-color: blue; color: white; padding: 30px; position: relative; min-height: 100vh; position: relative; z-index: 1; } button { border: none; text-align: center; padding: 8px; background: white; box-shadow: 1px 2px 8px hsl(0deg 0% 0% / 0.25); border-radius: 6px; position: sticky; top: 0; right: 20px; margin-left: 100rem; z-index: 2; }

Tada! Solved.

Now we have handed the captain mantle to main who is a parent to the button. This forces the button to step aside. And since the z-index on the header is 2 (which is a bigger number than 1 which we set on the main), the button is now going under the header alongside the blog post.

This is because, just like the second rule of z-index explained, the z-index value on the button no longer has any effect on the stacking context decision made by the browser.

Here are the 2 rules of the z-index property again:

z-index only works with positioned elements.

A z-index property in an isolated stacking context is not regarded outside the isolated stacking context.

How to use the isolation property

While the above code clearly solved our problem, we are still left with something every developer hates – that is, having littered z-index all over our codebase, we can go on vacation for a month, come back to our codebase, and encounter yet another z-index bug. We might forget what some particular z-index value was even supposed to do. Then we'll remove it which will plunge ourselves into another endless round of bug fighting.

Instead of using position: relative; z-index: 1; on our main element to create the isolated stacking context, we can simply do this instead:

Using the isolation property to solve the bug

main { isolation: isolate; }

The isolation property does only one thing which is: it creates a stacking context.

This is the simplest way to create a stacking context. It can be useful when you want to prevent the z-index values of child elements from affecting the layout of a webpage (except, of course, when we want it to do so). This property allows us achieve this without the burden of having the z-index every where in our code.

Conclusion

We have reached the end of this article. Hopefully you now understand the underlying mechanism behind how the browser stacks elements in the DOM (called a stacking context). You should also know how the z-index propery works, z-index rules, how to effectively use these rules.

I hope you learned a lot from this article, and I am looking forward to seeing you win every z-index battle you might face in future. You can always come back to this post and read it again.

For more CSS tips, follow me on Twitter.

Thanks for reading! See you next time.

How to Make a Custom Mouse Cursor with CSS and JavaScript

Franklin Okolie — Mon, 10 Jan 2022 16:13:35 +0000

Have you ever visited a website and been totally blown away by its amazing features? One of them might be a cool mouse cursor that is different from the regular arrow or pointer cursors you are used to.

This can really improve user experience, and lately I've been wondering how it works. So I started to do some research and I found out how it is done.

In this article, I will be explaining how to make a custom mouse cursor. By the end of this article you will learn how to make these cursors with two different methods, using CSS and JavaScript. Then you be will ready to vamp up your website with different creative cursors to keep your audience engaged. Ready? Let's dive in.

Prerequisites

This article is beginner-friendly, but to understand some concepts you should have basic knowledge of:

HTML

Basic CSS

Basic JavaScript

How to Customize a Mouse Cursor with CSS

Customizing a mouse cursor with CSS is pretty simple, as CSS already has a property to handle this. All we need to do is identify this property and use it.

As Frontend Engineers we use this property often – it is none other than the almighty cursor property. Yes, that property is what gives us the power to make a custom cursor of our choice.

Before we go to a practical example, let's look at the values associated with the CSS cursor property. While most developers just use a few important ones, there are more we should look at.

From the above code snippet and from the results, you can see and test out different mouse cursors that CSS has by hovering your mouse cursor on each of those boxes containing the name of each CSS cursor property value.

Now how do I use CSS to customize a mouse cursor? To use this, you just have to tell CSS what image you intend to use and point the cursor property to the image URL using the url value.

body { cursor: url('image-path.png'),auto; }

From the code snippet above, you can see I set this on the document body, so it can apply to the cursor no matter where it moves. It has the image specified in url().

The next value of the property is a fallback, just in case the image doesn't load or can not be found maybe due to some internal glitches. I'm sure you wouldn't want your website to be "cursor-less", so adding a fallback is very important. You can also add as many fallback URLs as you can or want.

body { cursor: url('image-path.png'), url('image-path-2.svg), url('image-path-3.jpeg'), auto; }

You can also customize the cursor on a particular element or section of your webpage. Below is a CodePen example:

That is all there is to customizing cursors in CSS. Now let's see how we can do this is JavaScript.

How to Make Custom Mouse Cursors with JavaScript

To make this happen with JavaScript, you need to manipulate the DOM to get the desired result.

First, let's see the HTML:

The HTML

<div class="cursor rounded">div> <div class="cursor pointed"><div>

From the code snippet above, I created two divs to represent the cursor. The plan is to manipulate these divs from JavaScript so their movement over the webpage is scrolled by the JavaScript mousemove event using the X and Y coordinates of the mouse movement.

Now let's get to the CSS part which will all make sense piece by piece.

How to style custom cursors with CSS

body{ background-color: #1D1E22; cursor: none; } .rounded{ width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; } .pointed{ width: 7px; height: 7px; background-color: white; border-radius: 50%; }

Taking a look at the CSS code above, I disabled the cursor (remember cursor:none?). This will make the cursor go invisible, allowing our custom cursor only to display.

The divs I styled to give them a unique "cursor-like" look. You can absolutely do more with it, maybe add a background image, emoji, stickers and so on provided there are images. Now, let's take a look at the JavaScript

How to use JavaScript to make the cursor move

const cursorRounded = document.querySelector('.rounded'); const cursorPointed = document.querySelector('.pointed'); const moveCursor = (e)=> { const mouseY = e.clientY; const mouseX = e.clientX; cursorRounded.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`; cursorPointed.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`; } window.addEventListener('mousemove', moveCursor)

I added an event listener on the global window object to listen to any mouse movement. When the mouse moves, the moveCursor function expression is called and it receives the event object as a parameter. With this parameter I was able to get the X and Y coordinates on the mouse at any point on the page.

I already selected each kind of cursor from the DOM using JavaScript querySelector. So all I had to do was move them according to the X and Y coordinates of the mouse by controlling the transform properties on the style with the translate3d value. This will enable the divs to move when the mouse moves to any point on the webpage.

And the backticks you see are called template literals. This enables writing variables easily to append them to strings. The alternative would be to concat the variables to the strings.

Simple, right? That's it!

Below is a CodePen sample and result of the above code snippet:

Which Method Works Best?

Now it's up to you as the developer to choose which method works best for you. You may choose to use CSS if you want to use some pretty emojis or images as a cursor. On the other hand, you might want to use JavaScript so you can customize complex shapes of your choice and animate the cursor's movement.

Either way is fine, as long as you get your desired results and wow all your site's visitors.

I hope you learnt a lot from this article, an d I am looking forward to seeing what you build with this knowledge.

For more CSS tips, follow me on Twitter.

Thanks for reading, See you next time.

Franklin Okolie - freeCodeCamp.org

How to Use the Ternary Operator in JavaScript – Explained with Examples

Here is What We'll Cover:

What is A Ternary Operator?

How to Use the Ternary Operator

How to Refactor if-else Statements to Ternary Operator

How to Chain Ternary Operators

Best Practices when Using the Ternary Operator

Conclusion

Contact information

How to Build a Custom HTML5 Video Player Using TailwindCSS and JavaScript

Prerequisites

Here's what we'll cover:

Getting Started

How to Set Up the Development Environment

How to setup the project with Vite

Delete unneccasary files and code

How to Build a Customized UI using Tailwind CSS

How to Implement the Play and Pause Functionality

How to Implement the Rewind and Fast Forward Functionality

How to Implement the Mute and Unmute Functionality

How to Update the Progress Bar Relative to the Video Time

How to Implement the Seeking Functionality

How to Add Keyboard Navigation for Accesibility

Using the space bar for play and pause

Using the arrow keys to rewind and fast forward

How your code should look now

Where to Go from Here

Conclusion

Contact information

How to Use Callbacks and Higher Order Functions in JavaScript

Functions as First Class Citizens in JavaScript

What are Higher Order Functions?

Array Methods

Timer Events

How to Create and Use a Higher Order Function

Returning a Function as a Value

Closures Explained

What are Callback Functions?

The Difference Between Higher Order Functions and Callback Functions

A Bag and Book

Fuel and Fuel Tank

Conclusion

JavaScript Operators and Operator Precedence – Beginner's Guide

What are Operators?

Types of Operators in JavaScript

Arithmetic Operators

Comparison Operators

Assignment Operators

Logical Operators

Operator Precedence in JavaScript

Rules of the Operator Precedence

Conclusion

How the Z-index Property Works – Stacking Order of Elements in CSS

The Problem with the Z-index Property in CSS

What is Stacking Context in CSS?

Positioned Elements in CSS

How to Use the Z-index Property

z-index only works with positioned elements.

A z-index property in an Isolated stacking context is not regarded outside the Isolated stacking context.

Captain analogy

How to Debug the Z-Index

How to use the isolation property

Conclusion

How to Make a Custom Mouse Cursor with CSS and JavaScript

Prerequisites

How to Customize a Mouse Cursor with CSS

How to Make Custom Mouse Cursors with JavaScript

The HTML

How to style custom cursors with CSS

How to use JavaScript to make the cursor move

Which Method Works Best?

`z-index` only works with positioned elements.

A `z-index` property in an Isolated stacking context is not regarded outside the Isolated stacking context.