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

Quote
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<h2>Today's Highlights</h2>
<h4>Brought to you by the Sun Daily</h4>
<div class="news">
</div>
</body>
</html>

 

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

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

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:

Quote
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!

1878829231_Screenshot2021-06-254_57_27AM.thumb.png.7b450beb00d9882ea219943010bc467a.png

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.

Guest
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...