DhanushNehru · amaanwarsi · Oct 30, 2023 · Oct 30, 2023 · Oct 30, 2023 · Oct 30, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Get or search top news headlines delivered from reputed leading news websites">
+  <title>NewsFinder by Amaan Warsi</title>
+
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
+
+  <link href="https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap" rel="stylesheet">
+  <link href="blog.css" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="container">
+    <header class="blog-header lh-1 py-3">
+      <div class="row flex-nowrap justify-content-between align-items-center">
+        <div class="col-4">
+          <a class="blog-header-logo link-dark" href="/">NewsFinder</a>
+        </div>
+        <div class="col-4 d-flex justify-content-end align-items-center">
+          <a class="link-secondary mx-3" href="#!" id="toggleMode" aria-label="toggleMode">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon-stars" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
+              <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
+              <path d="M19 11h2m-1 -1v2"></path>
+            </svg>
+          </a>
+          <a class="link-secondary" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">Menu</a>
+
+        </div>
+      </div>
+    </header>
+    <div class="nav-scroller py-1 mb-2">
+      <nav class="nav d-flex justify-content-between">
+        <a class="p-2 link-secondary" href="?c=business">Business</a>
+        <a class="p-2 link-secondary" href="?c=entertainment">Entertainment</a>
+        <a class="p-2 link-secondary" href="?c=general">General</a>
+        <a class="p-2 link-secondary" href="?c=health">Health</a>
+        <a class="p-2 link-secondary" href="?c=science">Science</a>
+        <a class="p-2 link-secondary" href="?c=sports">Sports</a>
+        <a class="p-2 link-secondary" href="?c=technology">Technology</a>
+      </nav>
+    </div>
+  </div>
+
+  <main class="container">
+    <div class="offcanvas offcanvas-start w-75" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <nav class="nav nav-pills flex-column flex-sm-row">
+          <form action="/" method="GET">
+            <div class="input-group">
+              <input type="text" class="form-control" name="s" placeholder="Search...">
+            </div>
+          </form>
+          <a class="flex-sm-fill text-sm-center nav-link text-dark my-2 active" aria-current="page" href="/">Home</a>
+          <a class="flex-sm-fill text-sm-center text-dark my-2 nav-link" href="https://amaanwarsi.github.io/#about">About</a>
+          <a class="flex-sm-fill text-sm-center text-dark my-2 nav-link" href="https://amaanwarsi.github.io/#contact">Contact</a>
+          <a class="flex-sm-fill text-sm-center text-dark my-2 nav-link" href="https://github.com/amaanwarsi">Source Code</a>
+        </nav>
+      </div>
+    </div>
+    <div class="row mb-2" id="data">
+      <div id="spinner">
+        <div class="d-flex justify-content-center">
+          <div class="spinner-border" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+
+  </main>
+
+  <footer class="blog-footer">
+    <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+    <p>
+      <a href="#toggleMode">Back to top</a>
+    </p>
+  </footer>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
+  <script src="main.js"></script>
+
+</body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,84 @@
+const getNews = async () => {
+  var returnData;
+  const name = (new Date()).toString().split('(')[1].split(" ")[0];
+
+  const countryResponse = await fetch("https://restcountries.com/v3.1/name/" + name + "?fullText=true");
+  const data = await countryResponse.json();
+
+  // console.log(JSON.stringify(data));
+  const country = data[0].cca2;
+
+  const code = country.toLowerCase();
+
+  if (code == 'ae' || code == 'ar' || code == 'at' || code == 'au' || code == 'be' || code == 'bg' || code == 'br' || code == 'ca' || code == 'ch' || code == 'cn' || code == 'co' || code == 'cu' || code == 'cz' || code == 'de' || code == 'eg' || code == 'fr' || code == 'gb' || code == 'gr' || code == 'hk' || code == 'hu' || code == 'id' || code == 'ie' || code == 'il' || code == 'in' || code == 'it' || code == 'jp' || code == 'kr' || code == 'lt' || code == 'lv' || code == 'ma' || code == 'mx' || code == 'my' || code == 'ng' || code == 'nl' || code == 'no' || code == 'nz' || code == 'ph' || code == 'pl' || code == 'pt' || code == 'ro' || code == 'rs' || code == 'ru' || code == 'sa' || code == 'se' || code == 'sg' || code == 'si' || code == 'sk' || code == 'th' || code == 'tr' || code == 'tw' || code == 'ua' || code == 'us' || code == 've' || code == 'za') {
+
+    returnData = code
+
+  }
+  else {
+    returnData = null;
+  }
+  getData(returnData, getParam('c'), getParam('s'))
+
+}
+
+const getData = async (code, category, search) => {
+  const api= // YOUR_API_KEY
+
+  try {
+
+    var url;
+    if (search != null) {
+      url = 'https://newsapi.org/v2/everything?q=' + search + '&apiKey='+api;
+    }
+    else if (code != null) {
+      if (category != null) {
+        url = 'https://newsapi.org/v2/top-headlines?country=' + code + '&category=' + category + '&apiKey='+api;
+      } else {
+        url = 'https://newsapi.org/v2/top-headlines?country=' + code + '&apiKey='+api;
+      }
+
+    } else if (code == null && category != null) {
+      url = 'https://newsapi.org/v2/top-headlines?category=' + category + '&apiKey='+api;
+    } else {
+      url = 'https://newsapi.org/v2/top-headlines?language=en&apiKey='+api;
+    }
+
+    const response = await fetch(url);
+    const myJson = await response.json();
+    document.querySelector('#spinner').style.display = 'none';
+    var i = 0;
+    myJson.articles.map((res) => {
+
+      var d = new Date(res.publishedAt);
+      var date = d.getDate() + ' ' + d.toLocaleString('default', { month: 'short' }) + ', ' + d.getFullYear();
+      var description = (res.description != null) ? res.description : '';
+      var notfound = "notfound.jpg"
+      var content = (res.content != null) ? '<p>' + res.content + '</p>' : '';
+      var author = (res.author != null) ? '<p><p><b>Author`s:</b>&nbsp;' + res.author + '</p>' : '';
+      var html = '<div class="col-md-4"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm position-relative"> <img src="' + res.urlToImage + '" onerror=this.src="' + notfound + '" alt="' + res.title + '" class="img-fluid"> <div class="p-3 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-primary">' + res.source.name + '</strong> <h3 class="mb-0">' + res.title + '</h3> <div class="mb-1 text-muted">' + date + '</div> <p class="card-text mb-auto">' + description + '</p> <div class="d-flex align-items-center justify-content-between"><a href="' + res.url + '">Continue reading</a> <a class="link-secondary" data-bs-toggle="offcanvas" href="#offcanvasBottom' + i + '" role="button" aria-controls="offcanvasBottom' + i + '"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-dots-vertical" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> <path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path> </svg></a> </div> <div class="offcanvas offcanvas-bottom h-50" tabindex="-1" id="offcanvasBottom' + i + '" aria-labelledby="offcanvasBottomLabel' + i + '"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasBottomLabel' + i + '">Details</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body small"> <p>' + res.title + '</p>' + author + ' ' + content + '<b>Url:</b>&nbsp;<a href="' + res.url + '">' + res.url + '</a> </div></div> </div></div>';
+
+      document.querySelector('#data').innerHTML += html;
+      i++;
+    })
+
+
+  } catch (e) {
+    console.log(e)
+  }
+
+}
+
+const getParam = (p) => {
+  const queryString = window.location.search;
+
+  const urlParams = new URLSearchParams(queryString);
+
+  return urlParams.get(p);
+}
+
+
+getNews()
+document.querySelector("#toggleMode").onclick=()=>{
+  document.querySelector("body").classList.toggle("dark");
+};
diff --git a/newsfinder/README.md b/newsfinder/README.md
@@ -0,0 +1,45 @@
+
+# NewsFinder
+Get or search top news headlines delivered from reputed leading news websites
+
+Find original https://github.com/amaanwarsi/newsfinder
+
+
+## API Reference
+```http
+https://newsapi.org/
+```
+
+## Functions and Variables
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `api` | `string` | **Required**. _ENTER_YOUR_API |
+
+#### getParam(p)
+
+Returns the current parameters of URL.
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `p` | `string` | 'c' for category and 's' for search query  |
+
+
+#### getData(code, category, search)
+
+Print data came through API
+| Parameter | Type     | Description                |
+| :-------- | :------- | :------------------------- |
+| `code` | `string` | country code for regional based results |
+| `category` | `string` | category for news extracted from URL |
+| `search` | `string` |  query for searching news |
+
+#### getNews()
+Function which handles all of the operations
+
+
+## Features
+
+- Light/dark mode toggle
+- Responsive
+- get overview of news
+- wide range of categories
+- regional based results 
diff --git a/newsfinder/index.html b/newsfinder/index.html
@@ -0,0 +1,95 @@
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Get or search top news headlines delivered from reputed leading news websites">
+  <title>NewsFinder by Amaan Warsi</title>
+
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
+
+  <link href="https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap" rel="stylesheet">
+  <link href="style.css" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="container">
+    <header class="blog-header lh-1 py-3">
+      <div class="row flex-nowrap justify-content-between align-items-center">
+        <div class="col-4">
+          <a class="blog-header-logo link-dark" href="/">NewsFinder</a>
+        </div>
+        <div class="col-4 d-flex justify-content-end align-items-center">
+          <a class="link-secondary mx-3" href="#!" id="toggleMode" aria-label="toggleMode">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon-stars" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
+              <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
+              <path d="M19 11h2m-1 -1v2"></path>
+            </svg>
+          </a>
+          <a class="link-secondary" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">Menu</a>
+
+        </div>
+      </div>
+    </header>
+    <div class="nav-scroller py-1 mb-2">
+      <nav class="nav d-flex justify-content-between">
+        <a class="p-2 link-secondary" href="?c=business">Business</a>
+        <a class="p-2 link-secondary" href="?c=entertainment">Entertainment</a>
+        <a class="p-2 link-secondary" href="?c=general">General</a>
+        <a class="p-2 link-secondary" href="?c=health">Health</a>
+        <a class="p-2 link-secondary" href="?c=science">Science</a>
+        <a class="p-2 link-secondary" href="?c=sports">Sports</a>
+        <a class="p-2 link-secondary" href="?c=technology">Technology</a>
+      </nav>
+    </div>
+  </div>
+
+  <main class="container">
+    <div class="offcanvas offcanvas-start w-75" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <nav class="nav nav-pills flex-column flex-sm-row">
+          <form action="/" method="GET">
+            <div class="input-group">
+              <input type="text" class="form-control" name="s" placeholder="Search...">
+            </div>
+          </form>
+          <a class="flex-sm-fill text-sm-center nav-link text-dark my-2 active" aria-current="page" href="/">Home</a>
+          <a class="flex-sm-fill text-sm-center text-dark my-2 nav-link" href="https://amaanwarsi.github.io/#about">About</a>
+          <a class="flex-sm-fill text-sm-center text-dark my-2 nav-link" href="https://amaanwarsi.github.io/#contact">Contact</a>
+          <a class="flex-sm-fill text-sm-center text-dark my-2 nav-link" href="https://github.com/amaanwarsi">Source Code</a>
+        </nav>
+      </div>
+    </div>
+    <div class="row mb-2" id="data">
+      <div id="spinner">
+        <div class="d-flex justify-content-center">
+          <div class="spinner-border" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+
+  </main>
+
+  <footer class="blog-footer">
+    <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+    <p>
+      <a href="#toggleMode">Back to top</a>
+    </p>
+  </footer>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
+  <script src="main.js"></script>
+
+</body>
+
+</html>