<!DOCTYPE html>
<html lang="lv">
<head>
  <meta charset="UTF-8">
  <title>Todo List</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

<div class="container mt-5">
  <h2 class="text-center mb-4">Todo List</h2>

  <div class="input-group mb-3">
    <input type="text" id="taskInput" class="form-control" placeholder="Ievadi uzdevumu">
    <button class="btn btn-primary" onclick="addTask()">Pievienot</button>
  </div>

  <ul id="taskList" class="list-group"></ul>
</div>

<script>
  document.addEventListener("DOMContentLoaded", loadTasks);

  function addTask() {
    const input = document.getElementById("taskInput");
    const taskText = input.value.trim();

    if (taskText === "") {
      alert("Ievadi uzdevumu!");
      return;
    }

    createTaskElement(taskText);
    saveTasks();
    input.value = "";
  }

  function createTaskElement(text) {
    const li = document.createElement("li");
    li.className = "list-group-item d-flex justify-content-between align-items-center";

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

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Dzēst";
    deleteBtn.className = "btn btn-danger btn-sm";

    deleteBtn.onclick = function () {
      li.remove();
      saveTasks();
    };

    li.appendChild(span);
    li.appendChild(deleteBtn);
    document.getElementById("taskList").appendChild(li);
  }

  function saveTasks() {
    const tasks = [];
    document.querySelectorAll("#taskList li span").forEach(task => {
      tasks.push(task.textContent);
    });
  
  }

  
</script>

</body>
</html>
