From 56c89da927ab114c1afaff90ec3ed977a6451a4d Mon Sep 17 00:00:00 2001 From: Ritikabiswas <142112297+Ritikabiswas@users.noreply.github.com> Date: Sun, 21 Apr 2024 00:20:16 +0530 Subject: [PATCH] Add files via upload --- index.html | 47 +++++++++++ script.js | 50 ++++++++++++ stylessss.css | 222 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 319 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 stylessss.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..487b115 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + + + News website + + +
+

NEWS

+ + + +
+ + +
+
+ +
+
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..0d2b838 --- /dev/null +++ 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 = ` +

${article.title}

+

${article.description}

+ ${article.title} + Read more + `; + 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 new file mode 100644 index 0000000..77c7ef1 --- /dev/null +++ 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; + } + + + } \ No newline at end of file