555 lines
27 KiB
Plaintext
555 lines
27 KiB
Plaintext
@{
|
|
ViewBag.title = "Daftar Artikel";
|
|
ViewBag.menu = "Artikel";
|
|
}
|
|
|
|
|
|
<!-- List Article -->
|
|
<div class="container">
|
|
<div class="row mt-5">
|
|
<div class="col">
|
|
<div class="blog-posts">
|
|
<div class="text-center mb-5">
|
|
<h1 class="fw-bold mb-2">Artikel Lingkungan Hidup</h1>
|
|
<p class="fs-6">Ikuti program, kegiatan, dan informasi terbaru tentang Dinas Lingkungan Hidup
|
|
Provinsi DKI
|
|
Jakarta</p>
|
|
</div>
|
|
<!--
|
|
Max Character Title: 78 Char (3 Lines)
|
|
Max Character Description: 119 Char (3 Lines)
|
|
-->
|
|
<div id="placeholder" class="row">
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<article class="border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative placeholder-glow">
|
|
<a href="#" class="ratio ratio-16x9 placeholder rounded-4 text-dark">
|
|
<div class="rounded-4" style="object-fit: cover"></div>
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="placeholder col-6"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content placeholder-glow">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-0 placeholder col-10"></h2>
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-2 mb-3 placeholder col-12"></h2>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12 mb-2"></p>
|
|
<p class="text-break overflow-ellipsis-3 placeholder col-12"></p>
|
|
|
|
<div class="post-meta placeholder-glow">
|
|
<div class="d-flex align-items-center">
|
|
<div class="placeholder rounded-circle me-1" style="width: 30px; height: 30px;">
|
|
</div>
|
|
<a href="#" class="fw-semibold placeholder col-4 ms-1 text-dark"></a><span
|
|
class="ms-2 placeholder col-3"></span>
|
|
<div class="ms-2 placeholder col-3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<div id="list-article" class="row">
|
|
</div>
|
|
|
|
<button id="muat-lebih-banyak" type="button" onclick=loadMore() class="btn btn-success d-block mx-auto">Muat Lebih
|
|
Banyak</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const data = [
|
|
{
|
|
"id": 1,
|
|
"title": "Manfaat Meditasi untuk Kesehatan Mental",
|
|
"description": "Menjelajahi manfaat meditasi dalam meningkatkan kesehatan mental dan kebahagiaan sehari-hari.",
|
|
"image": "650x700",
|
|
"badge": "health",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 2,
|
|
"title": "Inovasi Terbaru dalam Teknologi Gadget",
|
|
"description": "Mengulas perkembangan terkini dalam dunia teknologi gadget dan perangkat pintar.",
|
|
"image": "600x550",
|
|
"badge": "technology",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 3,
|
|
"title": "Tips Efektif Mengelola Waktu di Era Digital",
|
|
"description": "Memberikan strategi praktis untuk mengoptimalkan pengelolaan waktu dalam rutinitas harian.",
|
|
"image": "700x600",
|
|
"badge": "productivity",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 4,
|
|
"title": "Mengenal Kesehatan Jantung: Fakta dan Mitos",
|
|
"description": "Memisahkan fakta dari mitos seputar kesehatan jantung untuk hidup yang lebih sehat.",
|
|
"image": "750x550",
|
|
"badge": "health",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 5,
|
|
"title": "Belajar Bahasa Asing: Panduan untuk Pemula",
|
|
"description": "Langkah-langkah praktis untuk memulai perjalanan belajar bahasa asing dengan sukses.",
|
|
"image": "800x600",
|
|
"badge": "education",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 6,
|
|
"title": "Keajaiban Alam Semesta: Lubang Hitam dan Galaksi",
|
|
"description": "Eksplorasi fenomena alam semesta, dari lubang hitam hingga keindahan galaksi.",
|
|
"image": "720x480",
|
|
"badge": "science",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 7,
|
|
"title": "Resep Sehat dan Lezat untuk Sarapan Pagi",
|
|
"description": "Ide-ide resep sarapan yang sehat dan lezat untuk memulai hari dengan energi.",
|
|
"image": "600x700",
|
|
"badge": "food",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 8,
|
|
"title": "Cara Efektif Menangani Stres di Tempat Kerja",
|
|
"description": "Strategi untuk mengatasi stres di lingkungan kerja dan meningkatkan kesejahteraan.",
|
|
"image": "650x600",
|
|
"badge": "health",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 9,
|
|
"title": "Teknologi Blockchain: Masa Depan Keamanan Digital",
|
|
"description": "Mengulas konsep blockchain dan dampaknya pada keamanan digital di era modern.",
|
|
"image": "700x550",
|
|
"badge": "technology",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 10,
|
|
"title": "Seni Digital: Eksplorasi Kreativitas di Era Digital",
|
|
"description": "Menjelajahi dunia seni digital dan cara teknologi memengaruhi kreativitas seniman.",
|
|
"image": "720x620",
|
|
"badge": "art",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 11,
|
|
"title": "Pentingnya Hidrasi: Manfaat Air Putih untuk Tubuh",
|
|
"description": "Mendiskusikan manfaat kesehatan dari minum air putih secara cukup setiap hari.",
|
|
"image": "700x600",
|
|
"badge": "health",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 12,
|
|
"title": "Serunya Bersepeda: Aktivitas Olahraga yang Menyenangkan",
|
|
"description": "Mengajak pembaca untuk menikmati manfaat olahraga sepeda dan tips memilih sepeda yang tepat.",
|
|
"image": "650x550",
|
|
"badge": "sport",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 13,
|
|
"title": "Cara Membuat Smoothie Sehat dan Bergizi",
|
|
"description": "Berbagai resep smoothie yang lezat dan menyehatkan untuk dinikmati di pagi hari atau sebagai camilan.",
|
|
"image": "750x700",
|
|
"badge": "food",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 14,
|
|
"title": "Exploring the Wonders of Deep Sea Creatures",
|
|
"description": "Discovering the fascinating world of deep-sea creatures and their unique adaptations.",
|
|
"image": "720x480",
|
|
"badge": "science",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 15,
|
|
"title": "Strategi Sukses dalam Belajar Online",
|
|
"description": "Memberikan tips dan trik untuk sukses dalam pembelajaran online dan meningkatkan produktivitas belajar.",
|
|
"image": "600x650",
|
|
"badge": "education",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 16,
|
|
"title": "Menjadi Pekerja Lebih Fleksibel: Keuntungan dan Tips",
|
|
"description": "Mengulas manfaat menjadi pekerja yang lebih fleksibel dan cara mencapainya dalam lingkungan kerja.",
|
|
"image": "700x600",
|
|
"badge": "career",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 17,
|
|
"title": "Perjalanan Kuliner: Menikmati Kelezatan Makanan Lokal",
|
|
"description": "Menjelajahi aneka makanan lokal yang lezat dan menggugah selera dari berbagai penjuru dunia.",
|
|
"image": "800x600",
|
|
"badge": "food",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 18,
|
|
"title": "Mengapa Kucing adalah Hewan Peliharaan yang Menyenangkan",
|
|
"description": "Mendiskusikan pesona dan manfaat memiliki kucing sebagai hewan peliharaan.",
|
|
"image": "650x550",
|
|
"badge": "pets",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 19,
|
|
"title": "Cara Memulai Usaha Kecil yang Sukses",
|
|
"description": "Panduan langkah demi langkah untuk memulai usaha kecil dengan sukses dan berkembang.",
|
|
"image": "720x620",
|
|
"badge": "business",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 20,
|
|
"title": "Menjelajahi Keindahan Alam: Destinasi Wisata Outdoor",
|
|
"description": "Merinci destinasi wisata outdoor yang menawarkan pemandangan alam yang luar biasa dan petualangan seru.",
|
|
"image": "700x550",
|
|
"badge": "travel",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 21,
|
|
"title": "Tips Menata Ruang Kerja yang Nyaman di Rumah",
|
|
"description": "Memberikan saran tentang cara menciptakan ruang kerja yang nyaman dan produktif di rumah.",
|
|
"image": "700x600",
|
|
"badge": "home",
|
|
"color_badge": "#f39c12"
|
|
},
|
|
{
|
|
"id": 22,
|
|
"title": "Exploring the Marvels of Underwater Photography",
|
|
"description": "Discovering the art and challenges of capturing breathtaking moments through underwater photography.",
|
|
"image": "650x550",
|
|
"badge": "art",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 23,
|
|
"title": "Kiat Sukses dalam Menjalani Hidup Sehat",
|
|
"description": "Tips praktis untuk menjalani gaya hidup sehat dengan keseimbangan antara makanan, olahraga, dan istirahat.",
|
|
"image": "750x700",
|
|
"badge": "health",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 24,
|
|
"title": "Mengenal Budaya Teh: Sejarah dan Manfaatnya",
|
|
"description": "Menjelajahi sejarah teh dan berbagai budaya teh di seluruh dunia, serta manfaatnya untuk kesehatan.",
|
|
"image": "720x480",
|
|
"badge": "food",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 25,
|
|
"title": "Strategi Investasi untuk Pemula: Mulai Dengan Bijak",
|
|
"description": "Panduan langkah demi langkah untuk pemula dalam berinvestasi dan membangun portofolio keuangan yang kokoh.",
|
|
"image": "600x650",
|
|
"badge": "finance",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 26,
|
|
"title": "Panduan Membuat Kebun Sayur di Halaman Belakang",
|
|
"description": "Langkah-langkah praktis untuk memulai kebun sayur di halaman belakang rumah Anda.",
|
|
"image": "700x600",
|
|
"badge": "home",
|
|
"color_badge": "#27ae60"
|
|
},
|
|
{
|
|
"id": 27,
|
|
"title": "Mengenali Jenis-jenis Kucing yang Unik dan Langka",
|
|
"description": "Menjelajahi dunia kucing dengan merinci jenis-jenis kucing yang unik dan langka.",
|
|
"image": "800x600",
|
|
"badge": "pets",
|
|
"color_badge": "#e74c3c"
|
|
},
|
|
{
|
|
"id": 28,
|
|
"title": "Manfaat Seni Terapi: Melukis untuk Kesehatan Mental",
|
|
"description": "Mengulas bagaimana melukis dapat menjadi bentuk terapi untuk meningkatkan kesehatan mental.",
|
|
"image": "650x550",
|
|
"badge": "art",
|
|
"color_badge": "#9b59b6"
|
|
},
|
|
{
|
|
"id": 29,
|
|
"title": "Teknologi 5G: Revolusi Koneksi Internet",
|
|
"description": "Mendiskusikan dampak teknologi 5G dalam merubah cara kita terhubung dengan internet.",
|
|
"image": "720x620",
|
|
"badge": "technology",
|
|
"color_badge": "#3498db"
|
|
},
|
|
{
|
|
"id": 30,
|
|
"title": "Rahasia Rasa dalam Masakan Tradisional",
|
|
"description": "Mengungkap rahasia rasa dalam masakan tradisional dari berbagai belahan dunia.",
|
|
"image": "700x550",
|
|
"badge": "food",
|
|
"color_badge": "#e74c3c"
|
|
}
|
|
];
|
|
|
|
generateArticle(data)
|
|
@* countRPM() *@
|
|
|
|
function countRPM() {
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Menentukan jumlah kata dalam konten
|
|
const content = document.querySelector(".c-blog-detail__body");
|
|
const words = content.textContent.split(/\s+/).length;
|
|
|
|
// Menentukan jumlah gambar dalam konten
|
|
const images = document.querySelectorAll(".c-blog-detail__img img");
|
|
const imageCount = images.length;
|
|
|
|
// Menentukan waktu rata-rata untuk melihat setiap gambar (dalam detik)
|
|
const averageTimePerImage = 3; // Misalnya, anggap 5 detik per gambar
|
|
|
|
// Menentukan waktu baca per menit (biasanya 200-250 kata per menit)
|
|
const wordsPerMinute = 225;
|
|
|
|
// Menghitung estimasi waktu baca termasuk waktu untuk melihat gambar
|
|
const estimatedTime = Math.ceil(words / wordsPerMinute) + (imageCount * averageTimePerImage / 60);
|
|
|
|
// Menampilkan hasil di dalam elemen HTML
|
|
@* const timeElement = document.createElement("p");
|
|
timeElement.innerHTML = `Estimasi waktu baca: ${estimatedTime.toFixed(1)} menit`;
|
|
content.appendChild(timeElement); *@
|
|
|
|
console.log(estimatedTime.toFixed(1) + "menit");
|
|
});
|
|
}
|
|
|
|
function generateArticle(data) {
|
|
sliceData(data, 0, 6)
|
|
}
|
|
|
|
function sliceData(data, start, end) {
|
|
const newData = data.slice(start, end)
|
|
|
|
let articles = ""
|
|
|
|
for (const element of newData) {
|
|
articles += `
|
|
<div class="col-md-4">
|
|
<article class="post post-medium border-0 pb-0 mb-5">
|
|
<div class="post-image">
|
|
<div class="position-relative">
|
|
<a href="#" class="ratio ratio-16x9 rounded-4">
|
|
<img src="https://source.unsplash.com/random/${element.image}"
|
|
style="object-fit: cover" class="rounded-4" alt="${element.title}" loading="lazy" />
|
|
</a>
|
|
<div class="badges position-absolute" style="top: 4px; right:10px">
|
|
<span class="badge" style="background-color: ${element.color_badge}">${element.badge}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-content">
|
|
<h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2"><a href="blog-post.html"
|
|
class="text-break overflow-ellipsis-3">${element.title}</a>
|
|
</h2>
|
|
<p class="text-break overflow-ellipsis-3">
|
|
${element.description}
|
|
</p>
|
|
|
|
<div class="post-meta">
|
|
<span><img src="https://robohash.org/agung" class="bg-info rounded-circle me-1"
|
|
width="30" height="30" alt="Robohash"><a href="#" class="fw-semibold">Agung
|
|
Gumelar</a> • 20 Des 2023 </span>
|
|
<span><i class="far fa-clock"></i> 3 min baca</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
`
|
|
}
|
|
const container_post = document.querySelector("#list-article")
|
|
container_post.innerHTML = container_post.innerHTML + articles
|
|
}
|
|
|
|
function loadMore(value = 6) {
|
|
const sum = value
|
|
|
|
let articles = document.querySelectorAll("article.post")
|
|
|
|
sliceData(data, (articles.length), (articles.length + value))
|
|
|
|
if(document.querySelectorAll("article.post").length == data.length){
|
|
document.querySelector("#muat-lebih-banyak").remove()
|
|
}
|
|
}
|
|
</script> |