Creation of Ticker Alert with HTML, CSS, and JavaScript

Discover how to build an Ticker Alert utilizing HTML, CSS, and JavaScript with this simple guide. Ideal for newcomers aiming to boost their web development expertise.

What is Alert Ticker?

In an era of relentless market changes and rapid trading, Ticker Alerts act as vital resource for anyone engaged in the financial markets. They enable users to remain informed, react quickly, and manage risks efficiently — all without the necessity of continuously watching the market. Whether you’re a day trader seeking swift profits or a long-term investor protecting your investments, ticker alerts can greatly improve your market insight and decision-making skills.

Creating an ticker alert can introduce a lively element to your website, making it more captivating for users. An ticker alert is a scrolling text display that shows crucial messages or updates. In this guide, we will lead you through the steps to create an ticker alert using HTML, CSS, and JavaScript. Whether you’re just starting out or looking to incorporate a new feature into your site, this tutorial is crafted to be clear and easy to understand.

Begin by establishing a fundamental HTML framework. This will encompass a section for the ticker and the notification messages. Here’s a breakdown of the HTML code.

(a) <!DOCTYPE html> :

This identifies the declaration type of document and the HTML version being used (HTML 5 in this case). It assists the browser in properly displaying the page.

(b) <html lang=”en”> :

The primary element of the HTML document. The lang=”en” attribute indicates that the language of the document is English.

(c) <head> :

Contains meta-information regarding the document:

<meta charset= “UTF-8” > : Specifies the character encoding as UTF-8, which contains the majority of characters from various languages.
<meta name=”viewport” content=”width=device-width, initial scale=1.0″>: Guarantees that the page is adaptive and adjust appropriately across different devices, setting the width to match the device’s width and the initial zoom level 1.
<title>Ticker Alert</title> : Defines the title of the webpage. Which is displayed in the title bar or tab of the browser.
<link rel=”stylesheet” href=”https://fonts.googleapis.com/..”> : Connects to a Google Fonts stylesheet to utilize the Poppins fonts in weights.
<link rel=”stylesheet” href=”styles.css”> : Links to an external CSS file (styles.css) for further styling of the page.

(d) <body> :

Encompasses the content of the webpage:

<div class=”ticker-news-container” > : A container for ticker news component.
<div class=”ticker-news”> : The primary container for the ticker.
<div class=”text-ticker”> : It contains the items for the ticker.
<span class=”newsItem” data-text=”…”></span> : Each <span> signifies a news item, with the data-text attribute containing the text of that news item.

(e) <script src=”script.js”> </script> :

Links to an external JavaScript file (script.js) that holds the functionality for ticker news, including animating the ticker and managing the display of news items.

Copy Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ticker Alert | Coding Jasim</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="styles.css">
    
</head>
<body>
    <div class="ticker-news-container">
        <div class="ticker-news">
            <div class="text-ticker">
                <span class="newsItem" data-text="Shares of six companies are drawing attention on today"></span>
                <span class="newsItem" data-text="Example company fell 4.12% to Rs.60.53 as of today."></span>
                <span class="newsItem" data-text="Example company has signed a Joint Development Agreement with particualar company."></span>
                <span class="newsItem" data-text="Dominos India operator Jubilant Foodworks beat first-quarter profit."></span>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Next, enhance your ticker’s appearance to make it visually attractive. This includes configuring the colors, dimensions, and animations.

Copy Text

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #3494fb;
  color: #fff;
}

.ticker-news-container {
  width: 100%;
  max-width: 900px;
  padding: 15px;
  box-sizing: border-box;
  padding-top: 100px;
}

.ticker-news {
  background:linear-gradient(135deg, #0be204, #07d270);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}

.text-ticker {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
}

.news-item {
  display: none;
  position: absolute;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: rgba(255, 255, 255, 0.75); }
}

@keyframes typing-caret {
  0% { content: "_"; }
  50% { content: ""; }
  100% { content: "_"; }
}

.text-ticker::after {
  content: "_";
  animation: typing-caret 1s steps(1, end) infinite;
}

At last, we need to develop a function in JavaScript. Here’s a break down of the JavaScript code.

(1) Selecting News Items :

const newsItems = document.querySelectorAll('.newsItem');

document.qureySelectorAll(‘.newsItem’)’ : Grabs all items with newsItem and saves them in all newsItems NodeList.

(2) Initialization of Index:

let index = 0;

‘index’ : A variable is created to track the current news item that is being shown.

(3) Animation Function :

function typeWriter(text, i, fnCallback) {
    if (i < text.length) {
        document.querySelector('.text-ticker').innerHTML = text.substring(0, i + 1);
        setTimeout(() => {
            typeWriter(text, i + 1, fnCallback);
        }, 100);
    } else if (typeof fnCallback === 'function') {
        setTimeout(fnCallback, 1000);
    }
}

‘ typeWriter(text, i, fnCallback) ‘ : This function mimics the action of typing out text one character at a time.

‘ text ‘ : The entire text that needs to be typed out.
‘ i ‘ : The index of the current character that is to be displayed.
‘ fnCallback ‘ : A function that will be called once the typing has been completed.
‘ document.qureySelector(‘.text-ticker’).innerHTML=text.substring(0, i+1) ‘ : Updates the ticker’s text content to reflect the portion of the text that has been typed so far.
‘ setTimeout (() => { typeWriter(text, i + 1, fnCallback); }, 100) ‘ : Recursively invokes typeWriter to type the subsequent character after a delay of 100 milliseconds.
‘ else if (typeof fnCallback === ‘function’) { setTimeout(fnCallback, 1000) ‘ : When the typing is finished and a callback is given, it triggers the callback after a delay of 1000 milliseconds (1 second)

(4) Text Animation Starts :

function startTextAnimation(i) {
    if (typeof newsItems[i] === 'undefined') {
        setTimeout(() => {
            startTextAnimation(0);
        }, 2000);
    } else {
        const text = newsItems[i].getAttribute('data-text');
        typeWriter(text, 0, () => {
            startTextAnimation(i + 1);
        });
    }
}

‘ startTextAnimation(i) ‘ : Handles the animation of news items.

‘ if (typeof newsItems[i] === ‘undefined’) { setTimeout(() => { startTextAnimation(0); }, 2000) ‘ : If the current index is greater the number of news items, restart the animation from the first item after a 2000ms delay (2 secs).
‘ else {const text = newsItems[i].getAttribute(‘data-text’); typeWriter(text, 0, () => { startTextAnimation(i+1); }); ‘ : If additional news items are available, retrieve the text from data-text attribute, initiate the typing animation for that text, and then call startTextAnimation with the subsequent index once the typing is finished.

(5) Animation starts on Page Load :

document.addEventListener('DOMContentLoaded', () => {
    startTextAnimation(0);
});

‘ stdocument.addEventListener(‘DOMContentLoaded’, () = startTextAnimation(0); ‘ : Guarantees that the typing animation begins immediately after the DOM content has fully loaded.

Copy Text

const newsItems = document.querySelectorAll('.newsItem');
let index = 0;

function typeWriter(text, i, fnCallback) {
    if (i < text.length) {
        document.querySelector('.text-ticker').innerHTML = text.substring(0, i + 1);
        setTimeout(() => {
            typeWriter(text, i + 1, fnCallback);
        }, 100);
    } else if (typeof fnCallback === 'function') {
        setTimeout(fnCallback, 1000);
    }
}

function startTextAnimation(i) {
    if (typeof newsItems[i] === 'undefined') {
        setTimeout(() => {
            startTextAnimation(0);
        }, 2000);
    } else {
        const text = newsItems[i].getAttribute('data-text');
        typeWriter(text, 0, () => {
            startTextAnimation(i + 1);
        });
    }
}

document.addEventListener('DOMContentLoaded', () => {
    startTextAnimation(0);
});

Conclusion & Final Thoughts

Well done! You have effectively built an ticker alert utilizing HTML, CSS, and JavaScript. This straightforward feature can assist in keeping your audience updated and involved. By completing these steps, you’ve acquired the knowledge to establish the HTML framework, enhance it with CSS, and incorporate dynamic elements using JavaScript. Don’t hesitate to modify the ticker to match your website’s aesthetic and communication requirements.