Add files via upload

Ritikabiswas · Apr 20, 2024 · 56c89da · 56c89da
commit 56c89da
Show file tree

Hide file tree

Showing 3 changed files with 319 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="stylessss.css">
+
+    <title>News website</title>
+</head>
+<body>
+    <header>
+        <h1>NEWS</h1>
+        <input type="checkbox" id="check"/>
+            <label for="check">
+                <i class="fa-solid fa-bars" id="bar"></i>
+                <i class="fa-solid fa-xmark" id="cancel"></i> 
+
+            </label>
+        <nav class="navbar">
+            <ul>
+                <li><a href="#general"><i class="fa-solid fa-house"></i>home</a></li>                 
+                <li><a href="#entertainment">bollywood</a></li>
+                <li><a href="#sports">sports</a></li>
+                <li><a href="#science">Science</a></li>
+                <li><a href="#business">Business</a></li>
+                <li><a href="#technology">Technology</a></li>
+            </ul>
+        </nav>
+        <div class="searchbox">
+            <input id="tx" type="text" class="tbox" placeholder="home.."/>
+            <button id="btn" class="btn"><i class="fa-solid fa-magnifying-glass"></i></button>
+        </div>
+    </header>
+
+    <main>
+        <section id="news-list">
+
+        </section>
+    </main>
+
+    <script src="script.js"></script>
+    <script src="https://kit.fontawesome.com/e76f01f511.js" crossorigin="anonymous"></script>
+</body>
+</html>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,50 @@
+const apiKey = "2d62da0f2ee24d92bcb6df65b3eb988e";
+const searchtext = document.getElementById("tx");
+
+async function fetchNews(category) {
+    try {
+        const response = await fetch(`https://newsapi.org/v2/top-headlines?country=in&category=${category}&apiKey=${apiKey}`);
+        const data = await response.json();
+
+        const newsList = document.getElementById('news-list');
+        newsList.innerHTML = '';
+
+        if (data.articles) {
+            data.articles.forEach(article => {
+                const articleElement = document.createElement('div');
+                articleElement.classList.add('article');
+                articleElement.innerHTML = `
+                    <h2>${article.title}</h2>
+                    <p>${article.description}</p>
+                    <img src="${article.urlToImage}" alt="${article.title}">
+                    <a href="${article.url}" target="_blank">Read more</a>
+                `;
+                newsList.appendChild(articleElement);
+            });
+        } else {
+            console.error('Error fetching news:', data.message || 'Unknown error');
+        }
+    } catch (error) {
+        console.error('Error fetching news:', error);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    fetchNews('general'); 
+
+    const navLinks = document.querySelectorAll('nav a');
+    navLinks.forEach(link => {
+        link.addEventListener('click', function (event) {
+            event.preventDefault();
+            const category = this.getAttribute('href').substring(1);
+            fetchNews(category);
+        });
+    });
+
+    const searchButton = document.getElementById("btn");
+    searchButton.addEventListener("click", () => {
+        const category = searchtext.value;
+        if (!category) return;
+        fetchNews(category);
+    });
+});
diff --git a/stylessss.css b/stylessss.css
@@ -0,0 +1,222 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #e04f0c;
+}
+header {
+  background-color: #000;
+    color: #fff;
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;position: sticky;
+   top:0;
+   z-index: 1;
+}
+h1{
+ font-style: italic;
+ font-family: Georgia, 'Times New Roman', Times, serif;
+ color: rgb(198, 31, 31);
+}
+nav ul {
+    list-style: none;
+    display: flex;
+}
+
+ nav  ul li {
+    margin-right: 20px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.fa-solid{
+   color:white;
+    padding: 5px;
+}
+
+
+nav ul li  a {
+    padding: 22px;
+    line-height: 30px;
+    text-decoration: none;
+    color: #fff;
+    font-weight: bold;
+    transition: color 0.3s;
+    border-radius:100px;
+
+}
+
+nav ul li a:hover {
+    background-color: aqua;
+    color: #fff;
+    border-color:#000;
+}
+.searchbox{
+    margin: 10px;
+}
+.tbox{
+padding: 10px;
+width: 200px;
+border-radius: 10px;
+
+}
+.btn{
+  width: 50px;
+  height: 40px;
+  background-color: #009688;
+  border-radius: 10px;transition: color 0.3s;
+
+}
+main {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 1em;
+   background-image:url(https://th.bing.com/th/id/OIP.CZXfA1DhhNeGZ-QkpDCBWwHaFj?pid=ImgDet&w=191&h=143.25&c=7&dpr=1.3);
+  /*background-color: rgb(171, 26, 26);*/
+}
+.article {
+    background-color: #171212;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    margin-right: 20px;
+    padding: 10px;
+    transition:box-shadow ;
+    cursor: pointer;
+
+
+} #news-list{
+    display:grid;
+    width:100%;
+    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
+    margin: auto;
+
+}
+.article h2 {
+    font-size: 24px;
+    margin-bottom: 10px;
+   color: aliceblue;
+}
+
+.article p {
+    font-size: 16px;
+    margin-bottom: 10px; color: aliceblue;
+}
+
+.article img {
+    width: 100%;
+    height:fit-content;
+    border-radius: 5px;
+}
+
+.article a { position:relative;
+    top:8px;
+    padding: 10px 20px;
+    background-color: #00a4e0;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    font-weight: bold;
+    transition: background-color 0.3s;
+
+}@keyframes fade {
+    from {opacity: .4} 
+    to {opacity: 1}
+  }
+.article:hover{
+   /* margin-bottom: 10px;
+    margin-right: 10px;
+    box-shadow: 0 3px 7px white ;*/
+        animation-name: fade;
+        animation-duration: 1.5s;
+
+}
+
+
+.article a:hover {
+    background-color: #007cb0;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+}
+ label #bar , label #cancel{ position:absolute;
+    font-size: 30px;
+    color: #fff;
+    line-height:20px;
+    margin-right:40px;
+    cursor: pointer;
+    right: 0;
+    display: none;
+}
+#check{
+    display: none;
+}
+@media (max-width: 768px) {
+   label #bar{
+        display: block;
+    }
+    header{
+        position: sticky;
+        top:0;
+    }
+ .navbar{
+        position:fixed;
+        top:0;
+        right:-100%;
+        width: 100%;
+        background: #009688;
+        text-align: center;
+        padding: 10px;
+    }
+    .searchbox{
+        display: none;
+    }
+    #check:checked ~nav{
+        right:0;
+        z-index: -1;
+
+
+    } #check:checked ~ label #cancel{
+      display: block;
+    }
+    #check:checked ~ label #bar{
+        display: none;
+    }
+    nav ul{
+        padding: 1px;
+        display: block;
+    }
+    nav ul li {
+        margin-right: 1px;
+        margin-top: 1px;
+        margin-bottom:1px;
+    }
+
+     nav ul li a { 
+         font-size: 14px; 
+     padding: 10px; 
+     } 
+   .article{
+    margin-right: 0;
+   }
+    .article h2 {
+        font-size: 20px;
+    }
+
+    .article p {
+        font-size: 14px;
+    }
+
+    .article img {
+        width: 100%;
+    }
+
+    .article a {
+        font-size: 14px;
+        padding: 8px 16px;
+    }
+
+
+    }