Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a \"to-do list\" with CSS and JavaScript?
A to-do list allows you to manage your task. It is like a note. When you type what needs to be done, for example, meeting at 4PM, you press Enter. On pressing Enter, the task gets added and a section for another task is visible wherein you can type the next task, example, lunch with a colleague at 7PM, etc.
Add an Input Text to Enter a Task
To add an input task, use the <input>. A placeholder is also set using the placeholder attribute −
<input class="todoInput" placeholder="Add Something" />
Style the Input
The input is set with the todoInput class. We have set the height, width, etc −
.todoInput {
margin-top: 10px;
padding: 10px;
width: 500px;
height: 60px;
font-size: 40px;
border: 2px solid black;
color: purple;
}
Set the Unordered List for the Items
On pressing Enter, a new list item is visible to add a new task, therefore an unordered list is set −
<ul id="list"></ul>
Style the List Items for the to-do List
For the list items, the list-style is set to none so that the bullet points are not visible. It won't appear like a list−
li {
text-align: left;
font-size: 22px;
list-style: none;
border: 1px solid rgb(212, 212, 212);
padding: 5px;
margin-bottom: 10px;
}
Script for the to-do List
On entering a task and pressing Enter, the next input text is visible to enter the next task −
<script>
function addItem() {
var todoItem = document.querySelector(".todoInput").value;
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("- " + todoItem));
ul.appendChild(li);
todoItem = "";
li.onclick = deleteItem;
}
document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
addItem();
}
};
function deleteItem(ele) {
ele.target.parentElement.removeChild(ele.target);
}
</script>
Key Code for Enter
On pressing Enter, the space for the next task is visible. Therefore, the key code for the Enter is taken care of −
document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
addItem();
}
Example
To create a to-do list with CSS and JavaScript, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
max-width: 500px;
margin: 10px auto;
}
.todoInput {
margin-top: 10px;
padding: 10px;
width: 500px;
height: 60px;
font-size: 40px;
border: 2px solid black;
color: purple;
}
li {
text-align: left;
font-size: 22px;
list-style: none;
border: 1px solid rgb(212, 212, 212);
padding: 5px;
margin-bottom: 10px;
}
li:hover {
color: red;
}
</style>
</head>
<body>
<div style="border: 1px solid black;">
<h1 style="text-align: center;color: red;">To-do List Example</h1>
<input class="todoInput" placeholder="Add Something" />
<ul id="list"></ul>
</div>
<script>
function addItem() {
var todoItem = document.querySelector(".todoInput").value;
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("- " + todoItem));
ul.appendChild(li);
todoItem = "";
li.onclick = deleteItem;
}
document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
addItem();
}
};
function deleteItem(ele) {
ele.target.parentElement.removeChild(ele.target);
}
</script>
</body>
</html>
430 Views
