Beranda
Resource

List Project Script

Team Tokko
List Project Script Ala Template Tokko

Mohon Dibaca: Mohon Mengerti untuk penjelasan kami, Karna Post kami Split agar kalian dapat mengerti penjelasannya agar penempatan Script ini terstruktur sesuai dengan Peletakannya

Project ini menampilkan List Project yang menampilkan perubahan terbaru Project secara dinamis dari file JSON. Sistem ini dirancang untuk memberikan notifikasi pembaruan dan tampilan riwayat Project yang rapi dan terstruktur.

Fitur Utama

1. Tampilan Project Dinamis

  • Mengambil data Project dari file JSON dan membuat konten HTML secara dinamis.
  • Setiap Project ditampilkan dengan informasi penting seperti nama, versi, pengembang, deskripsi, dan link Project.
  • Mempermudah dalam mengecek update terbaru dengan menampilkan Card Project untuk pemantauan yang lebih cepat.

2. Notifikasi Badge Pembaruan Terbaru

  • Mendeteksi pembaruan terbaru (dalam 7 hari terakhir) dan mengumpulkannya dalam notifikasi.
  • Menampilkan badge jika ada pembaruan baru, yang menandakan jumlah pembaruan terbaru.
  • Memudahkan pengguna tetap terinformasi tentang perubahan terbaru Project.

3. Drawer Interaktif untuk Melihat Pembaruan

  • Menerapkan sistem drawer interaktif untuk menampilkan riwayat pembaruan lengkap per Project.
  • Dapat mengklik "Lihat lebih banyak" untuk membuka drawer dan melihat semua pembaruan untuk Project tertentu.
  • Drawer tambahan menampilkan pembaruan terbaru dari berbagai Project, yang dikelompokkan berdasarkan nama Project dan tanggal, memudahkan akses cepat ke semua perubahan terbaru.

4. Interaksi Responsif

  • Memastikan pengalaman yang lancar dengan mengelola event klik:
  • Menutup drawer saat mengklik di luar area aktif.
  • Mencegah drawer tertutup saat sedang mencari di dalamnya, memungkinkan penelusuran pembaruan tanpa gangguan.
List Project Script Ala Template Tokko

Selamat Datang ... 😁!! Selamat Memcoba Untuk List Project Script ini, Mohon untuk Sampaikan sesuatu jika kamu menemukan #BUG pada List Project Script dan apa aja sih didalamnya, berikut Listnya:

  1. Script
  2. CSS
  3. Data.Json
  4. HTML
  5. Demo (Halaman Akhir)

Source:
https://template-tokko.blogspot.com

Script

Simpan Script dibawah ini diatas </body> Dan tidak perlu menambahkan Jquery pada kode </head>

Minify JS

 <script type="text/javascript"> 
     /*<![CDATA[*/
    function openDrawer(e){let t=document.getElementById("update-drawer");document.getElementById("drawer-content").innerHTML=e.updates.map(e=>`
        <div class="update">${e.date}: ${e.description}</div>
    `).join(""),t.classList.add("visible")}function closeDrawer(){document.getElementById("update-drawer").classList.remove("visible")}function showRecentUpdates(e){let t=document.getElementById("recent-updates-content"),a=document.getElementById("update-count"),n=document.getElementById("recent-update-badge");a.innerText=e.length,e.length>0&&(n.style.display="inline-block"),t.innerHTML="";let d=e.reduce((e,t)=>(e[t.projectName]||(e[t.projectName]=[]),e[t.projectName].push(t),e),{});for(let[r,s]of Object.entries(d)){let i=s.reduce((e,t)=>{let a=new Date(t.date).toLocaleDateString();return e[a]||(e[a]=[]),e[a].push(t.description),e},{});for(let[c,l]of Object.entries(i))t.innerHTML+=`
                <h3>${r}</h3>
                <h4>${c}</h4>
                <div>${l.join("<br>")}</div>
            `}document.getElementById("recent-updates-drawer").classList.add("visible");document.querySelectorAll(".recent-update").forEach(e=>{e.addEventListener("click",()=>{markAsRead(e.getAttribute("data-date"))})})}function markAsRead(e){let t=JSON.parse(localStorage.getItem("readUpdates"));t||(t=[]),t.includes(e)||(t.push(e),localStorage.setItem("readUpdates",JSON.stringify(t))),closeRecentDrawer()}function closeRecentDrawer(){document.getElementById("recent-updates-drawer").classList.remove("visible")}document.addEventListener("DOMContentLoaded",()=>{fetch("data.json").then(e=>e.json()).then(e=>{let t=document.getElementById("projects"),a=new Date,n=[];e.forEach(e=>{let d=document.createElement("div");d.classList.add("project-card"),d.innerHTML=`
                          <a href="${e.link}" title="${e.name}">
                      <img src="${e.image}" alt="${e.name}">
                    </a>
                    <div class="project-name">${e.name}</div>
                    <div class="project-version">Versi: ${e.version}</div>
                    <div class="project-developer">Dikembangkan oleh: ${e.developer}</div>
                    <div class="project-description">${e.description}</div>
                    <div class="project-details">Unduhan: ${e.downloads}</div>
                    <div class="updates">
                        <strong>Daftar Pembaruan:</strong>
                        <div class="update">${e.updates[0].date}: ${e.updates[0].description}</div>
                        <button class="see-more" data-id="${e.id}">Lihat lebih banyak pembaruan</button>
                    </div>
                `,t.appendChild(d),e.updates.forEach(t=>{let d=new Date(t.date);(a-d)/864e5<=7&&n.push({projectName:e.name,description:t.description,date:t.date})})}),n.length>0&&(document.getElementById("update-count-badge").innerText=n.length);document.querySelectorAll(".see-more").forEach(t=>{t.addEventListener("click",a=>{a.stopPropagation();let n=t.getAttribute("data-id");openDrawer(e.find(e=>e.id==n))})}),document.getElementById("close-drawer").addEventListener("click",()=>{closeDrawer()}),document.getElementById("close-recent-drawer").addEventListener("click",()=>{closeRecentDrawer()}),document.getElementById("recent-update-badge").addEventListener("click",()=>{showRecentUpdates(n)}),document.addEventListener("click",e=>{let t=document.getElementById("recent-updates-drawer"),a=document.getElementById("update-drawer"),n=t.classList.contains("visible"),d=a.classList.contains("visible");!n||t.contains(e.target)||document.getElementById("recent-update-badge").contains(e.target)||closeRecentDrawer(),d&&!a.contains(e.target)&&closeDrawer()})}).catch(e=>console.error("Error fetching data:",e))});
/*]]>*/
</script>

Non Minify Script

<script type="text/javascript"> 
     /*<![CDATA[*/
function openDrawer(e) {
    let t = document.getElementById("update-drawer"),
        a = document.getElementById("drawer-content");
    (a.innerHTML = e.updates
        .map(
            (e) => `
        <div class="update">${e.date}: ${e.description}</div>
    `
        )
        .join("")),
        t.classList.add("visible");
}
function closeDrawer() {
    let e = document.getElementById("update-drawer");
    e.classList.remove("visible");
}
function showRecentUpdates(e) {
    let t = document.getElementById("recent-updates-content"),
        a = document.getElementById("update-count"),
        n = document.getElementById("recent-update-badge");
    (a.innerText = e.length), e.length > 0 && (n.style.display = "inline-block"), (t.innerHTML = "");
    let d = e.reduce((e, t) => (e[t.projectName] || (e[t.projectName] = []), e[t.projectName].push(t), e), {});
    for (let [r, s] of Object.entries(d)) {
        let i = s.reduce((e, t) => {
            let a = new Date(t.date).toLocaleDateString();
            return e[a] || (e[a] = []), e[a].push(t.description), e;
        }, {});
        for (let [c, l] of Object.entries(i))
            t.innerHTML += `
                <h3>${r}</h3>
                <h4>${c}</h4>
                <div>${l.join("<br>")}</div>
            `;
    }
    document.getElementById("recent-updates-drawer").classList.add("visible");
    let o = document.querySelectorAll(".recent-update");
    o.forEach((e) => {
        e.addEventListener("click", () => {
            let t = e.getAttribute("data-date");
            markAsRead(t);
        });
    });
}
function markAsRead(e) {
    let t = JSON.parse(localStorage.getItem("readUpdates"));
    t || (t = []), t.includes(e) || (t.push(e), localStorage.setItem("readUpdates", JSON.stringify(t))), closeRecentDrawer();
}
function closeRecentDrawer() {
    let e = document.getElementById("recent-updates-drawer");
    e.classList.remove("visible");
}
document.addEventListener("DOMContentLoaded", () => {
    
  // contoh : https://raw.githubusercontent.com/xxxxxxxx/xxxxxxxx/refs/heads/main/List%20project%20code/data.json
  
  fetch("data.json")
        .then((e) => e.json())
        .then((e) => {
            let t = document.getElementById("projects"),
                a = new Date(),
                n = [];
            if (
                (e.forEach((e) => {
                    let d = document.createElement("div");
                    d.classList.add("project-card"),
                        (d.innerHTML = `
                          <a href="${e.link}" title="${e.name}">
                      <img src="${e.image}" alt="${e.name}">
                    </a>
                    <div class="project-name">${e.name}</div>
                    <div class="project-version">Versi: ${e.version}</div>
                    <div class="project-developer">Dikembangkan oleh: ${e.developer}</div>
                    <div class="project-description">${e.description}</div>
                    <div class="project-details">Unduhan: ${e.downloads}</div>
                    <div class="updates">
                        <strong>Daftar Pembaruan:</strong>
                        <div class="update">${e.updates[0].date}: ${e.updates[0].description}</div>
                        <button class="see-more" data-id="${e.id}">Lihat lebih banyak pembaruan</button>
                    </div>
                `),
                        t.appendChild(d),
                        e.updates.forEach((t) => {
                            let d = new Date(t.date),
                                r = a - d,
                                s = r / 864e5;
                            s <= 7 && n.push({ projectName: e.name, description: t.description, date: t.date });
                        });
                }),
                n.length > 0)
            ) {
                let d = document.getElementById("update-count-badge");
                d.innerText = n.length;
            }
            let r = document.querySelectorAll(".see-more");
            r.forEach((t) => {
                t.addEventListener("click", (a) => {
                    a.stopPropagation();
                    let n = t.getAttribute("data-id");
                    openDrawer(e.find((e) => e.id == n));
                });
            }),
                document.getElementById("close-drawer").addEventListener("click", () => {
                    closeDrawer();
                }),
                document.getElementById("close-recent-drawer").addEventListener("click", () => {
                    closeRecentDrawer();
                }),
                document.getElementById("recent-update-badge").addEventListener("click", () => {
                    showRecentUpdates(n);
                }),
                document.addEventListener("click", (e) => {
                    let t = document.getElementById("recent-updates-drawer"),
                        a = document.getElementById("update-drawer"),
                        n = t.classList.contains("visible"),
                        d = a.classList.contains("visible");
                    !n || t.contains(e.target) || document.getElementById("recent-update-badge").contains(e.target) || closeRecentDrawer(), d && !a.contains(e.target) && closeDrawer();
                });
        })
        .catch((e) => console.error("Error fetching data:", e));
});
  /*]]>*/
    </script>

DATA JSON

Pasang code dibawah ini pada Github kamu, Klik "View" pada github kamu dan ambil Link URL seperti: https://raw.githubusercontent.com/xxxxxx/xxxxxxxxx/refs/heads/main/List%20project%20code/data.json

[
    {
        "id": 1,
        "name": "Proyek A",
        "version": "1.0.0",
        "updates": [
            {
                "date": "2024-10-01",
                "description": "Initial release."
            },
            {
                "date": "2024-11-01",
                "description": "Bug fixes and performance improvements."
            },
            {
                "date": "2024-11-05",
                "description": "Added new features."
            },
            {
                "date": "2024-11-10",
                "description": "Improved performance."
            }
        ],
        "description": "Proyek A adalah aplikasi yang memudahkan pengguna untuk mengelola tugas sehari-hari.",
        "developer": "Pengembang A",
        "downloads": "100K",
        "link": "#LINK KAMU",
        "image": "#YOUR IMAGES"
    },
    {
        "id": 2,
        "name": "Proyek B",
        "version": "2.1.3",
        "updates": [
            {
                "date": "2024-10-05",
                "description": "Added new features."
            },
            {
                "date": "2024-10-20",
                "description": "Improved user interface."
            },
            {
                "date": "2024-11-02",
                "description": "Fixed minor bugs."
            },
            {
                "date": "2024-11-03",
                "description": "Updated user experience."
            },
            {
                "date": "2024-11-04",
                "description": "Optimized app performance."
            }
        ],
        "description": "Proyek B adalah aplikasi inovatif untuk belajar bahasa.",
        "developer": "Pengembang B",
        "downloads": "250K",
        "link": "#LINK KAMU",
        "image": "#YOUR IMAGES"
    }
]

CSS stylesheet

Simpan CSS Stylesheet dibawah ini dan simpan tepat diatas ]]></b:skin>


/*partial styles.css*/

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.project-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 15px;
    transition: transform 0.2s;
}

.project-card:hover {
    transform: scale(1.05);
}

.project-card img {
    width: 100%;
    border-radius: 5px;
}

.project-name {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}

.project-version {
    font-size: 14px;
    color: #007BFF;
}

.project-developer {
    font-size: 14px;
    color: #555;
}

.project-description {
    font-size: 12px;
    color: #666;
    margin: 10px 0;
}

.project-details {
    font-size: 12px;
    color: #999;
}

.see-more {
    color: #007BFF;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 10px;
}

.drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 260px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y:auto
}

.drawer.visible {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.close-button {
    cursor: pointer;
    font-size: 20px;
}

.drawer-content {
    padding: 10px;
}

.badge {
    background-color: red;
    color: white;
    border-radius: 12px;
    padding: 5px 10px;
    font-size: 14px;
    margin-left: 5px;
}
.update-badge {
    background-color: #007BFF;
    color: white;
    border-radius: 12px;
    padding: 10px 15px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    margin: 20px auto;
    font-size: 16px;
}

.update-badge:hover {
    background-color: #0056b3;
}
]]></b:skin>

PROJECT HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Code</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="ccProject">
        <h1>Project Code </h1>
       
        <div id="recent-update-badge" class="update-badge"><span id="update-count-badge" class="badge"></span> Update Terbaru
        </div>
        
        <div id="projects" class="projects"></div>
    </div>
    <div id="recent-updates-drawer" class="drawer">
        <div class="drawer-header">
            <h2>Pembaruan Terbaru <span id="update-count" class="badge"></span></h2>
            <span id="close-recent-drawer" class="close-button">×</span>
        </div>
        <div id="recent-updates-content" class="drawer-content"></div>
    </div>
    <div id="update-drawer" class="drawer">
        <div class="drawer-header">
            <h2>Pembaruan Project</h2>
            <span id="close-drawer" class="close-button">×</span>
        </div>
        <div id="drawer-content" class="drawer-content"></div>
    </div>

    <script src="script.min.js"></script>
</body>
</html>

Demo

Selamat Datang di Template Tokko

Jika anda membutuhkan bantuan kami silahkan Hubungi kami Team Tokko Official atau membutuhkan bantuan lain seperti dibawah ini:

Posting Komentar



List Project Script https://template-tokko.blogspot.com/2025/01/list-project-javascript.html

Your Cart

Check Tema Lainnya
( 0 ) 0
Butuh Bantuan? Pesan Sekarang...