Scrolling news bar

A scrolling news bar! That's a great idea. Here's a simple implementation using HTML, CSS, and JavaScript:

HTML:

<div class="news-bar">
  <ul id="news-list">
    <!-- news items will be added here -->
  </ul>
</div>

CSS:

.news-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  overflow-y: auto;
}

.news-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-bar li {
  padding: 10px;
  border-bottom: 1px solid #444;
}

.news-bar li:last-child {
  border-bottom: none;
}

JavaScript:

// create an array of news items
const newsItems = [
  { title: "Breaking News: World Leaders Meet to Discuss Global Issues", date: "2023-02-20" },
  { title: "New Study Reveals Surprising Benefits of Meditation", date: "2023-02-15" },
  { title: "Local Weather Forecast: Sunny Skies Expected Today", date: "2023-02-22" },
  // add more news items here...
];

// create a function to add news items to the list
function addNewsItem(item) {
  const newsList = document.getElementById("news-list");
  const newsListItem = document.createElement("li");
  newsListItem.textContent = `${item.title} - ${item.date}`;
  newsList.appendChild(newsListItem);
}

// add the initial news items to the list
newsItems.forEach(addNewsItem);

// create a function to scroll the news bar
function scrollNewsBar() {
  const newsBar = document.querySelector(".news-bar");
  newsBar.scrollTop = newsBar.scrollHeight;
}

// call the scroll function every 5 seconds
setInterval(scrollNewsBar, 5000);

How it works:

  1. We create an array of news items with title and date properties.
  2. We create a function addNewsItem to add each news item to the list.
  3. We add the initial news items to the list using the addNewsItem function.
  4. We create a function scrollNewsBar to scroll the news bar to the bottom.
  5. We call the scrollNewsBar function every 5 seconds using setInterval.

Tips and Variations: