acesdit · Tejas-Santosh-Nalawade · Oct 22, 2025 · Oct 22, 2025
diff --git a/Domains/Frontend/MiniProjects/NewsFlash/README.md b/Domains/Frontend/MiniProjects/NewsFlash/README.md
@@ -0,0 +1,104 @@
+**Contributor:** GayatriVitkar
+
+📝 Description
+
+NewsFlash is a responsive and modern web application that delivers the latest news headlines from multiple categories in real-time using the NewsAPI.
+
+The project has a clean glassmorphism-inspired interface with smooth hover effects, animated loading transitions, and a seamless infinite scroll experience.
+Users can explore top news, search for specific topics, and filter articles by categories like Technology, Sports, Business, Entertainment, and more.
+
+Each news card contains a thumbnail, headline, short description, source, and a “Read More” button that opens the full article in a new tab.
+
+🎯 Features
+
+🌍 Live News Fetching: Displays updated news headlines using NewsAPI.
+
+🔎 Search Functionality: Find news instantly by typing keywords.
+
+🏷️ Category Filters: Switch easily between trending topics.
+
+♾️ Infinite Scroll: Automatically loads more news as you scroll.
+
+💎 Responsive Glassmorphism UI: Works smoothly on all screen sizes.
+
+⚡ Fast & Lightweight: Built using pure HTML, CSS, and vanilla JavaScript.
+
+🛠️ Tech Stack
+
+HTML5: Structure and layout of the web pages.
+
+CSS3: Custom responsive design with glassmorphism and animations.
+
+JavaScript (Fetch API): Fetches and dynamically displays live news content.
+
+🚀 How to Run
+🖥️ Method 1: Open in Browser
+
+Download or clone this repository.
+
+Open index.html directly in your browser.
+
+⚡ Method 2: Live Server (Recommended)
+
+Open project in VS Code.
+
+Right-click index.html → Open with Live Server.
+
+App runs locally at http://localhost:5500.
+
+📁 Project Structure
+NewsFlash/
+├── index.html         # Main HTML file
+├── style.css          # Styling and layout
+├── script.js          # JavaScript logic and API integration
+├── README.md          # Documentation
+└── assets/            # Images or icons used
+
+📚 Learning Outcomes
+
+Working with public APIs (NewsAPI)
+
+Asynchronous JavaScript (Fetch, async/await)
+
+DOM Manipulation and Dynamic Rendering
+
+Responsive UI Design
+
+Event Handling and Search Filtering
+
+Implementing Infinite Scroll Mechanism
+
+🐛 Known Issues
+
+API requests may fail if the free API limit is reached.
+
+Slow networks can cause delayed image loading.
+
+Some articles might not contain images or descriptions from the API.
+
+🚀 Future Enhancements
+
+Add dark/light mode toggle.
+
+Save favorite articles using local storage.
+
+Add “Top Stories by Country” filter.
+
+Implement voice-based news search.
+
+Add a simple offline PWA version.
+
+📄 License
+
+MIT License – Free for learning and personal use.
+
+🤝 Contributing
+
+This project is part of ProjectHive Frontend Domain.
+Feel free to:
+
+Fork and enhance the app
+
+Report bugs or suggest improvements
+
+Use it for your portfolio or learning practice
diff --git a/Domains/Frontend/MiniProjects/NewsFlash/index.html b/Domains/Frontend/MiniProjects/NewsFlash/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>NewsFlash - Live News Reader</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <header>
+    <h1>🗞️ NewsFlash</h1>
+    <input type="text" id="searchInput" placeholder="Search latest news..." />
+  </header>
+
+  <nav>
+    <button class="category" data-category="general">General</button>
+    <button class="category" data-category="technology">Technology</button>
+    <button class="category" data-category="sports">Sports</button>
+    <button class="category" data-category="business">Business</button>
+    <button class="category" data-category="entertainment">Entertainment</button>
+    <button class="category" data-category="science">Science</button>
+    <button class="category" data-category="health">Health</button>
+  </nav>
+
+  <main id="newsContainer"></main>
+
+  <div id="loader" class="hidden">Loading...</div>
+
+  <footer>
+    <p>💙 Built with ❤️ by <strong>Gayatri Vits</strong> | Powered by NewsAPI</p>
+  </footer>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/NewsFlash/script.js b/Domains/Frontend/MiniProjects/NewsFlash/script.js
@@ -0,0 +1,92 @@
+const apiKey = "84071566e88444519789a937d0240f6d"; // Replace this with your NewsAPI key
+const newsContainer = document.getElementById("newsContainer");
+const searchInput = document.getElementById("searchInput");
+const loader = document.getElementById("loader");
+
+let page = 1;
+let category = "general";
+let query = "";
+let loading = false;
+
+async function fetchNews() {
+  if (loading) return;
+  loading = true;
+  loader.classList.remove("hidden");
+
+  let url = `https://newsapi.org/v2/top-headlines?country=us&pageSize=9&page=${page}&apiKey=${apiKey}`;
+  if (category !== "general") url += `&category=${category}`;
+  if (query) url = `https://newsapi.org/v2/everything?q=${query}&pageSize=9&page=${page}&apiKey=${apiKey}`;
+
+  try {
+    const res = await fetch(url);
+    const data = await res.json();
+
+    if (data.status !== "ok" || !data.articles.length) {
+      if (page === 1) {
+        newsContainer.innerHTML = `<p style="text-align:center;color:#ddd;">No news found 📰</p>`;
+      }
+      loader.classList.add("hidden");
+      loading = false;
+      return;
+    }
+
+    displayNews(data.articles);
+  } catch (err) {
+    console.error("Error fetching news:", err);
+    newsContainer.innerHTML = `<p style="color:red;text-align:center;">Error loading news. Check API key or network.</p>`;
+  }
+
+  loader.classList.add("hidden");
+  loading = false;
+}
+
+function displayNews(articles) {
+  articles.forEach(article => {
+    const card = document.createElement("div");
+    card.classList.add("news-card");
+    card.innerHTML = `
+      <img src="${article.urlToImage || 'https://via.placeholder.com/400x200'}" alt="news image">
+      <div class="news-card-content">
+        <h3>${article.title || "Untitled"}</h3>
+        <p>${article.description || "No description available."}</p>
+        <a href="${article.url}" target="_blank">Read More →</a>
+      </div>
+    `;
+    newsContainer.appendChild(card);
+  });
+}
+
+// Category buttons
+document.querySelectorAll(".category").forEach(btn => {
+  btn.addEventListener("click", () => {
+    document.querySelectorAll(".category").forEach(b => b.classList.remove("active"));
+    btn.classList.add("active");
+    category = btn.dataset.category;
+    query = "";
+    page = 1;
+    newsContainer.innerHTML = "";
+    fetchNews();
+  });
+});
+
+// Search
+searchInput.addEventListener("keypress", e => {
+  if (e.key === "Enter") {
+    query = searchInput.value.trim();
+    category = "general";
+    page = 1;
+    newsContainer.innerHTML = "";
+    fetchNews();
+  }
+});
+
+// Infinite Scroll
+window.addEventListener("scroll", () => {
+  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
+    page++;
+    fetchNews();
+  }
+});
+
+// First Load
+fetchNews();