<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif">
<div class="jumbotron text-center">
<h2>XML</h2>
<p>RSS URL</p>
<div class="input-group">
<input type="text" id="rssUrl" class="form-control input-lg" placeholder="">
<span class="input-group-btn">
<button class="btn btn-primary btn-lg" type="button" id="fetchButton">Haberleri Getir</button>
</span>
</div>
<div class="alert alert-danger" id="errorMessage" style="margin-top: 15px;">
<strong>Hata!</strong> <span id="errorText"></span>
</div>
</div>
<div id="loading" class="text-center" style="display: none;">
<img src="https://i.stack.imgur.com/kS9T4.gif" alt="Yükleniyor..." style="width: 50px;">
<p>Haberler yükleniyor...</p>
</div>
<div id="newsContainer">
<!-- Haberler buraya eklenecek -->
</div>
</div>
body {
background-color: #f8f9fa;
}
.container {
padding-top: 20px;
}
.jumbotron {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.news-item {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: all 0.2s ease-in-out;
}
.news-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 10px rgba(0,0,0,0.1);
}
.news-item h4 {
font-weight: 600;
}
.news-img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 10px;
}
.alert {
display: none;
}
$(document).ready(function() {
$('#fetchButton').click(function() {
fetchRssFeed();
});
function showLoading(isVisible) {
$('#loading').toggle(isVisible);
$('#newsContainer').empty();
$('#errorMessage').hide();
}
function showError(message) {
$('#errorMessage').show();
$('#errorText').text(message);
}
function fetchRssFeed() {
const rssUrl = $('#rssUrl').val().trim();
if (!rssUrl) {
showError("Lütfen bir RSS URL'si girin.");
return;
}
showLoading(true);
// rss2json.com API'si ile CORS sorunu aşılır
const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`;
$.getJSON(apiUrl)
.done(function(data) {
if (data.status === 'ok') {
showLoading(false);
displayNews(data.items);
} else {
throw new Error(data.message || 'Veri çekilirken hata oluştu.');
}
})
.fail(function(jqxhr, textStatus, error) {
showLoading(false);
showError(`Bir hata oluştu: ${error}. URL'yi kontrol edin.`);
console.error("RSS verisi çekme hatası:", textStatus, error);
});
}
function displayNews(items) {
const container = $('#newsContainer');
container.empty();
if (items.length === 0) {
container.append('<p class="text-center">Bu adresten hiç haber bulunamadı.</p>');
return;
}
$.each(items, function(index, item) {
// <content> varsa onu kullan, yoksa <description>
const contentHtml = item.content || item.description;
// İçeriği parse etmek için geçici bir DOM objesi oluştur
const tempDiv = $('<div>').html(contentHtml);
// İlk resim
const firstImg = tempDiv.find('img').first().attr('src') || '';
// Paragrafları topla (resim hariç)
const paragraphs = [];
tempDiv.find('p').each(function() {
paragraphs.push($(this).text());
});
const textContent = paragraphs.join("<br>");
// HTML şablon
const newsHtml = `
<div class="well news-item">
<h4><a href="${item.link}" target="_blank">${item.title}</a></h4>
${firstImg ? `<img src="${firstImg}" class="news-img">` : ''}
<div class="item-content">${textContent}</div>
<p class="text-muted">Tarih: ${new Date(item.pubDate).toLocaleDateString('tr-TR')}</p>
</div>
`;
container.append(newsHtml);
});
}
});
