AI ASSISTANT
ANOTHER! .. Code Study of the Day!
CRUD for MANAGE "CONCERNED" Posts

on

➕ Add / Manage Items

Loading...


    SOURCE CODE

    <style>
            * {
                    box-sizing: border-box;
            }
            #cklist-app {
                    font-family: Arial, sans-serif;
                    font-size: 0.95rem;
                    max-width: 860px;
                    margin: 0 auto;
            }
            /* CRUD panel */
            #cklist-crud {
                    background: #f0f4ff;
                    border: 1px solid #c5d0f0;
                    border-radius: 12px;
                    padding: 14px 16px;
                    margin-bottom: 14px;
            }
            #cklist-crud h3 {
                    margin: 0 0 10px 0;
                    font-size: 1rem;
                    color: #1a1a2e;
            }
            #cklist-add-row {
                    display: flex;
                    gap: 8px;
                    flex-wrap: wrap;
            }
            #cklist-input {
                    flex: 1;
                    min-width: 200px;
                    padding: 7px 12px;
                    border: 1px solid #b0bce8;
                    border-radius: 20px;
                    font-size: 0.9rem;
            }
            #cklist-add-btn {
                    background: #28a745;
                    color: #fff;
                    border: none;
                    padding: 7px 18px;
                    border-radius: 20px;
                    cursor: pointer;
                    font-size: 0.88rem;
                    font-weight: 600;
            }
            #cklist-add-btn:hover {
                    background: #218838;
            }
            /* toolbar */
            #ck-toolbar {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    flex-wrap: wrap;
                    margin-bottom: 10px;
            }
            #ck-status {
                    color: #555;
                    font-size: 0.85rem;
            }
            #ck-reset {
                    background: #e74c3c;
                    color: #fff;
                    border: none;
                    padding: 5px 14px;
                    border-radius: 20px;
                    cursor: pointer;
                    font-size: 0.82rem;
            }
            #ck-reset:hover {
                    background: #c0392b;
            }
            #ck-export {
                    background: #0066cc;
                    color: #fff;
                    border: none;
                    padding: 5px 14px;
                    border-radius: 20px;
                    cursor: pointer;
                    font-size: 0.82rem;
            }
            #ck-export:hover {
                    background: #004c99;
            }
            /* list */
            #cklist-ul {
                    list-style: none;
                    padding: 0;
                    margin: 0;
            }
            #cklist-ul li {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    padding: 5px 2px;
                    border-bottom: 1px solid #eee;
            }
            #cklist-ul li:last-child {
                    border-bottom: none;
            }
            #cklist-ul li input[type="checkbox"] {
                    flex-shrink: 0;
                    width: 15px;
                    height: 15px;
                    cursor: pointer;
                    accent-color: #0066cc;
            }
            #cklist-ul li .ck-link {
                    flex: 1;
                    word-break: break-all;
                    color: #0066cc;
                    text-decoration: none;
            }
            #cklist-ul li .ck-link:visited {
                    color: #7b2fbe;
            }
            #cklist-ul li.ck-done .ck-link {
                    text-decoration: line-through;
                    opacity: 0.5;
            }
            #cklist-ul li .ck-edit-input {
                    flex: 1;
                    padding: 4px 8px;
                    border: 1px solid #aac;
                    border-radius: 6px;
                    font-size: 0.9rem;
            }
            /* action buttons per row */
            #cklist-ul li .ck-btn-edit {
                    background: #f0a500;
                    color: #fff;
                    border: none;
                    padding: 3px 10px;
                    border-radius: 12px;
                    cursor: pointer;
                    font-size: 0.78rem;
            }
            #cklist-ul li .ck-btn-edit:hover {
                    background: #c88400;
            }
            #cklist-ul li .ck-btn-save {
                    background: #28a745;
                    color: #fff;
                    border: none;
                    padding: 3px 10px;
                    border-radius: 12px;
                    cursor: pointer;
                    font-size: 0.78rem;
            }
            #cklist-ul li .ck-btn-save:hover {
                    background: #218838;
            }
            #cklist-ul li .ck-btn-del {
                    background: #e74c3c;
                    color: #fff;
                    border: none;
                    padding: 3px 10px;
                    border-radius: 12px;
                    cursor: pointer;
                    font-size: 0.78rem;
            }
            #cklist-ul li .ck-btn-del:hover {
                    background: #c0392b;
            }
    </style>

    <div id="cklist-app">
            <!-- CRUD: Add -->
            <div id="cklist-crud">
                    <h3>&#10133; Add / Manage Items</h3>
                    <div id="cklist-add-row">
                            <input id="cklist-input" type="text" placeholder="Paste URL here..." />
                            <button id="cklist-add-btn">Add</button>
                    </div>
            </div>

            <!-- Toolbar -->
            <div id="ck-toolbar">
                    <span id="ck-status">Loading...</span>
                    <button id="ck-reset">&#10006; Reset Ticks</button>
                    <button id="ck-export">&#128190; Export JSON</button>
            </div>

            <!-- List (rendered by JS) -->
            <ul id="cklist-ul"></ul>
    </div>

    <script>
            (function () {
                    var STORE_KEY = "ck_checklist_v2";

                    var DEFAULTS = [
                            "https://ronin-manu.blogspot.com/2026/02/chat-gpt-types-of-ports-device.html",
                            "https://ronin-manu.blogspot.com/2026/02/this-is-html-source-code-for-your.html",
                            "https://ronin-manu.blogspot.com/2026/02/summary-of-my-bullseye-of-day.html",
                            "https://ronin-manu.blogspot.com/2026/02/co-pilot.html",
                            "https://ronin-manu.blogspot.com/2026/02/add-loading-bar-code.html",
                            "https://ronin-manu.blogspot.com/2026/02/draft-part3-mempelajari-based-on.html",
                            "https://ronin-manu.blogspot.com/2026/02/blogger-code-comparison-scrollable.html",
                            "https://ronin-manu.blogspot.com/2026/02/mempelajari-based-on-frequent-use.html",
                    ];

                    // DB structure: { items: [{url, checked}] }
                    function loadDB() {
                            try {
                                    var d = JSON.parse(localStorage.getItem(STORE_KEY));
                                    if (d && Array.isArray(d.items)) return d;
                            } catch (e) {}
                            // First load — seed defaults
                            return {
                                    items: DEFAULTS.map(function (u) {
                                            return { url: u, checked: false };
                                    }),
                            };
                    }

                    function saveDB(db) {
                            localStorage.setItem(STORE_KEY, JSON.stringify(db));
                    }

                    function updateStatus() {
                            var db = loadDB();
                            var total = db.items.length;
                            var ticked = db.items.filter(function (i) {
                                    return i.checked;
                            }).length;
                            var el = document.getElementById("ck-status");
                            if (el) el.textContent = "\u2713 " + ticked + " / " + total + " ticked";
                    }

                    function render() {
                            var db = loadDB();
                            var ul = document.getElementById("cklist-ul");
                            ul.innerHTML = "";
                            db.items.forEach(function (item, idx) {
                                    var li = document.createElement("li");
                                    if (item.checked) li.classList.add("ck-done");

                                    // Checkbox
                                    var cb = document.createElement("input");
                                    cb.type = "checkbox";
                                    cb.checked = item.checked;
                                    cb.addEventListener("change", function () {
                                            var d = loadDB();
                                            d.items[idx].checked = cb.checked;
                                            saveDB(d);
                                            li.classList.toggle("ck-done", cb.checked);
                                            updateStatus();
                                    });

                                    // Link
                                    var a = document.createElement("a");
                                    a.href = item.url;
                                    a.target = "_blank";
                                    a.className = "ck-link";
                                    a.textContent = item.url;

                                    // Edit button
                                    var btnEdit = document.createElement("button");
                                    btnEdit.className = "ck-btn-edit";
                                    btnEdit.textContent = "Edit";
                                    btnEdit.addEventListener("click", function () {
                                            // Replace link with input
                                            var inp = document.createElement("input");
                                            inp.type = "text";
                                            inp.className = "ck-edit-input";
                                            inp.value = item.url;
                                            li.replaceChild(inp, a);
                                            btnEdit.style.display = "none";
                                            btnSave.style.display = "";
                                            inp.focus();
                                    });

                                    // Save button (hidden initially)
                                    var btnSave = document.createElement("button");
                                    btnSave.className = "ck-btn-save";
                                    btnSave.textContent = "Save";
                                    btnSave.style.display = "none";
                                    btnSave.addEventListener("click", function () {
                                            var inp = li.querySelector(".ck-edit-input");
                                            var newUrl = inp ? inp.value.trim() : "";
                                            if (!newUrl) {
                                                    alert("URL cannot be empty.");
                                                    return;
                                            }
                                            var d = loadDB();
                                            d.items[idx].url = newUrl;
                                            saveDB(d);
                                            render();
                                            updateStatus();
                                    });

                                    // Delete button
                                    var btnDel = document.createElement("button");
                                    btnDel.className = "ck-btn-del";
                                    btnDel.textContent = "Del";
                                    btnDel.addEventListener("click", function () {
                                            if (!confirm("Delete this item?")) return;
                                            var d = loadDB();
                                            d.items.splice(idx, 1);
                                            saveDB(d);
                                            render();
                                            updateStatus();
                                    });

                                    li.appendChild(cb);
                                    li.appendChild(a);
                                    li.appendChild(btnEdit);
                                    li.appendChild(btnSave);
                                    li.appendChild(btnDel);
                                    ul.appendChild(li);
                            });
                            updateStatus();
                    }

                    // Add new item
                    document.getElementById("cklist-add-btn").addEventListener("click", function () {
                            var inp = document.getElementById("cklist-input");
                            var url = inp.value.trim();
                            if (!url) {
                                    alert("Please enter a URL.");
                                    return;
                            }
                            var d = loadDB();
                            // Prevent duplicates
                            var exists = d.items.some(function (i) {
                                    return i.url === url;
                            });
                            if (exists) {
                                    alert("This URL already exists in the list.");
                                    return;
                            }
                            d.items.push({ url: url, checked: false });
                            saveDB(d);
                            inp.value = "";
                            render();
                    });

                    // Allow Enter key to add
                    document.getElementById("cklist-input").addEventListener("keydown", function (e) {
                            if (e.key === "Enter") document.getElementById("cklist-add-btn").click();
                    });

                    // Reset ticks only (keep items)
                    document.getElementById("ck-reset").addEventListener("click", function () {
                            if (!confirm("Reset all tick states? Items will be kept.")) return;
                            var d = loadDB();
                            d.items.forEach(function (i) {
                                    i.checked = false;
                            });
                            saveDB(d);
                            render();
                    });

                    // Export JSON
                    document.getElementById("ck-export").addEventListener("click", function () {
                            var db = loadDB();
                            var blob = new Blob([JSON.stringify(db, null, 2)], { type: "application/json" });
                            var url = URL.createObjectURL(blob);
                            var a = document.createElement("a");
                            a.href = url;
                            a.download = "checklist.json";
                            a.click();
                            URL.revokeObjectURL(url);
                    });

                    // Boot
                    if (document.readyState === "loading") {
                            document.addEventListener("DOMContentLoaded", render);
                    } else {
                            render();
                    }
            })();
    </script>

    Comments

    Post a Comment