to-do list app free to do list app windows to-do list app free download to do list app for pc best to-do list app free microsoft to do list app best to-do list app to-do list app mac

To Do List App Mini Project with Code Tutorial

by

Introduction: Why you Should Seriously Consider Creating a Todo List Site? create todo list website, how to make a todo list website, create a site

Creating Your Own Todo List Website Step by Step

To-Do List App Mini Project with Code Tutorial

A Detailed Guide on How to Create a Todo List Website and the Best Tools to Do it

Index.html ( This is the Html of the code where you will design blocks, and more features that will be shown on the website, Copy this code and save it as an index.html in your files).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Todo List</title>
  </head>
  <body>
    <h1>todos</h1>
    <form id="form">
      <input type="text" class="input" id="input" placeholder="Enter your todo" autocomplete="off">

      <ul class="todos" id="todos"></ul>
    </form>
    <small>Left click to toggle completed. <br> Right click to delete todo</small>

    <script src="script.js"></script>
  </body>
</html>

Script.js

const form = document.getElementById('form')
const input = document.getElementById('input')
const todosUL = document.getElementById('todos')

const todos = JSON.parse(localStorage.getItem('todos'))

if(todos) {
    todos.forEach(todo => addTodo(todo))
}

form.addEventListener('submit', (e) => {
    e.preventDefault()

    addTodo()
})

function addTodo(todo) {
    let todoText = input.value

    if(todo) {
        todoText = todo.text
    }

    if(todoText) {
        const todoEl = document.createElement('li')
        if(todo && todo.completed) {
            todoEl.classList.add('completed')
        }

        todoEl.innerText = todoText

        todoEl.addEventListener('click', () => {
            todoEl.classList.toggle('completed')
            updateLS()
        }) 

        todoEl.addEventListener('contextmenu', (e) => {
            e.preventDefault()

            todoEl.remove()
            updateLS()
        }) 

        todosUL.appendChild(todoEl)

        input.value = ''

        updateLS()
    }
}

function updateLS() {
    todosEl = document.querySelectorAll('li')

    const todos = []

    todosEl.forEach(todoEl => {
        todos.push({
            text: todoEl.innerText,
            completed: todoEl.classList.contains('completed')
        })
    })

    localStorage.setItem('todos', JSON.stringify(todos))
}

Styles.css ( This is our design part like color, margin, padding, and more features to add).

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  color: #444;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

h1 {
  color: rgb(179, 131, 226);
  font-size: 10rem;
  text-align: center;
  opacity: 0.4;
}

form {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  width: 400px;
}

.input {
  border: none;
  color: #444;
  font-size: 2rem;
  padding: 1rem 2rem;
  display: block;
  width: 100%;
}

.input::placeholder {
  color: #d5d5d5;
}

.input:focus {
  outline-color: rgb(179, 131, 226);
}

.todos {
  background-color: #fff;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.todos li {
  border-top: 1px solid #e5e5e5;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 1rem 2rem;
}

.todos li.completed {
  color: #b6b6b6;
  text-decoration: line-through;
}

small {
  color: #b5b5b5;
  margin-top: 3rem;
  text-align: center;
}
Footer

How To Find The Perfect Domain And Hosting For Your To-Do List Site

Link to GitHub Repo of Bradtraversy

How To Design A Beautiful & Functional To-Do Site Layout

How To Promote Your New To-Do List Site On Social Media And Search Engines So That People Will Visit It

To-Do List List is a website that helps people manage their tasks and reminds them of what needs to be done.

It doesn’t have a database, so it can’t store data for you. It’s just a simple to-do list with reminders.

The Todolist app has been created for people who want to keep track of their tasks and get reminded about them. The app is available in both the App Store and Google Play Store.

A to-do list is a list of tasks that need to be accomplished. It is a way for you to keep track of what needs to be done, and it also gives you the satisfaction of crossing off completed tasks.

There are many different ways to make your own personal to-do list, from writing it down on paper or in a notebook, using an app on your phone, or creating a digital list on your computer.

It’s important for you to find the best way for you personally so that it will work well for you.

Calculator app – Python Mini Project with Code Tutorial

Leave a Comment