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:[email protected];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.
2 thoughts on “To Do List App Mini Project with Code Tutorial”