<h1>
PENDING TO DO PLANNING OF THIS WEEK! RE-ARRANGING FORMAT-CONTENT OF BLOGPOST OF ronin-manu.blogspot.com as of
April 29th, 2026
</h1>
<style>
* {
box-sizing: border-box;
}
#cklist-app {
font-family: Arial, sans-serif;
font-size: 0.95rem;
max-width: 900px;
margin: 0 auto;
}
/* ── panels ── */
.ck-panel {
background: #f0f4ff;
border: 1px solid #c5d0f0;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 12px;
}
.ck-panel h3 {
margin: 0 0 10px 0;
font-size: 1rem;
color: #1a1a2e;
}
/* ── category CRUD ── */
#ck-cat-list {
list-style: none;
padding: 0;
margin: 0 0 10px 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#ck-cat-list li {
display: flex;
align-items: center;
gap: 5px;
background: #fff;
border: 1px solid #dde3f5;
border-radius: 20px;
padding: 3px 10px;
font-size: 0.82rem;
}
.ck-cat-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.ck-cat-name-edit {
border: 1px solid #aac;
border-radius: 6px;
padding: 2px 6px;
font-size: 0.82rem;
width: 100px;
}
.ck-cat-color-edit {
width: 28px;
height: 22px;
border: none;
padding: 0;
cursor: pointer;
border-radius: 4px;
}
#ck-cat-add-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
#ck-cat-input {
flex: 1;
min-width: 140px;
padding: 6px 12px;
border: 1px solid #b0bce8;
border-radius: 20px;
font-size: 0.88rem;
}
#ck-cat-color {
width: 36px;
height: 32px;
border: none;
padding: 0;
cursor: pointer;
border-radius: 8px;
}
/* ── item CRUD ── */
#cklist-add-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
#cklist-input {
flex: 1;
min-width: 200px;
padding: 7px 12px;
border: 1px solid #b0bce8;
border-radius: 20px;
font-size: 0.9rem;
}
#cklist-cat-select {
padding: 6px 10px;
border: 1px solid #b0bce8;
border-radius: 20px;
font-size: 0.88rem;
background: #fff;
}
/* ── 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-filter-select {
padding: 5px 10px;
border: 1px solid #b0bce8;
border-radius: 20px;
font-size: 0.85rem;
background: #fff;
}
/* ── shared button styles ── */
.ck-btn {
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 0.82rem;
padding: 5px 14px;
color: #fff;
}
.ck-btn-green {
background: #28a745;
}
.ck-btn-green:hover {
background: #218838;
}
.ck-btn-red {
background: #e74c3c;
}
.ck-btn-red:hover {
background: #c0392b;
}
.ck-btn-blue {
background: #0066cc;
}
.ck-btn-blue:hover {
background: #004c99;
}
.ck-btn-orange {
background: #f0a500;
}
.ck-btn-orange:hover {
background: #c88400;
}
.ck-btn-sm {
border-radius: 12px;
padding: 3px 10px;
font-size: 0.78rem;
}
/* ── category group headers ── */
.ck-group-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 4px 4px;
font-weight: 700;
font-size: 0.88rem;
color: #1a1a2e;
border-bottom: 2px solid #e0e6ff;
margin-top: 10px;
}
.ck-group-header:first-child {
margin-top: 0;
}
.ck-group-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
/* ── list items ── */
#cklist-ul {
list-style: none;
padding: 0;
margin: 0;
}
#cklist-ul li {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 4px;
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;
}
.ck-badge {
flex-shrink: 0;
font-size: 0.7rem;
padding: 1px 7px;
border-radius: 10px;
color: #fff;
white-space: nowrap;
}
#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;
}
.ck-edit-cat-select {
padding: 3px 8px;
border: 1px solid #aac;
border-radius: 6px;
font-size: 0.82rem;
background: #fff;
}
</style>
<div id="cklist-app">
<!-- ── Category CRUD ── -->
<div class="ck-panel">
<h3>🏷 Categories</h3>
<ul id="ck-cat-list"></ul>
<div id="ck-cat-add-row">
<input id="ck-cat-input" type="text" placeholder="New category name..." />
<input id="ck-cat-color" type="color" value="#0066cc" title="Pick colour" />
<button class="ck-btn ck-btn-green" id="ck-cat-add-btn">+ Add Category</button>
</div>
</div>
<!-- ── Item CRUD ── -->
<div class="ck-panel">
<h3>➕ Add Item</h3>
<div id="cklist-add-row">
<input id="cklist-input" type="text" placeholder="Paste URL here..." />
<select id="cklist-cat-select"></select>
<button class="ck-btn ck-btn-green" id="cklist-add-btn">Add</button>
</div>
</div>
<!-- ── Toolbar ── -->
<div id="ck-toolbar">
<span id="ck-status">Loading...</span>
<label for="ck-filter-select" style="font-size: 0.85rem; color: #555">Filter:</label>
<select id="ck-filter-select"></select>
<button class="ck-btn ck-btn-red" id="ck-reset">✖ Reset Ticks</button>
<button class="ck-btn ck-btn-blue" id="ck-export">💾 Export JSON</button>
</div>
<!-- ── List ── -->
<ul id="cklist-ul"></ul>
</div>
<script>
(function () {
var STORE_KEY = "ck_checklist_v4";
var DEFAULT_CATS = [
{ id: "cat-p1", name: "NOT YET REPAIRED [PART-1]", color: "#e74c3c" },
{ id: "cat-p2", name: "NOT YET REPAIRED [PART-2]", color: "#f0a500" },
{ id: "cat-p3", name: "NOT YET REPAIRED [PART-3]", color: "#9b59b6" },
{ id: "cat-st", name: "STUDIES", color: "#0066cc" },
];
var DEFAULT_ITEMS = [
/* ── NOT YET REPAIRED [PART-1] ── */
{
url: "https://ronin-manu.blogspot.com/2025/12/perbandingan-software-automation.html",
catId: "cat-p1",
},
{
url: "https://ronin-manu.blogspot.com/2025/12/rotation-to-bi-directional.html",
catId: "cat-p1",
},
{ url: "https://ronin-manu.blogspot.com/2025/12/high-rev-engine.html", catId: "cat-p1" },
{
url: "https://ronin-manu.blogspot.com/2025/12/free-software-untuk-cooperating-dengan.html",
catId: "cat-p1",
},
{
url: "https://ronin-manu.blogspot.com/2025/12/chatgpt-ideal-ratio-length-width-height.html",
catId: "cat-p1",
},
{
url: "https://ronin-manu.blogspot.com/2025/12/chatgpt-explain-for-practicallity-of.html",
catId: "cat-p1",
},
{
url: "https://ronin-manu.blogspot.com/2025/12/berikut-tabel-perbandingan-kecepatan.html",
catId: "cat-p1",
},
{
url: "https://ronin-manu.blogspot.com/2025/12/docking-station-dan-dp-alt-mode.html",
catId: "cat-p1",
},
{
url: "https://ronin-manu.blogspot.com/2025/12/phone-gallery-nokia-3350-nokia-e61i.html",
catId: "cat-p1",
},
{
url: "https://ronin-manu.blogspot.com/2025/12/awesome-instantneous-of-day-android.html",
catId: "cat-p1",
},
{
url: "https://ronin-manu.blogspot.com/2026/04/list-of-need-to-be-repaired-posts.html",
catId: "cat-p1",
},
/* ── NOT YET REPAIRED [PART-2] ── */
{
url: "https://ronin-manu.blogspot.com/2026/02/chat-gpt-types-of-ports-device.html",
catId: "cat-p2",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/this-is-html-source-code-for-your.html",
catId: "cat-p2",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/summary-of-my-bullseye-of-day.html",
catId: "cat-p2",
},
{ url: "https://ronin-manu.blogspot.com/2026/02/co-pilot.html", catId: "cat-p2" },
{ url: "https://ronin-manu.blogspot.com/2026/02/add-loading-bar-code.html", catId: "cat-p2" },
{
url: "https://ronin-manu.blogspot.com/2026/02/draft-part3-mempelajari-based-on.html",
catId: "cat-p2",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/blogger-code-comparison-scrollable.html",
catId: "cat-p2",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/mempelajari-based-on-frequent-use.html",
catId: "cat-p2",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/thought-of-day-self-writing-system.html",
catId: "cat-p2",
},
/* ── NOT YET REPAIRED [PART-3] ── */
{
url: "https://ronin-manu.blogspot.com/2026/02/capenya-set-up-tenda-official-tiktok.html",
catId: "cat-p3",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/objective-spinning-as-fast-as-typhoon.html",
catId: "cat-p3",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/to-be-studied-scrollable-width-code-box.html",
catId: "cat-p3",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/visual-summary-code-block-architecture.html",
catId: "cat-p3",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/outer-code-container-style.html",
catId: "cat-p3",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/from-creator-of-dragon-ball.html",
catId: "cat-p3",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/the-best-menurut-gw-w-eb-f-ormatter.html",
catId: "cat-p3",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/free-apps-to-print-pdfs-from-chrome-on.html",
catId: "cat-p3",
},
{ url: "https://ronin-manu.blogspot.com/2026/02/source-tiktok.html", catId: "cat-p3" },
/* ── STUDIES ── */
{
url: "https://ronin-manu.blogspot.com/2026/02/to-be-studied-scrollable-width-code-box.html",
catId: "cat-st",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/visual-summary-code-block-architecture.html",
catId: "cat-st",
},
{
url: "https://ronin-manu.blogspot.com/2026/02/outer-code-container-style.html",
catId: "cat-st",
},
];
/* ── DB helpers ── */
function loadDB() {
try {
var d = JSON.parse(localStorage.getItem(STORE_KEY));
if (d && Array.isArray(d.items) && Array.isArray(d.categories)) return d;
} catch (e) {}
return {
categories: DEFAULT_CATS.map(function (c) {
return Object.assign({}, c);
}),
items: DEFAULT_ITEMS.map(function (i) {
return { url: i.url, catId: i.catId, checked: false };
}),
};
}
function saveDB(db) {
localStorage.setItem(STORE_KEY, JSON.stringify(db));
}
/* ── status bar ── */
function updateStatus() {
var db = loadDB();
var filterVal = document.getElementById("ck-filter-select").value;
var items =
filterVal === "__all__"
? db.items
: db.items.filter(function (i) {
return i.catId === filterVal;
});
var ticked = items.filter(function (i) {
return i.checked;
}).length;
var el = document.getElementById("ck-status");
if (el) el.textContent = "\u2713 " + ticked + " / " + items.length + " ticked";
}
/* ── populate <select> dropdowns ── */
function populateCatSelects(db) {
var selects = [
document.getElementById("cklist-cat-select"),
document.getElementById("ck-filter-select"),
];
selects.forEach(function (sel, si) {
if (!sel) return;
var prev = sel.value;
sel.innerHTML = "";
if (si === 1) {
var opt = document.createElement("option");
opt.value = "__all__";
opt.textContent = "All Categories";
sel.appendChild(opt);
}
db.categories.forEach(function (cat) {
var opt = document.createElement("option");
opt.value = cat.id;
opt.textContent = cat.name;
sel.appendChild(opt);
});
if (
prev &&
Array.from(sel.options).some(function (o) {
return o.value === prev;
})
) {
sel.value = prev;
}
});
}
/* ── render category CRUD list ── */
function renderCatList() {
var db = loadDB();
var ul = document.getElementById("ck-cat-list");
ul.innerHTML = "";
db.categories.forEach(function (cat, ci) {
var li = document.createElement("li");
var dot = document.createElement("span");
dot.className = "ck-cat-dot";
dot.style.background = cat.color;
var nameSpan = document.createElement("span");
nameSpan.textContent = cat.name;
nameSpan.style.fontWeight = "600";
var count = db.items.filter(function (i) {
return i.catId === cat.id;
}).length;
var countSpan = document.createElement("span");
countSpan.textContent = "(" + count + ")";
countSpan.style.color = "#888";
var btnEdit = document.createElement("button");
btnEdit.className = "ck-btn ck-btn-orange ck-btn-sm";
btnEdit.textContent = "Edit";
btnEdit.addEventListener("click", function () {
var nameInp = document.createElement("input");
nameInp.type = "text";
nameInp.className = "ck-cat-name-edit";
nameInp.value = cat.name;
var colorInp = document.createElement("input");
colorInp.type = "color";
colorInp.className = "ck-cat-color-edit";
colorInp.value = cat.color;
var btnSave = document.createElement("button");
btnSave.className = "ck-btn ck-btn-green ck-btn-sm";
btnSave.textContent = "Save";
btnSave.addEventListener("click", function () {
var newName = nameInp.value.trim();
if (!newName) {
alert("Name cannot be empty.");
return;
}
var d = loadDB();
d.categories[ci].name = newName;
d.categories[ci].color = colorInp.value;
saveDB(d);
renderCatList();
populateCatSelects(d);
render();
});
li.innerHTML = "";
li.appendChild(nameInp);
li.appendChild(colorInp);
li.appendChild(btnSave);
});
var btnDel = document.createElement("button");
btnDel.className = "ck-btn ck-btn-red ck-btn-sm";
btnDel.textContent = "Del";
btnDel.addEventListener("click", function () {
if (
!confirm(
'Delete category "' +
cat.name +
'"? Its items will move to the first remaining category.'
)
)
return;
var d = loadDB();
var fallback = d.categories.find(function (c) {
return c.id !== cat.id;
});
var fallbackId = fallback ? fallback.id : null;
d.items.forEach(function (item) {
if (item.catId === cat.id) item.catId = fallbackId;
});
d.categories.splice(ci, 1);
saveDB(d);
renderCatList();
populateCatSelects(d);
render();
});
li.appendChild(dot);
li.appendChild(nameSpan);
li.appendChild(countSpan);
li.appendChild(btnEdit);
li.appendChild(btnDel);
ul.appendChild(li);
});
}
/* ── render item list grouped by category ── */
function render() {
var db = loadDB();
var filterVal = document.getElementById("ck-filter-select").value;
var ul = document.getElementById("cklist-ul");
ul.innerHTML = "";
var catsToShow =
filterVal === "__all__"
? db.categories
: db.categories.filter(function (c) {
return c.id === filterVal;
});
catsToShow.forEach(function (cat) {
var catItems = db.items
.map(function (item, idx) {
return { item: item, idx: idx };
})
.filter(function (x) {
return x.item.catId === cat.id;
});
if (catItems.length === 0) return;
var header = document.createElement("li");
header.className = "ck-group-header";
var hdot = document.createElement("span");
hdot.className = "ck-group-dot";
hdot.style.background = cat.color;
header.appendChild(hdot);
header.appendChild(document.createTextNode(cat.name + " (" + catItems.length + ")"));
ul.appendChild(header);
catItems.forEach(function (x) {
var item = x.item;
var idx = x.idx;
var li = document.createElement("li");
if (item.checked) li.classList.add("ck-done");
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();
});
var badge = document.createElement("span");
badge.className = "ck-badge";
badge.style.background = cat.color;
badge.textContent = cat.name;
var a = document.createElement("a");
a.href = item.url;
a.target = "_blank";
a.className = "ck-link";
a.textContent = item.url;
var btnEdit = document.createElement("button");
btnEdit.className = "ck-btn ck-btn-orange ck-btn-sm";
btnEdit.textContent = "Edit";
var btnSave = document.createElement("button");
btnSave.className = "ck-btn ck-btn-green ck-btn-sm";
btnSave.textContent = "Save";
btnSave.style.display = "none";
btnEdit.addEventListener("click", function () {
var inp = document.createElement("input");
inp.type = "text";
inp.className = "ck-edit-input";
inp.value = item.url;
var catSel = document.createElement("select");
catSel.className = "ck-edit-cat-select";
var d0 = loadDB();
d0.categories.forEach(function (c) {
var o = document.createElement("option");
o.value = c.id;
o.textContent = c.name;
if (c.id === item.catId) o.selected = true;
catSel.appendChild(o);
});
li.replaceChild(inp, a);
li.replaceChild(catSel, badge);
btnEdit.style.display = "none";
btnSave.style.display = "";
inp.focus();
});
btnSave.addEventListener("click", function () {
var inp = li.querySelector(".ck-edit-input");
var catSel = li.querySelector(".ck-edit-cat-select");
var newUrl = inp ? inp.value.trim() : "";
if (!newUrl) {
alert("URL cannot be empty.");
return;
}
var d = loadDB();
d.items[idx].url = newUrl;
if (catSel) d.items[idx].catId = catSel.value;
saveDB(d);
renderCatList();
render();
});
var btnDel = document.createElement("button");
btnDel.className = "ck-btn ck-btn-red ck-btn-sm";
btnDel.textContent = "Del";
btnDel.addEventListener("click", function () {
if (!confirm("Delete this item?")) return;
var d = loadDB();
d.items.splice(idx, 1);
saveDB(d);
renderCatList();
render();
});
li.appendChild(cb);
li.appendChild(badge);
li.appendChild(a);
li.appendChild(btnEdit);
li.appendChild(btnSave);
li.appendChild(btnDel);
ul.appendChild(li);
});
});
updateStatus();
}
/* ── Add category ── */
document.getElementById("ck-cat-add-btn").addEventListener("click", function () {
var inp = document.getElementById("ck-cat-input");
var name = inp.value.trim();
if (!name) {
alert("Please enter a category name.");
return;
}
var color = document.getElementById("ck-cat-color").value;
var d = loadDB();
d.categories.push({ id: "cat-" + Date.now(), name: name, color: color });
saveDB(d);
inp.value = "";
renderCatList();
populateCatSelects(d);
});
/* ── Add 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 catSel = document.getElementById("cklist-cat-select");
var catId = catSel.value || null;
var d = loadDB();
if (
d.items.some(function (i) {
return i.url === url;
})
) {
alert("This URL already exists in the list.");
return;
}
d.items.push({ url: url, catId: catId, checked: false });
saveDB(d);
inp.value = "";
renderCatList();
render();
});
document.getElementById("cklist-input").addEventListener("keydown", function (e) {
if (e.key === "Enter") document.getElementById("cklist-add-btn").click();
});
/* ── Filter ── */
document.getElementById("ck-filter-select").addEventListener("change", render);
/* ── Reset ticks ── */
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 ── */
function boot() {
var db = loadDB();
populateCatSelects(db);
renderCatList();
render();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", boot);
} else {
boot();
}
})();
</script>
Comments
Post a Comment