how to create a simple news ticker using html, css and javascript

News tickers can be used on a site to pass on important information to web users. In this tutorial, we will learn how to create a simple news ticker using marquee.

Prerequisite

Basic knowledge of HTML, CSS and JavaScript is required to fully understand the concepts in this tutorial.

HTML

We begin by adding the HTML code as shown below

<div id="marquee-cont">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="50px" style="background:#1174A8;">
        <button id="ticker-title">Posts:</button>
      </td>
      <td id="marquee">
        <marquee onmouseover="this.stop();" onmouseout="this.start();" id='scroll'>
        temp <img src="https://www.naishare.com/images/favicon.png" width="25px" />
        </marquee>
      </td>
    </tr>
  </table>
</div>

CSS

Now we add styles 

#marquee-cont {
  background: #f4f4f4;
  margin-top:10px;
}
#marquee-cont marquee {
  margin-top: 5px;
}
#marquee-news {
  
  background: #1174A8;
  padding: 5px;
}
#ticker-title{
  border:none;
  padding:5px 20px;
  background:#1174A8;
  color:white;
}
#ticker-title:focus{
  outline:none;
}

JavaScript

Using JavaScript, we will render the content stored in the array in the marquee.

//array of news
const news = ["Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.",
"Contrary to popular belief, Lorem Ipsum is not simply random text.",
"The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.",
"All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary."]

//logo
const logo = "<img src='https://www.naishare.com/images/favicon.png' width='25px' style='margin:0 8px'/>";
let tickerText = "";
//looping through the news array
for(let i=0; i<news.length; i++){
  tickerText+=news[i];
  //adds the logo in between news items
  if(i!=news.length-1){
    tickerText+=logo;
  }
}

document.querySelector("#scroll").innerHTML = tickerText;