How to build a Flash Title Notification with JavaScript
Tags: javascript, html, webdev
Published: 2022-02-05 07:49:52

The user's attention is important. How do you call the attention of a user who is on another tab to your website?

In this article, you will learn how to implement a flash title using LinkedIn sample that looks like this 👇

![ezgif.com-gif-maker (2).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1640170211063/L5fFIZruTn.gif)


When a user is on another tab, flash titles are useful for drawing their attention to the website as shown below.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640170513166/-gja67tjJ.png)

You have probably seen a flash title on Facebook and some other websites when you have a new notification on their website.


So, let's get started with building your own flash title.


![giphy.webp](https://cdn.hashnode.com/res/hashnode/image/upload/v1640171080528/7XAjnTX43.webp)


<hr />


This article is in two parts, the HTML part, and the JavaScript part

## 1. The HTML Part

Create a new `index.html` and add the HTML5 boilerplate that I've created below.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- SCRIPT -->
    <script src="index.js"></script>
</body>
</html>

```

A version with LinkedIn Favicon

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LinkedIn</title>
    <link rel="shortcut icon" href="https://static-exp1.licdn.com/sc/h/al2o9zrvru7aqj8e1x2rzsrca" id="favicon-ico">
    <link rel="apple-touch-icon" href="https://static-exp1.licdn.com/sc/h/2if24wp7oqlodqdlgei1n1520">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/eahiplrwoq61f4uan012ia17i">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/2if24wp7oqlodqdlgei1n1520"
        sizes="57x57">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/eahiplrwoq61f4uan012ia17i"
        sizes="144x144">
</head>

<body>

    <script src="index.js"></script>
</body>

</html>

```

Ensure to add a title tag to your script, because it is where the flashing notifications will be implemented.

<hr />

## 2. The JavaScript part

Create an `index.js` or `whateverfilename.js` that you want. We will create a function that will change the title tag and toggle between the current page title and the new notification messages that you want to toast to the user.

- We will be making use of the `document.title` to have access to the title tag text in the HTML document.

The code below will change the title of the page to the assigned string.

```
document.title = '1 new notification';

```

The output of the above code.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640171837935/Cd1iADg9W.png)

Let's move on!

<hr />


## The Flash Title Function

Create a `flashTitle` function. The function will accept two parameters, the `pageTitle` and the `newTitle`, then we will check if the current page title is the same as the `pageTitle` parameter, if they are the same, then we want to set the current page title to the `newTitle` parameter.

But if the current page title is not the same as the `pageTitle` parameter, then we want to display the `pageTitle`.

The code below is the translation of the explanation given above.

```
function flashTitle(pageTitle, newTitle) {
  if (document.title == pageTitle) {
    document.title = newTitle;
  } else {
    document.title = pageTitle;
  }
}

```

> Calling the `flashTitle` function at this point will only display the `pageTitle` parameter, you will need the toggle effect.

<hr />

## The Toggle Effect

The toggle effect adds the continuous swap of the page title and the new notification message, the toggle effect will be implemented using the `setInterval()` method.


The `setInterval()` method is used to call a function continuously at a specified time (in milliseconds), and its syntax is shown below

```
setInterval(functionNameWithoutBracket, NumberOfIntervalInMiliseconds);

```

We can call the `flashTitle` function to run at an interval of 1500 milliseconds.

```
setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);

```

> 
The double quotation is required because we are passing arguments to the `flashTitle` function, and setInterval does not require a parenthesis for a callback function

<hr />

## The Flash Title

![ezgif.com-gif-maker (2).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1640170211063/L5fFIZruTn.gif)

<hr />

## The JavaScript Complete Code

Below is the complete code snippet for the flash title JavaScript part.

```
function flashTitle(pageTitle, newTitle) {
  if (document.title == pageTitle) {
    document.title = newTitle;
  } else {
    document.title = pageTitle;
  }
}

setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);
```

<hr />

## Using Ternary Operator

We can replace the if statements with the ternary operator as well.

```
function flashTitle(pageTitle, newTitle) {
  document.title == pageTitle
    ? (document.title = newTitle)
    : (document.title = pageTitle);
}

setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);
```

<hr />

Kudos, you have successfully learned how to implement a flash title to a web application using JavaScript.

![Kudos, you have successfully learned how to implement a flash title to a web application using JavaScript.](https://cdn.hashnode.com/res/hashnode/image/upload/v1640174554881/E4RiKeuIi.gif)

## Conclusion

Flash titles are very useful to alert the user of their new notifications when they are away on another website, and in this article, we have learned how to implement a flash title notification using JavaScript.

 <hr />

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

-  [Twitter @unclebigbay143](https://twitter.com/intent/follow?screen_name=unclebigbay143) 
-  [LinkedIn @unclebigbay](https://www.linkedin.com/in/unclebigbay/) 

<hr />

See you in the next article. Bye Bye 🙋‍♂️

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622627809083/3i7ThmW-M.png)


If you found my content helpful and want to support my blog, you can also [buy me a coffee below](https://www.buymeacoffee.com/unclebigbay), my blog lives on coffee 🙏.