Create a RSS News Feed Reader using HTML CSS and JavaScript

Last Updated : 05 Dec, 2023

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

rssre

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"> 
                <a href="https://www.geeksforgeeks.org/"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20231124125438/geeksimage2.png"
                         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= 
"https://www.geeksforgeeks.org/?ref=ghm" 
                           target="_self"> 
                            Home 
                        </a> 
                    </li> 
                    <li> 
                        <a class="aClass" href= 
"https://www.geeksforgeeks.org/html/?ref=ghm"> 
                            HTML Tutorial 
                        </a> 
                    </li> 
                    <li> 
                        <a class="aClass" href= 
"https://www.geeksforgeeks.org/trending/?ref=shm"> 
                            Latest News 
                        </a> 
                    </li> 
  
                    <li> 
                        <a class="aClass" href= 
"https://www.geeksforgeeks.org/data-structures/?ref=shm"> 
                            Data Structures 
                        </a> 
                    </li> 
                    <li> 
                        <a class="aClass" href= 
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm"> 
                            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> 
        <link> https://mywebsitename/index.html </link> 
        <description>My Blog</description> 
        <language>en</language> 
        <item> 
            <title>Coding the Financial Market</title> 
            <link> 
https://www.geeksforgeeks.org/coding-the-financial-market/?ref=ml_lbp 
           </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> 
https://www.geeksforgeeks.org/flutter-architecture-application/?ref=lbp 
            </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> 
https://www.geeksforgeeks.org/cool-technology-facts/?ref=ml_lbp 
            </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> 
https://www.geeksforgeeks.org/introduction-to-webrtc/?ref=ml_lbp 
            </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)"; 
        }); 
}