Jump to content
Welcome, welcome! Come in and register, and have some developer coffee. 👨‍💻 ×

[JS] Create a RSS Reader in no time!

Recommended Posts

All you need are:

  • index.html
  • scripts.js
  • styles.css
  • RSS Feed URL

File #1 - index.html

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Today's Highlights</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
<h2>Today's Highlights</h2>
<h4>Brought to you by the Sun Daily</h4>
<div class="news">


File #2 - scripts.js
Remember to customize the RSS Feed URL with your own!

const url = 'https://www.thesundaily.my/rss/home'
.then(response=> {
const contentType = response.headers.get('content-type');
return response.text();
.then(xmlString => {
const parser = new DOMParser()
const dom = parser.parseFromString(xmlString, 'application/xml')
return dom
.then (dom => {
const items = dom.querySelectorAll('item')
const ul = document.querySelector('.news')
items.forEach(item => {
const li = document.createElement('li')
li.textContent = item.querySelector('title').textContent

For Malaysian's the Sun Daily newspaper, these are the valid RSS Feeds:


File #3 - styles.css

It can be anything, it is of no importance here.  The following style sheet is optional:

body { background-color: rgba(150, 130, 19, 0.507); font-family: 'Helvetica Neue', sans-serif; font-size: 14px; }

RESULT? This is the screenshot, RSS feed reader using JavaScript in action!


Note: Not all RSS feed URL are supported. Some may block the script from fetching the XML content. 


Live Site Example: https://blogs.w3spaces.com


Edited by FlierMate
Added live site URL
  • Love 2
Link to post
Share on other sites
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...