RSS stands for Rich Summary Site which is a standard content distribution technology that helps users to share multiple sources of information in a single location or page. It is also called Really Simple Syndication which helps the users to stay up-to-date with current news and various websites in a single location. Instead of going to several pages, it is always easy and comfortable to have the list of preferable news feeds on a single page or RSS reader website. The sharing happens on an aggregated website by using a single file format of XML technology that is both human and machine-readable.
Preview
Approach
- By using JavaScript code, the XML file is read by collecting all the news feed items. The single news feed consists of “link”, “title” and “description” as its child elements.
- We request data from the server by using the JavaScript fetch() method.
- It parses the string in XML format by using the DOMParser.parseFromString() method.
- The data requested from the server asks for the collection of child elements by using the HTML DOM querySelectorAll() Method. Each child node item is appended in HTML string by using the JavaScript forEach() loop as shown. The final “html” string is shown on the document body.
- This is the main XML file used in the above HTML file from which the News RSS feed items are collected and the content items are listed in the HTML document as shown in the below output image.
Example: This example illustrates the RSS News Feed Reader using HTML CSS & JavaScript.
HTML
<!DOCTYPE html> <html>
<head>
<title>
HTML CSS JavaScript RSS news reader
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="headerbox">
<div class="logo">
<img src=
alt="GeeksforGeeksLogo">
</a>
<div style="color:green; margin: 10px;
font-size: 30px;">
GeeksforGeeks
</div>
</div>
<div style="text-align: center;
font-size: 30px;
padding: 10px;
font-weight: 700;">
Create RSS News feed Reader using
HTML JavaScript CSS
</div>
<div style="background-color:rgb(32, 94, 170);
overflow:hidden;
text-align: center;">
<ul style="text-align: center;">
<li>
<a class="aClass" href=
target="_self">
Home
</a>
</li>
<li>
<a class="aClass" href=
HTML Tutorial
</a>
</li>
<li>
<a class="aClass" href=
Latest News
</a>
</li>
<li>
<a class="aClass" href=
Data Structures
</a>
</li>
<li>
<a class="aClass" href=
Algorithms
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="RSSfeedID"></div>
<script src="script.js"></script>
<script>
document
.addEventListener("DOMContentLoaded", functionCall());
</script>
</body>
</html>
|
XML
<?xml version="1.0" encoding="UTF-8"?>
<rss>
<channel>
<title>RSS title</title>
<description>My Blog</description>
<language>en</language>
<item>
<title>Coding the Financial Market</title>
<link>
</link>
<description>Financial engineering is formulated and framed
with the concepts from
, Applied Mathematics, Computer Science Engineering, Statistics,
Probability principles and Economic theory.
</description>
</item>
<item>
<title>Flutter Architecture Application</title>
<link>
</link>
<description>
Flutter application consists of widgets,
Gestures,Concept of state,layers
Widgets are the primary component of any
flutter application. It acts as a UI for
the user to interact with the application.
Any flutter application is itself a widget
that is made up of a combination of widgets.
In a standard application, the root defines
the structure of the application followed by
a Material App widget which basically holds
its internal components in place. This is
where the properties of the UI and the application
itself is set. The Material App has a Scaffold widget
that consists of the visible components (widgets) of
the application.
</description>
</item>
<item>
<title>Cool Technology Facts</title>
<link>
</link>
<description>
The incredible advancement has been made by
the technology over the past 20 years.
Here are some quirky facts about technology
that may be surprising for you :
30th November is known as “Computer Security Day“.
Although GPS is free to use for the world but it
costs $2 million per day to operate. The
money comes from the American tax revenue.
</description>
</item>
<item>
<title>Introduction to WebRTC</title>
<link>
</link>
<description>
It is an open source and free project
that used to provide real-time
communication to mobile applications and web browsers
WebRTC stands for Web Real-Time Communication.
</description>
</item>
</channel>
</rss>
|
CSS
h1, h3 {
text-align: center;
} p { font-size: 18px;
padding: 10px;
} img { width: 50px;
height: 50px;
border-radius: 10px;
} li { display: inline;
/* float: left; */
list-style: none;
margin: 25px;
} .aClass { color: white;
text-decoration: none;
font-weight: 700;
} .logo { display: flex;
justify-content: center;
height: 100px;
gap: 20px;
} .headerbox { display: flex;
flex-direction: column;
gap: 10px;
} |
Javascript
function functionCall() {
const newsFeedContents = 'Newsfeed.xml';
fetch(newsFeedContents)
.then(response => response.text())
// DOMparser is the interface which parses
// a string having XML
// and return XML document
.then(str => new window.DOMParser()
.parseFromString(str, "text/xml"))
.then(data => {
//Returns collection of child elements
// of the matched selector.
const items = data.querySelectorAll("item");
let htmlOutput = ``;
/* The concatenation of htmlOutput
string is applied for each item
element of array. querySelector
fetches first element of the descendant */
items.forEach(itemElement => {
htmlOutput += `
<div>
<h3>
<a href=
"${itemElement.querySelector("link").innerHTML}" target="_blank" rel="noopener">
${itemElement.querySelector("title").innerHTML}
<button style=
"border-radius:8px;
background-color:rgb(32, 94, 170);
color:white;border:none">
RSS
</button>
</a>
</h3>
<p>
${itemElement
.querySelector("description").innerHTML}
<p>
</div>
`;
});
// Returns the htmlOutput string
// in the HTML body element
// Check whether your query returns null
var input =
document.getElementById("RSSfeedID");
if (input) {
input.innerHTML = htmlOutput;
}
document.body.style.backgroundColor = "rgb(203, 245, 245)";
});
} |
Output:
Output