Merge pull request #43 from Ansh1602/main

News Website
Chayandas07 · Oct 18, 2023 · 875518b · 875518b
2 parents 69f673a + c850ffa
commit 875518b
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Welcome To RC News Center</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">RC News Center</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="#">Home</a>
+            </li>
+          </ul>
+          <form class="d-flex" role="search">
+            <input
+              class="form-control me-2"
+              type="search"
+              id="searchTxt"
+              placeholder="Search"
+              aria-label="Search"
+            />
+            <button class="btn btn-outline-success" type="submit">
+              Search
+            </button>
+          </form>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container my-3">
+      <h3>
+        Breaking News <span class="badge bg-secondary">By RC News Center</span>
+      </h3>
+      <hr/>
+
+        <div class="container my-2 accordion" id="newsAccordian">
+        </div> 
+
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+      crossorigin="anonymous"
+    ></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,71 @@
+console.log("Welcome to News Website Project");
+// a91bbd17191f48d8ac63d59c12f72ea9
+
+let apiKey = "a91bbd17191f48d8ac63d59c12f72ea9";
+
+// Grab the News container
+let newsAccordian = document.getElementById("newsAccordian");
+
+//  Create a GET request
+const xhr = new XMLHttpRequest();
+xhr.open(
+  "GET",
+  `https://newsapi.org/v2/top-headlines?country=in&apiKey=${apiKey}`,
+  true
+);
+
+// What to do when response is ready
+xhr.onload = function () {
+  if (this.status === 200) {
+    let json = JSON.parse(this.responseText);
+    let articles = json.articles;
+    // console.log(articles);
+    let newsHtml = "";
+    articles.forEach(function(element, index) {
+        // console.log(element,index);
+        let news = `<div class="container my-3 accordion" id="newsAccordian">
+                          <button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample${index}"             aria-expanded="false" aria-controls="multiCollapseExample${index}">
+                          <p><b> Breaking News ${index+1} </b> ${element["title"]}<p>
+                          </button>
+                        <div class="collapse multi-collapse" id= "multiCollapseExample${index}">
+                          <div class="card card-body" id="search">
+                               ${element["content"]}. <a href="${element['url']}" target="_blank" > Read More Here</a> 
+                               <img src="${element["urlToImage"]}" alt="Sorry Image not Available" style="border:5px solid black; display: block;
+                               margin-left: auto;
+                               margin-right: auto;
+                               width: 50%;">
+                            
+                          </div>
+                      </div>
+                   </div> `;
+          newsHtml += news;
+    });
+    newsAccordian.innerHTML = newsHtml;
+  } else {
+    console.log(`Sorry`);
+  }
+};
+
+xhr.send();
+
+// Search News
+
+let search = document.getElementById('searchTxt');
+search.addEventListener("input", function(){
+
+    inputVal = search.value.toLowerCase();
+    console.log('Input event fired!', inputVal);
+    let newsAccordians = document.getElementsByClassName('accordion')
+    Array.from(newsAccordians).forEach(function (element){
+        let newsTxt = element.getElementsByTagName("p")[0].innerText;
+        if(newsTxt.includes(inputVal)){
+            element.style.display = "block";
+        }
+        else{
+            element.style.display = "none";
+        }
+        console.log(newsTxt);
+    })
+
+})
+