Maker

I’m not sure who first called me Ceejj but it’s been my nickname ever since. I’m not sure where ill take this website. but I think I want to use it as a spot to document my projects, things that I’m thinking about, recipes, motivation, etc. 

<script>
(function () {
  function recipeKey(card) {
    const id = card.getAttribute("data-recipe-id") || card.id || "recipe";
    return "recipeChecks:" + id;
  }

  function loadChecks(card) {
    if (card.getAttribute("data-save") !== "1") return;
    try {
      const raw = localStorage.getItem(recipeKey(card));
      if (!raw) return;
      const state = JSON.parse(raw);
      card.querySelectorAll('input[type="checkbox"][data-check]').forEach(cb => {
        const k = cb.getAttribute("data-check");
        cb.checked = !!state[k];
      });
    } catch (e) {}
  }

  function saveChecks(card) {
    if (card.getAttribute("data-save") !== "1") return;
    try {
      const state = {};
      card.querySelectorAll('input[type="checkbox"][data-check]').forEach(cb => {
        state[cb.getAttribute("data-check")] = cb.checked;
      });
      localStorage.setItem(recipeKey(card), JSON.stringify(state));
    } catch (e) {}
  }

  function setImageVisible(card, visible) {
    const img = card.querySelector(".recipe-card__image");
    if (!img) return;
    img.style.display = visible ? "block" : "none";
  }

  function resetChecks(card) {
    card.querySelectorAll('input[type="checkbox"][data-check]').forEach(cb => cb.checked = false);
    saveChecks(card);
  }

  // Load saved state on page load
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".recipe-card").forEach(loadChecks);
  });

  // Click actions
  document.addEventListener("click", function (e) {
    const btn = e.target.closest("[data-action]");
    if (btn) {
      const card = btn.closest(".recipe-card");
      if (!card) return;

      const action = btn.getAttribute("data-action");

      if (action === "print") {
        window.print();
        return;
      }

      if (action === "with-image" || action === "without-image") {
        const on = action === "with-image";
        setImageVisible(card, on);

        card.querySelectorAll('[data-action="with-image"],[data-action="without-image"]').forEach(b => {
          b.classList.toggle("is-active", b.getAttribute("data-action") === action);
        });
        return;
      }

      if (action === "reset-checks") {
        resetChecks(card);
        return;
      }
    }
  });

  // Persist checkbox changes
  document.addEventListener("change", function (e) {
    const cb = e.target.closest('input[type="checkbox"][data-check]');
    if (!cb) return;
    const card = cb.closest(".recipe-card");
    if (!card) return;
    saveChecks(card);
  });
})();
</script>

Check me out

The Siege