News App | HTML, CSS & JavaScript

News App with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #22

Project Overview

A News App built using HTML, CSS, and JavaScript that fetches and displays the latest news articles based on user search queries.
The application retrieves news from a public RSS feed and dynamically renders headlines and links, making it suitable for frontend-only environments without backend dependencies.

Key Features

Search news by keyword or topic.
Fetches real-time news from a public RSS source.
Displays latest headlines with direct links to full articles.
Works entirely on the frontend without API key dependency.
Handles loading states and no-result scenarios.
Clean, responsive, and user-friendly interface.
Reliable data fetching without CORS or browser restrictions.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>News App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="news-container">
    <h2>Latest News</h2>

    <div class="search-box">
      <input id="searchInput" placeholder="Search topic (e.g. India)" />
      <button onclick="getNews()">Search</button>
    </div>

    <div id="newsList"></div>
  </div>

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

CSS Code

* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.news-container {
  background: white;
  width: 420px;
  padding: 25px;
  border-radius: 12px;
}

.search-box {
  display: flex;
  margin-bottom: 15px;
}

input {
  flex: 1;
  padding: 10px;
}

button {
  padding: 10px 16px;
  background: #4f46e5;
  color: white;
  border: none;
}

.news-card {
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.news-card h4 {
  margin-bottom: 6px;
}

.news-card a {
  color: #4f46e5;
  font-size: 13px;
}

.error {
  color: red;
  text-align: center;
}

Javascript Code

const newsList = document.getElementById("newsList");

function getNews() {
  const query = document.getElementById("searchInput").value || "India";

  newsList.innerHTML = "Loading...";

  const rssUrl = `https://news.google.com/rss/search?q=${encodeURIComponent(
    query
  )}&hl=en-IN&gl=IN&ceid=IN:en`;

  fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(rssUrl)}`)
    .then(res => res.json())
    .then(data => {
      const parser = new DOMParser();
      const xml = parser.parseFromString(data.contents, "text/xml");
      const items = xml.querySelectorAll("item");

      if (!items.length) {
        newsList.innerHTML = "<p class='error'>No news found</p>";
        return;
      }

      newsList.innerHTML = "";

      items.forEach((item, index) => {
        if (index >= 5) return;

        const title = item.querySelector("title").textContent;
        const link = item.querySelector("link").textContent;

        newsList.innerHTML += `
          <div class="news-card">
            <h4>${title}</h4>
            <a href="${link}" target="_blank">Read more</a>
          </div>
        `;
      });
    })
    .catch(() => {
      newsList.innerHTML = "<p class='error'>Error loading news</p>";
    });
}