How to Create an Online To Do List in Hostinger Website Builder

ByBen
Go to Hostinger.com
Get Hostinger Free Courses

Adding an online to-do list to your website can help you and your visitors stay organized and track tasks efficiently. With Hostinger Website Builder, you can easily integrate a functional to-do list using a simple code snippet. In this guide, I’ll show you step by step how to create an interactive online to-do list inside Hostinger Website Builder.

Step 1: Access Hostinger Website Builder

  1. Log in to your Hostinger account.
  2. Navigate to the Websites section.
  3. Find your website and click Edit Website to open Hostinger Website Builder.

Step 2: Create a New Page for the To-Do List

  1. Click Add Page in the website builder.
  2. Choose New Empty Page and name it something like “To-Do List” or “Online Task Manager.”
  3. Click Create to add the new page to your site.

Step 3: Insert a Custom Code Element

  1. Go to the left-side menu and select Add Element.
  2. Scroll down to find the Embed Code element.
  3. Drag and drop it onto your newly created page.
  4. Click on the code box, delete any existing code, and paste the to-do list code :
<!-- To-Do List Tool -->
<div id="todo-container">
  <h2>To-Do List</h2>
  
  <!-- Input Field for New Task -->
  <div class="input-container">
    <input type="text" id="task-input" placeholder="Add a new task..." />
    <select id="priority-select">
      <option value="low">Low Priority</option>
      <option value="medium">Medium Priority</option>
      <option value="high">High Priority</option>
    </select>
    <button id="add-btn">Add Task</button>
  </div>
  
  <!-- Clear All Button -->
  <button id="clear-btn">Clear All Tasks</button>
  
  <!-- List of Tasks -->
  <ul id="todo-list"></ul>
</div>

<!-- Styles for the To-Do List -->
<style>
  #todo-container {
    width: 100%;
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
  }

  h2 {
    text-align: center;
    color: #444;
    font-size: 24px;
    margin-bottom: 20px;
  }

  .input-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  #task-input {
    width: calc(100% - 160px);
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease;
  }

  #task-input:focus {
    border-color: #28a745;
    outline: none;
  }

  #priority-select {
    width: 120px;
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
  }

  #add-btn {
    width: 100px;
    padding: 12px 20px;
    font-size: 16px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s ease;
  }

  #add-btn:hover {
    background-color: #218838;
  }

  #clear-btn {
    width: 100%;
    padding: 12px;
    background-color: #dc3545;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 16px;
    transition: background-color 0.3s ease;
  }

  #clear-btn:hover {
    background-color: #c82333;
  }

  #todo-list {
    margin-top: 20px;
    padding-left: 0;
    list-style-type: none;
  }

  #todo-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 6px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
    margin: 8px 0;
    transition: background-color 0.3s ease;
  }

  #todo-list li.completed {
    background-color: #d1e7dd;
    text-decoration: line-through;
  }

  #todo-list li:hover {
    background-color: #e9ecef;
  }

  #todo-list li button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
  }

  #todo-list li button:hover {
    background-color: #0056b3;
  }

  #todo-list li button:focus {
    outline: none;
  }

  /* Priority-based Colors */
  .low {
    background-color: #d4edda; /* Greenish */
  }

  .medium {
    background-color: #ffeeba; /* Yellowish */
  }

  .high {
    background-color: #f8d7da; /* Reddish */
  }

  /* Checkbox Styles */
  .checkbox {
    margin-right: 12px;
    cursor: pointer;
  }

  .checkbox:checked {
    background-color: #28a745;
    border: 2px solid #28a745;
  }

  .checkbox:checked + label {
    text-decoration: line-through;
  }
</style>

<!-- JavaScript for To-Do List Functionality -->
<script>
  // Load tasks from localStorage when the page loads
  document.addEventListener("DOMContentLoaded", function() {
    loadTasks();
  });

  document.getElementById("add-btn").addEventListener("click", function() {
    var taskInput = document.getElementById("task-input");
    var taskText = taskInput.value.trim();
    var priority = document.getElementById("priority-select").value;

    if (taskText !== "") {
      // Create a new list item
      var newTask = document.createElement("li");

      // Create a checkbox element
      var checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.classList.add("checkbox");
      checkbox.addEventListener("change", function() {
        toggleCompleted(newTask, checkbox);
      });

      // Create a label for the checkbox (task description)
      var label = document.createElement("label");
      label.textContent = taskText;

      // Append checkbox and task text
      newTask.appendChild(checkbox);
      newTask.appendChild(label);
      newTask.innerHTML += ` <button class="edit-btn">Edit</button><button class="delete-btn">Delete</button>`;

      // Add priority class
      newTask.classList.add(priority);

      // Add event listeners for edit and delete buttons
      newTask.querySelector(".edit-btn").addEventListener("click", function() {
        editTask(newTask, taskText, priority);
      });
      newTask.querySelector(".delete-btn").addEventListener("click", function() {
        deleteTask(newTask);
      });

      // Add the new task to the list
      document.getElementById("todo-list").appendChild(newTask);

      // Clear the input field and reset the priority dropdown
      taskInput.value = "";
      document.getElementById("priority-select").value = "low";

      // Save tasks to localStorage
      saveTasks();
    }
  });

  // Allow pressing "Enter" to add a task
  document.getElementById("task-input").addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
      document.getElementById("add-btn").click();
    }
  });

  // Mark a task as completed
  function toggleCompleted(task, checkbox) {
    if (checkbox.checked) {
      task.classList.add("completed");
      checkbox.style.backgroundColor = "#28a745";
    } else {
      task.classList.remove("completed");
      checkbox.style.backgroundColor = "#fff";
    }
    saveTasks();
  }

  // Edit a task
  function editTask(task, oldText, oldPriority) {
    var newText = prompt("Edit Task", oldText);
    if (newText && newText !== oldText) {
      task.firstChild.nextSibling.textContent = newText;
      saveTasks();
    }

    var newPriority = prompt("Edit Priority (low, medium, high)", oldPriority);
    if (newPriority && newPriority !== oldPriority) {
      task.classList.remove(oldPriority);
      task.classList.add(newPriority);
      saveTasks();
    }
  }

  // Delete a task
  function deleteTask(task) {
    task.remove();
    saveTasks();
  }

  // Save tasks to localStorage
  function saveTasks() {
    var tasks = [];
    document.querySelectorAll("#todo-list li").forEach(function(task) {
      tasks.push({
        text: task.firstChild.nextSibling.textContent,
        completed: task.classList.contains("completed"),
        priority: task.classList.contains("low") ? "low" : (task.classList.contains("medium") ? "medium" : "high")
      });
    });
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }

  // Load tasks from localStorage
  function loadTasks() {
    var tasks = JSON.parse(localStorage.getItem("tasks")) || [];
    tasks.forEach(function(taskData) {
      var task = document.createElement("li");

      // Create a checkbox element
      var checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.classList.add("checkbox");
      if (taskData.completed) {
        task.classList.add("completed");
        checkbox.checked = true;
        checkbox.style.backgroundColor = "#28a745";
      }

      // Create a label for the checkbox (task description)
      var label = document.createElement("label");
      label.textContent = taskData.text;

      // Append checkbox and task text
      task.appendChild(checkbox);
      task.appendChild(label);
      task.innerHTML += ` <button class="edit-btn">Edit</button><button class="delete-btn">Delete</button>`;
      task.classList.add(taskData.priority);
      
      task.querySelector(".edit-btn").addEventListener("click", function() {
        editTask(task, taskData.text, taskData.priority);
      });
      task.querySelector(".delete-btn").addEventListener("click", function() {
        deleteTask(task);
      });
      task.querySelector(".checkbox").addEventListener("change", function() {
        toggleCompleted(task, checkbox);
      });

      document.getElementById("todo-list").appendChild(task);
    });
  }

  // Clear all tasks
  document.getElementById("clear-btn").addEventListener("click", function() {
    localStorage.removeItem("tasks");
    document.getElementById("todo-list").innerHTML = "";
  });
</script>

Step 4: Customize the To-Do List

Once you have added the code, update your website and test the functionality. Here’s what you can do with the online to-do list:
✅ Add new tasks with different priority levels (low, medium, high).
✅ Edit task descriptions and adjust priorities as needed.
✅ Mark tasks as completed to keep track of progress.
✅ Delete tasks to remove them when no longer needed.

Step 5: Optimize the Page for SEO

To improve the visibility of your to-do list page on search engines, add relevant keywords like “free online to-do list” and “task management tool.” Include a descriptive page title and subtitles, such as:

  • Best Free Online To-Do List Tool
  • Enter Your Tasks Below

You can also add a short description explaining the features of your to-do list tool and how users can benefit from it.

Final Thoughts

By following these simple steps, you can create an interactive and functional to-do list inside Hostinger Website Builder. Whether you need it for personal task management or to provide a useful tool for your website visitors, this online to-do list is easy to set up and fully customizable.

If you want to learn more about Hostinger Website Builder and how to integrate custom features, check out my free course:
📖 Get My Hostinger Course for Free: https://university.bensexperience.com

Got any questions? Leave a comment below!

Similar Posts