Merge pull request #3840 from zalabhavy/NewsJunction

new game NewsJunction added
kunjgit · May 29, 2024 · 8194194 · 8194194
2 parents 25ee95e + 2b0cbaa
commit 8194194
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 0 deletions.
diff --git a/Games/NewsJunction/README.md b/Games/NewsJunction/README.md
@@ -0,0 +1,31 @@
+# **NewsJunction** 
+
+---
+
+<br>
+
+## **Description 📃**
+
+- The "NewsJunction" allows users to enter topics of interest and fetches news articles related to those topics. It offers personalized news feeds, real-time updates, and customization options.
+
+## **functionalities 🎮**
+
+- Topic-Based Feeds: Customized news based on user-selected topics.
+Search Functionality: Find specific articles or topics on demand.
+Real-Time Updates: Stay current with the latest news.
+
+<br>
+
+## **How to play? 🕹️**
+Search any topic and click on search button !
+- 
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+![image](../../assets/images/NewsJunction.png)
+<br>
+
+
diff --git a/Games/NewsJunction/index.html b/Games/NewsJunction/index.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>NewsJunction-A Daily News Provider</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="icon" type="image/png" href="https://img.icons8.com/stickers/100/news--v2.png" alt="news--v2">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg bg-dark bg-body-tertiary">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="#">NewsJunction</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="?q=India&query=1">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="?q=Weather&query=1">Weather</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="?q=Social&query=1">Social</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="?q=Bollywood&query=1">Bollywood</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link active"  aria-current="page" href="?q=Cricket&query=1">Cricket</a>
+              </li>
+            </ul>
+            <form class="d-flex" role="search">
+              <input class="form-control me-2" name="q" type="search" placeholder="Search" aria-label="Search">
+              <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+          </div>
+        </div>
+    </nav>
+    <div class="container row mx-auto d-flex justify-content-center">
+        <h4 class="d-flex justify-content-center m-2"><span id="querytext"> </span> - NewsJunction (<span id="queryresult"></span>)</h4>
+        <div id="content" class="row mx-2">
+            Loading...
+        </div>
+    </div>
+
+    <div class="nextandprev d-flex justify-content-center my-4">
+        <nav aria-label="Page navigation example">
+            <ul class="pagination">
+              <li class="page-item" id="pre"><a class="page-link" href="#">Previous</a></li>
+              <li class="page-item" id="next"><a class="page-link" href="#">Next</a></li>
+            </ul>
+          </nav>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    <script>
+        console.log("Hey I am JS");
+        let articlePerPage = 20;
+        let queryParams = new URLSearchParams(window.location.search);
+        let query = queryParams.get('q') || 'India'; 
+        let pgno = parseInt(queryParams.get('pgno')) || 1;
+
+        if (isNaN(pgno) || pgno < 1) {
+            pgno = 1;
+        }
+
+        console.log("Query:", query, "Page Number:", pgno);
+
+        const fetchNews = async (query, pgno) => {
+            try {
+                let response = await fetch(`https://newsapi.org/v2/everything?q=${query}&language=en&apiKey=ea16c3261f734d2481f1f6aece178fb7&pageSize=${articlePerPage}&page=${pgno}`);
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch data');
+                }
+                let data = await response.json();
+                console.log(data);
+                document.getElementById("querytext").textContent = query;
+
+                let totalResults = data.totalResults;
+                document.getElementById("queryresult").textContent = totalResults;
+                let totalPages = Math.ceil(totalResults / articlePerPage);
+
+                let pre = document.getElementById("pre").querySelector("a");
+                let next = document.getElementById("next").querySelector("a");
+
+                pre.href = `?q=${query}&pgno=${pgno-1}`;
+                next.href = `?q=${query}&pgno=${pgno+1}`;
+
+                document.getElementById("pre").classList.toggle("disabled", pgno === 1);
+                document.getElementById("next").classList.toggle("disabled", pgno === totalPages);
+
+                let str = "";
+
+                for (let item of data.articles) {
+                    str += `<div class="card m-2" style="width: 18rem;">
+                        <img src="${item.urlToImage}" class="card-img-top" alt="...">
+                        <div class="card-body">
+                            <h5 class="card-title">${item.title}</h5>
+                            <p class="card-text">${item.description}</p>
+                            <a target="_blank" href="${item.url}" class="btn btn-primary">Read More...</a>
+                        </div>
+                    </div>`;
+                }
+
+                document.getElementById("content").innerHTML = str;
+
+            } catch (error) {
+                console.error('Error fetching data:', error.message);
+            }
+        }
+
+        fetchNews(query, pgno);
+    </script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -283,6 +283,9 @@ This repository also provides one such platforms where contributers come over an
 
 
 
+| [NewsJunction](https://github.com/kunjgit/GameZone/tree/main/Games/NewsJunction)                  |
+
+
  </center>
 
 <br>

diff --git a/assets/images/NewsJunction.png b/assets/images/NewsJunction.png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -283,6 +283,9 @@ This repository also provides one such platforms where contributers come over an



		\| [NewsJunction](https://github.com/kunjgit/GameZone/tree/main/Games/NewsJunction) \|


		</center>

		<br>
Expand Down