edit the script and add readme

This commit is contained in:
Jieyab89
2026-06-20 14:48:40 +07:00
parent 97fcc8037e
commit 2de69201a9
3 changed files with 278 additions and 81 deletions
+120 -28
View File
@@ -2,57 +2,149 @@
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CNN News Scrapper</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.card-title { word-break: break-word; }
#search-input::placeholder { color: #adb5bd; }
.stat-badge { font-size: 0.85rem; }
</style>
</head>
<body class="bg-dark text-light">
<div class="container mt-5">
<h2 class="mb-4">CNN News Scrapper</h2>
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
<h2 class="mb-0">CNN News Scrapper</h2>
<span id="article-count" class="badge bg-secondary stat-badge"></span>
</div>
<div class="mb-4">
<input type="text" id="search-input" class="form-control bg-secondary text-light border-0"
placeholder="Search the article">
</div>
<div id="loading" class="text-center text-secondary py-5">
<div class="spinner-border text-light" role="status"></div>
<p class="mt-2">Loading..............</p>
</div>
<div id="news-container" class="row"></div>
<div id="empty-state" class="alert alert-secondary d-none">Article not found :(</div>
</div>
<script>
async function loadData() {
try {
const res = await fetch('./cnn_results.json');
const data = await res.json();
let allArticles = [];
const container = document.getElementById('news-container');
function escapeHtml(str) {
if (str === null || str === undefined) return "";
return String(str)
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
data.forEach(article => {
const col = document.createElement('div');
col.className = "col-md-6 mb-4";
function normalizePath(path) {
if (!path) return "";
return path.replace(/\\/g, "/");
}
col.innerHTML = `
<div class="card bg-secondary text-light h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title">${article.title}</h5>
<p class="text-warning">${article.date}</p>
<p class="card-text flex-grow-1">
${article.content.substring(0, 200)}...
</p>
function renderArticles(articles) {
const container = document.getElementById('news-container');
const emptyState = document.getElementById('empty-state');
container.innerHTML = "";
<div class="d-flex gap-2 mt-3">
<a href="${article.saved_path}/index.html" target="_blank" class="btn btn-success btn-sm">
Open the Archive
</a>
if (articles.length === 0) {
emptyState.classList.remove('d-none');
return;
}
emptyState.classList.add('d-none');
<a href="${article.url}" target="_blank" class="btn btn-primary btn-sm">
Original Source
</a>
</div>
articles.forEach(article => {
const title = escapeHtml(article.title || "(No title article)");
const date = escapeHtml(article.date || "");
const rawContent = article.content || "";
const preview = escapeHtml(rawContent.substring(0, 200)) + (rawContent.length > 200 ? "..." : "");
const archivePath = normalizePath(article.saved_path) + "/index.html";
const archiveHref = encodeURI(archivePath);
const originalHref = encodeURI(article.url || "#");
const col = document.createElement('div');
col.className = "col-md-6 mb-4";
col.innerHTML = `
<div class="card bg-secondary text-light h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title">${title}</h5>
<p class="text-warning">${date || "Date not available"}</p>
<p class="card-text flex-grow-1">${preview || "There is no content.........."}</p>
<div class="d-flex gap-2 mt-3">
<a href="${archiveHref}" target="_blank" rel="noopener" class="btn btn-success btn-sm">
Open the Archive
</a>
<a href="${originalHref}" target="_blank" rel="noopener" class="btn btn-primary btn-sm">
Original Source
</a>
</div>
</div>
`;
</div>
`;
container.appendChild(col);
container.appendChild(col);
});
}
function updateCount(shown, total) {
const badge = document.getElementById('article-count');
badge.textContent = shown === total
? `${total} article`
: `${shown} from ${total} article`;
}
function filterArticles(query) {
const q = query.trim().toLowerCase();
if (!q) {
renderArticles(allArticles);
updateCount(allArticles.length, allArticles.length);
return;
}
const filtered = allArticles.filter(a =>
(a.title || "").toLowerCase().includes(q) ||
(a.content || "").toLowerCase().includes(q)
);
renderArticles(filtered);
updateCount(filtered.length, allArticles.length);
}
async function loadData() {
const loading = document.getElementById('loading');
try {
const res = await fetch('./cnn_results.json');
if (!res.ok) {
throw new Error(`HTTP ${res.status}`);
}
const data = await res.json();
allArticles = Array.isArray(data) ? data : [];
allArticles = [...allArticles].reverse();
loading.classList.add('d-none');
renderArticles(allArticles);
updateCount(allArticles.length, allArticles.length);
document.getElementById('search-input').addEventListener('input', (e) => {
filterArticles(e.target.value);
});
} catch (err) {
loading.classList.add('d-none');
document.getElementById('news-container').innerHTML = `
<div class="alert alert-danger">
Failed to load data in json (python -m http.server)
Failed to load cnn_results.json. Makesure the local server run
(example: <code>python -m http.server</code>).
</div>
`;
console.error(err);