To-DO List Using HTML, CSS, JS | To do List with Source code | #untoldcoding

To create To-DO List , you have to follow 3 Steps

Unlock your productivity: Creating to-do lists with HTML, CSS, and JS

In today’s fast-paced world, planning is of utmost importance. We’re bombarded with countless tasks every day, so it’s easy to get overwhelmed and miss out on important responsibilities. Enter the humble to-do list – a powerful tool that helps us manage our projects more effectively and increase productivity. In this blog, we’ll explore how to create simple yet effective to-do lists using HTML, CSS, and JavaScript.

Why create your own to-do list?

While there are countless to-do list apps out there, making your own comes with a host of benefits:

Customize: Tailor your to-do list to your specific needs and preferences.

Learning Opportunity: Gain a deeper understanding of web development by building a business from scratch.

Control: Ensure your data privacy by storing your work locally on your device.

Flexibility: Modify and expand activity as you see fit.

Getting Started: Configuring the HTML layout

Let’s get into the rules! We’ll start by creating the basic layout of our system using HTML:

Step 1 Html Code:

Step 2 CSS Code

body {
  min-width: 320px;
  min-height: 100vh;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  background: black;
  background-repeat: no-repeat;
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1630px;
  min-width: 320px;
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.input-reset {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  background-color: #fff;
}
.input-reset::-webkit-search-decoration,
.input-reset::-webkit-search-cancel-button,
.input-reset::-webkit-search-results-button,
.input-reset::-webkit-search-results-decoration {
  display: none;
}

.todo {
  margin: 10vh auto;
  padding: 20px;
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 10px;
}
.title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #104ca1;
}
.title img {
  margin-left: 15px;
  max-width: 40px;
}
.row {
  display: flex;
  margin-bottom: 20px;
}
.input {
  flex: 1;
  padding: 10px 15px;
  height: 40px;
  border: 1px solid grey;
  border-radius: 10px 0 0 10px;
}
.input:focus {
  outline: none;
}
.add {
  width: 25%;
  color: #fff;
  background-color: #22b3e4;
  border: 1px solid transparent;
  border-radius: 0 10px 10px 0;
  transition: all 0.3s ease;
}
.add:hover {
  background-color: rgba(6, 31, 143, 0.8);
}
.item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.item:not(:last-child) {
  margin-bottom: 10px;
}
.item.checked {
  text-decoration: line-through;
  color: #cecece;
}
.item.checked .check {
  background-color: #fff;
  border: 2px solid rgba(65, 81, 103, 0.4);
}
.item.checked .check::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 8px;
  display: block;
  width: 30px;
  height: 30px;
  background-image: url("https://svgsilh.com/svg/146095.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(5deg);
}
.check {
  position: relative;
  display: inline-block;
  order: -1;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  background-color: #cecece;
  border-radius: 50%;
  border: 2px solid #415167;
  transition: all 0.3s ease;
}
.done {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 30px;
  height: 30px;
  font-size: 18px;
  background: url("https://ikonki.svgpng.ru/wp-content/uploads/2021/12/Krestiksvgpng.ru_.png")
    no-repeat;
  background-size: 80%;
  background-position: top 3px left 3px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.done:hover {
  background-color: #cecece;
  border: 1px solid transparent;
  border-radius: 50%;
}

File name should be style.css

Step 3 JavaScript Code :

const inputTodo = document.querySelector(".input");
const btnTodo = document.querySelector(".add");
const blockTodo = document.querySelector(".list");

btnTodo.addEventListener("click", (e) => {
  if (!inputTodo.value) {
    alert("INSERT");
  } else {
    createTask();
  }

inputTodo.value = "";
  saveData();
});

function createTask() {
  let itemTodo = document.createElement("li");
  itemTodo.classList.add("item");
  itemTodo.innerHTML = `${inputTodo.value}`;
  blockTodo.appendChild(itemTodo);
  let checkTodo = document.createElement("span");
  checkTodo.classList.add("check");
  itemTodo.appendChild(checkTodo);
  let closeTodo = document.createElement("span");
  closeTodo.classList.add("done");
  itemTodo.appendChild(closeTodo);
}

blockTodo.addEventListener(
  "click",
  (e) => {
    if (e.target.tagName === "LI") {
      e.target.classList.toggle("checked");
      saveData();
    } else if (e.target.classList.contains("check")) {
      e.target.parentElement.classList.toggle("checked");
      saveData();
    } else if (e.target.classList.contains("done")) {
      e.target.parentElement.remove();
      saveData();
    }
  },
  false
);

function saveData() {
  localStorage.setItem("data", blockTodo.innerHTML);
}

function showData() {
  blockTodo.innerHTML = localStorage.getItem("data");
}

showData();

file name should be untoldcoding.js

This JavaScript code listens to the click on the "Add Task" button, retrieves the value from the input field, creates a new list item (<li>), adds it to the unsorted list, and deletes the input field What remains about, it allows users to click and remove tasks.

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

FAQ: To create structured projects with HTML, CSS, and JS

Q: What is the plan?

A: A to-do list is a tool for organizing tasks, prioritizing activities, and tracking accountability. It helps individuals manage their time and ensures important tasks are completed on time.

Q: Why would you use HTML, CSS, and JavaScript to create a structured project?

A: Using this to-do technology allows for flexibility and flexible solutions to suit individual needs. It also gives web development enthusiasts the learning opportunity to build a business from scratch and gain a deeper understanding of front end development

Q: Can I customize the layout?

A: Yes, absolutely! The CSS code provided can be modified to change the colors, fonts, layout, and overall orientation of the task table to suit your preferences and branding.

Q: Can additional items be added to the to-do list?

A: Of course! You can extend functionality by adding things like task groups, due dates, task priorities, task switching, and even data persistence using local storage or backend databases

Q: How can I add these to-do items to an existing website?

A: You can copy the HTML layout, CSS methods, and JavaScript code to your project files to put together the to-do items in your website. Make sure the necessary CSS and JavaScript files are integrated correctly, and change the look and functionality as needed to blend seamlessly with your existing website

Q: Can I collaborate on projects using this program?

A: While these basic services are designed for individual use and you store services locally on the user’s device, you can extend its functionality to support collaboration by using different features