-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (126 loc) · 3.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<title>RSS Reader</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* CSS styles for the article divs */
.article {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
.article h2 {
font-size: 1.2em;
margin: 0 0 10px 0;
color: #007bff;
}
.article p {
margin: 0 0 10px 0;
line-height: 1.3;
}
.article img {
float: left;
margin-right: 10px;
max-width: 100%;
height: auto;
border-radius: 3px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
.article a {
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 3px;
transition: background-color 0.3s ease;
}
.article a:hover {
background-color: #0056b3;
}
/* CSS styles for the page header */
header {
background-color: #007bff;
color: #fff;
padding: 20px;
text-align: center;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
position: fixed;
left: 0;
right: 0;
box-sizing: border-box;
}
header h1 {
font-size: 2em;
margin: 0;
}
/* CSS styles for the content div */
body {
margin: 0;
}
#content {
padding-top: 80px;
}
</style>
</head>
<body>
<header>
<h1>RSS Reader</h1>
</header>
<div id="content">
<!-- The articles will be inserted here dynamically -->
</div>
<script>
$(document).ready(function() {
// Define the RSS feeds to be read
var feeds = [
{url: "https://feeds.bbci.co.uk/news/rss.xml", title: "BBC News"},
{url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml", title: "New York Times"}
];
// Loop through the feeds and read them
$.each(feeds, function(index, feed) {
$.ajax({
url: feed.url,
dataType: "xml",
success: function(data) {
$(data).find("item").each(function() {
// Get the article information
var title = $(this).find("title").text();
var description = $(this).find("description").text().split(".", 2).join(".") + ".";
var thumbnail = $(this).find("media\\:thumbnail").attr("url");
var link = $(this).find("link").text();
// Create the article div
var article = $("<div class='article'></div>");
// Add the title
var titleElem = $("<h2>" + title + "</h2>");
article.append(titleElem);
// Add the description
var descElem = $("<p>" + description + "</p>");
article.append(descElem);
// Add the thumbnail (if available)
if (thumbnail) {
var thumbElem = $("<img src='" + thumbnail + "'>");
article.prepend(thumbElem);
}
// Add the "Read More" button
var linkElem = $("<a href='" + link + "' target='_blank'>Read More</a>");
article.append(linkElem);
// Add the article to the content div
$("#content").append(article);
});
}
});
});
});
</script>
</body>
<footer>
<p>This is the footer section</p>
</footer>
</html>