diff --git a/Domains/Frontend/MiniProjects/NewsFlash/README.md b/Domains/Frontend/MiniProjects/NewsFlash/README.md new file mode 100644 index 00000000..f376dbe0 --- /dev/null +++ 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 \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/NewsFlash/index.html b/Domains/Frontend/MiniProjects/NewsFlash/index.html new file mode 100644 index 00000000..f620c55c --- /dev/null +++ b/Domains/Frontend/MiniProjects/NewsFlash/index.html @@ -0,0 +1,35 @@ + + + + + + NewsFlash - Live News Reader + + + +
+

🗞️ NewsFlash

+ +
+ + + +
+ + + + + + + + diff --git a/Domains/Frontend/MiniProjects/NewsFlash/script.js b/Domains/Frontend/MiniProjects/NewsFlash/script.js new file mode 100644 index 00000000..33eb2f45 --- /dev/null +++ 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 = `

No news found 📰

`; + } + loader.classList.add("hidden"); + loading = false; + return; + } + + displayNews(data.articles); + } catch (err) { + console.error("Error fetching news:", err); + newsContainer.innerHTML = `

Error loading news. Check API key or network.

`; + } + + loader.classList.add("hidden"); + loading = false; +} + +function displayNews(articles) { + articles.forEach(article => { + const card = document.createElement("div"); + card.classList.add("news-card"); + card.innerHTML = ` + news image +
+

${article.title || "Untitled"}

+

${article.description || "No description available."}

+ Read More → +
+ `; + 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(); diff --git a/Domains/Frontend/MiniProjects/NewsFlash/style.css b/Domains/Frontend/MiniProjects/NewsFlash/style.css new file mode 100644 index 00000000..4134ff00 --- /dev/null +++ b/Domains/Frontend/MiniProjects/NewsFlash/style.css @@ -0,0 +1,181 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); + +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; +} + +body { + background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); + color: #fff; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + overflow-x: hidden; +} + +/* Header */ +header { + width: 100%; + padding: 20px; + text-align: center; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +header h1 { + font-size: 2rem; + font-weight: 700; + color: #fff; + letter-spacing: 1px; +} + +header input { + margin-top: 15px; + padding: 10px 20px; + width: 90%; + max-width: 400px; + border: none; + border-radius: 30px; + background: rgba(255, 255, 255, 0.15); + color: white; + font-size: 1rem; + outline: none; +} + +header input::placeholder { + color: #ddd; +} + +/* Nav */ +nav { + margin: 15px 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; +} + +.category { + background: rgba(255, 255, 255, 0.1); + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 25px; + cursor: pointer; + transition: all 0.3s ease; + font-weight: 500; +} + +.category.active, +.category:hover { + background: linear-gradient(90deg, #ff6a00, #ee0979); + transform: scale(1.05); +} + +/* News Container */ +#newsContainer { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 25px; + width: 90%; + max-width: 1200px; + margin: 20px auto; +} + +.news-card { + background: rgba(255, 255, 255, 0.1); + border-radius: 20px; + overflow: hidden; + backdrop-filter: blur(12px); + transition: transform 0.3s, box-shadow 0.3s; +} + +.news-card:hover { + transform: translateY(-8px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); +} + +.news-card img { + width: 100%; + height: 180px; + object-fit: cover; +} + +.news-card-content { + padding: 15px; +} + +.news-card-content h3 { + font-size: 1.1rem; + font-weight: 600; + color: #fff; + margin-bottom: 8px; +} + +.news-card-content p { + font-size: 0.9rem; + color: #ddd; + margin-bottom: 10px; +} + +.news-card-content a { + text-decoration: none; + color: #ff7eb3; + font-weight: 500; +} + +/* Loader */ +#loader { + display: flex; + justify-content: center; + align-items: center; + margin: 30px; +} + +.hidden { + display: none; +} + +.spinner { + width: 40px; + height: 40px; + border: 5px solid rgba(255, 255, 255, 0.2); + border-top-color: #ff7eb3; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +/* Footer */ +footer { + text-align: center; + padding: 20px; + color: #ccc; + font-size: 0.9rem; +} + +footer span { + color: #ff4b2b; +} + +/* Responsive */ +@media (max-width: 600px) { + header h1 { + font-size: 1.5rem; + } + + .category { + font-size: 0.9rem; + padding: 8px 16px; + } +}