From c4e2e8d2bfbfb0247a3130dc81a6db786fc40c58 Mon Sep 17 00:00:00 2001 From: priyankkulkarni <114922394+priyankkulkarni@users.noreply.github.com> Date: Mon, 7 Oct 2024 00:44:49 +0530 Subject: [PATCH] Added Header --- index.html | 49 +++++++++++++++++++++++++--- scripts/rss.js | 23 +++++++++++++ styles/main.css | 86 +++++++++++++++++++++++++++++-------------------- 3 files changed, 119 insertions(+), 39 deletions(-) create mode 100644 scripts/rss.js diff --git a/index.html b/index.html index 1fcc2fc..b3de1af 100644 --- a/index.html +++ b/index.html @@ -8,23 +8,64 @@ +
- +
+ + + + +
- +
+

Latest Headlines from NDTV

+
    + +
+
+ + - \ No newline at end of file + diff --git a/scripts/rss.js b/scripts/rss.js new file mode 100644 index 0000000..3c04b33 --- /dev/null +++ b/scripts/rss.js @@ -0,0 +1,23 @@ +document.addEventListener("DOMContentLoaded", function () { + const rssUrl = "https://feeds.feedburner.com/ndtvnews-top-stories"; + const headlinesContainer = document.getElementById("headlines"); + + // Fetch the RSS feed + fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`) + .then(response => response.json()) + .then(data => { + const items = data.items; + + // Iterate through the items and append to the headlines list + items.forEach(item => { + const listItem = document.createElement("li"); + const anchor = document.createElement("a"); + anchor.href = item.link; + anchor.target = "_blank"; + anchor.textContent = item.title; + listItem.appendChild(anchor); + headlinesContainer.appendChild(listItem); + }); + }) + .catch(error => console.error('Error fetching RSS feed:', error)); +}); \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 6dead3a..2c4e34c 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,35 +1,51 @@ -:root { - --primary-color: #ffffff; - --accent-color: #00bbff; - --border-color: #ced4da; - --font-color: #333333; - --time-color: #666666; - --border-raduis: 15px; - } - - * { - box-sizing: border-box; - padding: 0; - margin: 0; - } - - html, - body { - max-width: 100vw; - overflow-x: hidden; - } - - body { - background-color: var(--primary-color); - position: relative; - -webkit-tap-highlight-color: transparent; - font-family: "Open Sans", sans-serif; - font-optical-sizing: auto; - } - - main { - display: block; - min-height: 100vh; - position: relative; - } - \ No newline at end of file +body { + font-family: 'Open Sans', sans-serif; + margin: 0; + padding: 0; +} + +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #f5f5f5; + height: 100px; /* Reduced header height */ + position: relative; +} + +.gdg-logo { + height: 70px; /* Adjusted logo size */ + margin-left: 20px; +} + +.github-corner svg { + position: absolute; + top: 0; + right: 0; + fill: #151513; + color: white; +} + +#news-container { + padding: 20px; +} + +#headlines { + list-style-type: none; + padding: 0; +} + +#headlines li { + padding: 10px 0; + font-size: 18px; +} + +#headlines li a { + text-decoration: none; + color: #000; + transition: color 0.2s ease-in-out; +} + +#headlines li a:hover { + color: #007BFF; +} \ No newline at end of file