script.js

/**
 * Main application logic for the List Maker App.
 *
 * This file initializes the application, handles user input for creating
 * and managing lists, and renders the lists to the DOM.
 *
 * @author Zafer Yilmaz <136199553+zaferyilmaznet@users.noreply.github.com>
 * @version 1.0.0
 * @since 2025-09-19
 * @copyright 2025 Zafer Yilmaz
 * @license MIT
 */

/* 
Structure
1. handleCreateList → creates a list object, pushes it to lists, calls renderList.
2. renderList → creates a list container (div with title, buttons, input for new items, <ul> for items).
3. renderListItem → creates a single <li> with text, inline edit, and delete.
4. Data model → each list is { id, title, items: [ { id, text } ] }.
*/

// DOM References
let newListTitleInput = document.querySelector("#new-list-title-input");
const createNewListBtn = document.querySelector("#create-new-list-btn");
createNewListBtn.classList.add("primary");
const listsView = document.querySelector("#lists-view");

// Create a wrapper for controls (counter + clear all)
const controlsBar = document.createElement("div");
controlsBar.classList.add("flex-between");
controlsBar.id = "controls-bar";

// Counter
const counter = document.createElement("span");
controlsBar.appendChild(counter);

// Clear All button
const clearAllBtn = document.createElement("button");
clearAllBtn.textContent = "Clear All";
clearAllBtn.classList.add("danger");
clearAllBtn.addEventListener("click", handleClearAll);
controlsBar.appendChild(clearAllBtn);

// Insert controls before lists view
listsView.parentNode.insertBefore(controlsBar, listsView);

// Data Model
let lists = [];
const LIST_LIMIT = 100;

// Event Listeners
createNewListBtn.addEventListener("click", handleCreateList);
newListTitleInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    e.preventDefault();
    handleCreateList();
  }
});

// Handlers
function handleCreateList() {
  if (lists.length >= LIST_LIMIT) {
    alert(`You can only create up to ${LIST_LIMIT} lists.`);
    return;
  }

  const title = newListTitleInput.value.trim();
  if (!title) {
    alert("Please enter a title.");
    return;
  }

  const newList = { id: Date.now(), title, items: [] };
  lists.push(newList);

  renderList(newList);
  saveToLocalStorage();
  updateCounter();

  newListTitleInput.value = "";
  newListTitleInput.blur(); // remove focus from the title input

  // Move focus to the "Add item" input in the newly created list
  const newListContainer = document.querySelector(
    `.list-container[data-id="${newList.id}"]`
  );
  newListContainer?.querySelector('input[type="text"]')?.focus();
}

function handleClearAll() {
  if (confirm("Are you sure you want to delete all lists?")) {
    lists = [];
    listsView.innerHTML = "";
    saveToLocalStorage();
    updateCounter();
  }
}

// Rendering
function renderList(listObj) {
  const container = document.createElement("div");
  container.classList.add("list-container");
  container.dataset.id = listObj.id;

  // Title row
  const titleRow = document.createElement("div");
  titleRow.classList.add("flex-between");

  const titleSpan = document.createElement("h3");
  titleSpan.textContent = listObj.title;
  titleSpan.style.color = getRandomPaletteColor(); // random vibe from curated palette

  // Inline edit for title
  const editTitleBtn = document.createElement("button");
  editTitleBtn.textContent = "Edit Title";
  editTitleBtn.classList.add("secondary");

  editTitleBtn.addEventListener("click", () => {
    if (editTitleBtn.textContent === "Edit Title") {
      const input = document.createElement("input");
      input.type = "text";
      input.value = listObj.title;
      titleRow.replaceChild(input, titleSpan);

      editTitleBtn.textContent = "Save Title";
      editTitleBtn.classList.remove("secondary");
      editTitleBtn.classList.add("primary");

      input.focus();
      input.addEventListener("keydown", (e) => {
        if (e.key === "Enter") editTitleBtn.click();
      });
    } else {
      const input = titleRow.querySelector("input");
      const newTitle = input.value.trim();
      if (newTitle) listObj.title = newTitle;
      titleSpan.textContent = listObj.title;
      titleRow.replaceChild(titleSpan, input);

      editTitleBtn.textContent = "Edit Title";
      editTitleBtn.classList.remove("primary");
      editTitleBtn.classList.add("secondary");
    }
    saveToLocalStorage();
  });

  // Delete list
  const deleteListBtn = document.createElement("button");
  deleteListBtn.textContent = "Delete List";
  deleteListBtn.classList.add("danger");
  deleteListBtn.addEventListener("click", () => {
    // Remove from data model
    lists = lists.filter((l) => l.id !== listObj.id);
    // Remove from DOM
    container.remove();

    saveToLocalStorage();
    updateCounter();
  });

  const titleActions = document.createElement("div");
  titleActions.appendChild(editTitleBtn);
  titleActions.appendChild(deleteListBtn);

  titleRow.appendChild(titleSpan);
  titleRow.appendChild(titleActions);

  container.appendChild(titleRow);

  // Ul for items
  const ul = document.createElement("ul");
  container.appendChild(ul);

  // Render existing items (important for localStorage load)
  listObj.items.forEach((itemObj) => {
    renderListItem(listObj.id, itemObj, ul);
  });

  // Add item input + button
  const input = document.createElement("input");
  input.type = "text";
  input.placeholder = "Add item...";
  container.appendChild(input);

  const addItemBtn = document.createElement("button");
  addItemBtn.type = "button";
  addItemBtn.textContent = "Add Item";
  addItemBtn.classList.add("primary");
  container.appendChild(addItemBtn);

  // Events for adding items
  addItemBtn.addEventListener("click", () => {
    handleAddItem(listObj.id, input, ul);
  });
  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      handleAddItem(listObj.id, input, ul);
    }
  });

  // Append container
  listsView.insertBefore(container, listsView.firstChild);
}

function handleAddItem(listId, input, ul) {
  const itemText = input.value.trim();
  if (!itemText) return;

  // Update data model
  const list = lists.find((l) => l.id === listId);
  const newItem = { id: Date.now(), text: itemText };
  list.items.push(newItem);

  renderListItem(listId, newItem, ul);
  saveToLocalStorage();
  input.value = "";
}

// Render single item
function renderListItem(listId, itemObj, ul) {
  const li = document.createElement("li");
  li.dataset.id = itemObj.id;

  const row = document.createElement("div");
  row.classList.add("flex-between");

  const span = document.createElement("span");
  span.textContent = itemObj.text;
  row.appendChild(span);

  const actions = document.createElement("div");

  // Edit item inline
  const editBtn = document.createElement("button");
  editBtn.textContent = "Edit";
  editBtn.classList.add("secondary");
  editBtn.addEventListener("click", () => {
    if (editBtn.textContent === "Edit") {
      const input = document.createElement("input");
      input.type = "text";
      input.value = itemObj.text;
      row.replaceChild(input, span);

      editBtn.textContent = "Save";
      editBtn.classList.remove("secondary");
      editBtn.classList.add("primary");

      input.focus();
      input.addEventListener("keydown", (e) => {
        if (e.key === "Enter") editBtn.click();
      });
    } else {
      const input = row.querySelector("input");
      const newText = input.value.trim();
      if (newText) itemObj.text = newText;
      span.textContent = itemObj.text;
      row.replaceChild(span, input);

      editBtn.textContent = "Edit";
      editBtn.classList.remove("primary");
      editBtn.classList.add("secondary");
    }
    saveToLocalStorage();
  });
  actions.appendChild(editBtn);

  // Delete item
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "Delete";
  deleteBtn.classList.add("danger");
  deleteBtn.addEventListener("click", () => {
    const list = lists.find((l) => l.id === listId);
    list.items = list.items.filter((it) => it.id !== itemObj.id);
    li.remove();
    saveToLocalStorage();
  });
  actions.appendChild(deleteBtn);

  row.appendChild(actions);
  li.appendChild(row);
  ul.appendChild(li);
}

// Helpers for saving to and loading from localStorage
function saveToLocalStorage() {
  localStorage.setItem("lists", JSON.stringify(lists));
}

function loadFromLocalStorage() {
  const stored = localStorage.getItem("lists");
  if (stored) {
    lists = JSON.parse(stored);
  }
}

function updateCounter() {
  const footer = document.querySelector("#app-footer");
  if (lists.length > 0) {
    controlsBar.style.display = "flex";
    counter.textContent = `${lists.length} / ${LIST_LIMIT} lists`;
    footer.hidden = false; // show footer
  } else {
    controlsBar.style.display = "none";
    footer.hidden = true; // hide footer
  }
}

// Page Load
loadFromLocalStorage();
listsView.innerHTML = ""; // clear old UI before rendering
lists.forEach((listObj) => renderList(listObj));
updateCounter();

// Random color generator
function getRandomPaletteColor() {
  const palette = [
    "#1e57e1", // primary blue
    "#2a9d8f", // teal
    "#264653", // deep green/blue
    "#457b9d", // soft blue
    "#8a2be2", // muted violet
    "#6a4c93", // dusty purple
    "#e76f51", // terracotta
    "#f4a261", // muted orange
    "#e63946", // soft red
    "#2c3e50", // deep navy
    "#7d8ca3", // gray-blue
    "#b56576", // muted rose
    "#bc6c25", // earthy brown/orange
    "#118ab2", // calm cyan
  ];
  return palette[Math.floor(Math.random() * palette.length)];
}

/* function getRandomColor() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);

  // Convert each to hex and pad with 0 if needed
  let hexR = r.toString(16).padStart(2, "0");
  let hexG = g.toString(16).padStart(2, "0");
  let hexB = b.toString(16).padStart(2, "0");

  let hexColor = "#" + hexR + hexG + hexB;
  return hexColor;
} */