To do list html css template

How TO — Create a To Do List

Learn how to create a «to-do list» with CSS and JavaScript.

The To Do List

Use CSS and JavaScript to create a «to-do list» to organize and prioritize your tasks.

Create The To Do List

Step 1) Add HTML:

Example

My To Do List

Step 2) Add CSS:

Style the header and the list:

Example

/* Include the padding and border in an element’s total width and height */
* box-sizing: border-box;
>

/* Remove margins and padding from the list */
ul margin: 0;
padding: 0;
>

/* Style the list items */
ul li cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;

/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) background: #f9f9f9;
>

/* Darker background-color on hover */
ul li:hover background: #ddd;
>

/* When clicked on, add a background color and strike out text */
ul li.checked background: #888;
color: #fff;
text-decoration: line-through;
>

/* Add a «checked» mark when clicked on */
ul li.checked::before content: »;
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
>

/* Style the close button */
.close position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
>

.close:hover background-color: #f44336;
color: white;
>

/* Style the header */
.header background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
>

/* Clear floats after the header */
.header:after content: «»;
display: table;
clear: both;
>

/* Style the input */
input margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
>

/* Style the «Add» button */
.addBtn padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
>

.addBtn:hover background-color: #bbb;
>

Step 3) Add JavaScript:

Example

// Create a «close» button and append it to each list item
var myNodelist = document.getElementsByTagName(«LI»);
var i;
for (i = 0; i < myNodelist.length; i++) var span = document.createElement("SPAN");
var txt = document.createTextNode(«\u00D7»);
span.className = «close»;
span.appendChild(txt);
myNodelist[i].appendChild(span);
>

// Click on a close button to hide the current list item
var close = document.getElementsByClassName(«close»);
var i;
for (i = 0; i < close.length; i++) close[i].onclick = function() var div = this.parentElement;
div.style.display = «none»;
>
>

// Add a «checked» symbol when clicking on a list item
var list = document.querySelector(‘ul’);
list.addEventListener(‘click’, function(ev) if (ev.target.tagName === ‘LI’) ev.target.classList.toggle(‘checked’);
>
>, false);

// Create a new list item when clicking on the «Add» button
function newElement() var li = document.createElement(«li»);
var inputValue = document.getElementById(«myInput»).value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === ») alert(«You must write something!»);
> else document.getElementById(«myUL»).appendChild(li);
>
document.getElementById(«myInput»).value = «»;

var span = document.createElement(«SPAN»);
var txt = document.createTextNode(«\u00D7»);
span.className = «close»;
span.appendChild(txt);
li.appendChild(span);

for (i = 0; i < close.length; i++) close[i].onclick = function() var div = this.parentElement;
div.style.display = «none»;
>
>
>

Источник

11 Bootstrap To-Do Lists

Collection of free Bootstrap to-do list code examples. Update of December 2020 collection. 2 new items.

Related Articles

1. Bootstrap Lists
2. CSS Lists

Author

Links

Made with

About a code

Bootstrap — Todo Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, bootstrap-datepicker.css, jquery.js, popper.js, bootlint.js, bootstrap-datepicker.js

Author

Links

Made with

About a code

Bootstrap 4 Todo List

Bootstrap 4 todo list with custom checkbox button with ripple effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Todo with AngularJS & Bootstrap

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Bootstrap 4 To-Do List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Bootstrap 4 Awesome Todo List Template

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Author

Links

Made with

About a code

Bootstrap 4 Todo Task List

Bootstrap 4 todo task list with badges.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Bootstrap 4 Todo List

Bootstrap 4 todo list with jquery and font awesome icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

Author

Links

Made with

Источник

CREATING A SIMPLE TO-DO LIST (USING HTML,CSS AND JAVASCRIPT)

If you have just started off learning the basic frontend developer package, which we all know is our favourite HTML, CSS and JavaScript (the one we hate!). Starting off with mini projects is great way to help you study. Most of us have used a To-do list maybe once, or twice in our lives. Its pretty simple, you type in the tasks you want to complete for the day, tick them off when you finish up with those tasks. Now imagine you making one for yourself? Cool isn’t it? You get to choose your own layout, the colors you want to see etc. We will begin off really simple, first of all we are going to create the ‘skeleton’ of the to-do list;

HTML CODE

First off, we create a div to have a nice box where a user can type in their tasks, then we create a random list of tasks for the purpose of this project. The code above should look like this when you run it; After we are done with our html code, which looks like crap and very boring, we now go ahead to add some color to it with CSS.

CSS CODE

 body < margin: 0; min-width: 250px; >* < box-sizing: border-box; >/* to remove the margins and padding from the list */ ul < margin: 0; padding: 0; >/* to style the list items */ ul li < cursor: pointer; position: relative; padding: 12px 8px 12px 40px; margin-left: 25%; margin-right: 25%; list-style-type: none; background: #ddd; font-size: 18px; transition: 0.2s; /* to make the list items unselectable */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >/* setting a color on the background when you hover */ ul li:hover < background-color: rgb(255, 163, 77); >/* When clicked on, it will add a background color and strike out text */ ul li.checked < background-color: rgba(18, 18, 43, 0.475); color: white; text-decoration: line-through; >/* add a checked mark when task is performed */ ul li.checked::before < content: ""; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px; >/* Style the close button */ .close < position: absolute; right: 0; top: 0; padding: 12px 16px 12px 16px; >.close:hover < background-color: #f44336; color: white; >/* styling the header */ .header < background: radial-gradient( circle at -8.9% 51.2%, rgb(255, 124, 0) 0%, rgb(255, 124, 0) 15.9%, rgb(255, 163, 77) 15.9%, rgb(255, 163, 77) 24.4%, rgb(19, 30, 37) 24.5%, rgb(19, 30, 37) 66% ); padding: 30px 40px; color: white; text-align: center; >/* styling the input box */ h2 < font-size: 20px; >#todo-item < width: 50%; padding: 10px; border-radius: 10px; >/* clearing the floats after the header */ .header:after < content: ""; display: table; clear: both; >/* styling the text input box */ .TodoDiv < margin: 0; border: none; border-radius: 10px; width: 75%; padding: 10px; float: center; font-size: 16px; >.todo-save < padding: 8.5px; background: rgb(255, 124, 0); color: white; cursor: pointer; transition: 0.3s; border-radius: 10px; >#todo-save:hover

JAVASCRIPT CODE

 //Creating the close button var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) < var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); myNodelist[i].appendChild(span); >// Click on a close button to hide the current list item var close = document.getElementsByClassName("close"); var i; for (i = 0; i < close.length; i++) < close[i].onclick = function() < var div = this.parentElement; div.style.display = "none"; >> // Add a "checked" symbol when clicking on a list item var list = document.querySelector('ul'); list.addEventListener('click', function(ev) < if (ev.target.tagName === 'LI') < ev.target.classList.toggle('checked'); >>, false); // Create a new list item when clicking on the "Add" button function newElement() < var li = document.createElement("li"); var inputValue = document.getElementById("todo-item").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') < alert("You must write something!"); >else < document.getElementById("myUL").appendChild(li); >document.getElementById("todo-item").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) < close[i].onclick = function() < var div = this.parentElement; div.style.display = "none"; >> > 

The final result should look like this;

CONCLUSION

This is a very basic todo-list you can do within some few hours using just HTML,CSS and JavaScript! Thanks for the read.

Источник

To-do List Template Using HTML, CSS and JavaScript

Hello Coder! Welcome To the Codewithrandom Blog. In This Blog, We Create A Todo List Template Using Html, Css, and JavaScript. In Todo List We can Create ToDo and Delete it. We learn How To Store, read, update, and delete todo. I Hope You Enjoy Our Blog Let’s Start With A Basic Html Structure For The Todo List Template Project.

Todo List Template Html Code:-

  
to do list
 Add 
Insert a new task
 
  

We will include the framework for our to-do list inside of our HTML document. We will first establish the container for our to-do list using the div> tag with the id «app,» and then we will add a heading to our Todo app using the h1> element. Then, with the aid of the unordered list, we will build the user input for adding the work that they must do, and inside of it, using the input> tag with type «text,» we will make the button tag for adding the task. We will use the p> element to enter a new task and use it to produce a little display alert. There is all the HTML code for the Todo List Template Project. Now you can see output without CSS and JavaScript. This is only the HTML coding output for the Todo List template project. Then we write CSS And JavaScript for the Todo list template project code.

Todo List Template Css Code:-

 @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Lato:ital,wght@0,300;0,400;1,300;1,400&display=swap"); * < margin: 0; padding: 0; outline: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; user-select: none; >html, body < width: 100%; height: 100%; >a < text-decoration: none; color: inherit; >body < display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #f5f5f5; font-family: "Lato", sans-serif; >#app < width: 50%; min-width: 400px; >h1 < font-family: "Dancing Script", cursive; text-align: center; margin-bottom: 50px; font-size: 45px; color: #335c62; font-weight: 700; >p < font-family: "Dancing Script", cursive; text-align: center; margin-top: 30px; font-size: 30px; color: #5c5c5c; font-weight: 300; >ul < font-family: "Lato", sans-serif; font-size: 20px; font-weight: 400; font-style: italic; margin: 50px; >ul li < margin-bottom: 10px; color: #5c5c5c; >ul li a < margin-left: 15px; color: white; cursor: pointer; border: 1px solid #7cbe7b; border-radius: 5px; padding: 0 15px 2px 15px; background-color: #7cbe7b; >ul li a:hover < opacity: 0.8; >input, button < font: 400 20px "Lato", sans-serif; >input < width: 60%; height: 40px; color: #5c5c5c; border: 1px solid #dcdce6; border-radius: 8px; padding: 0 24px; margin-right: 10px; >.btn_add < width: 30%; height: 40px; border: 1px solid #dcdce6; border-radius: 8px; background-color: #59a2ad; color: #fff; cursor: pointer; >.btn_add:hover

Step1: The new Google typeface «Dancing» will be used in our to-do list, so first we’ll import it via the Google import link. We will set the padding, margin, and outline to «zero» using the universal selector. We will set the box-sizing property to «border-box» using the box-sizing property. Our to-do app also now has seamless scrolling.

@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Lato:ital,wght@0,300;0,400;1,300;1,400&display=swap"); *

Step2: Now that the display of the body is set to «flex,» we will align the items to the «centre,» set the background colour to «white,» and set the width and height of the element to «100%» using the body selector. We will also set the decoration to «none» and the colour to «browser-inherited» using the element tag selector (a). We will set the font to be «Lato» by using the font-family attribute.

Todo List Template JavaScript Code:

var listElement = document.querySelector("#app ul"); var inputElement = document.querySelector("#app input"); var buttonElement = document.querySelector("#app button"); var todos = JSON.parse(localStorage.getItem("list_todos")) || []; function renderTodos() < listElement.innerHTML = ""; for (todo of todos) < var todoElement = document.createElement("li"); var todoText = document.createTextNode(todo); var linkElement = document.createElement("a"); linkElement.setAttribute("href", "#"); var pos = todos.indexOf(todo); linkElement.setAttribute("onclick", "deleteTodo(" + pos + ")"); var linkText = document.createTextNode("done"); linkElement.appendChild(linkText); todoElement.appendChild(todoText); todoElement.appendChild(linkElement); listElement.appendChild(todoElement); >> renderTodos(); function addTodo() < var todoText = inputElement.value; todos.push(todoText); inputElement.value = ""; renderTodos(); saveToStorage(); >buttonElement.onclick = addTodo; function deleteTodo(pos) < todos.splice(pos, 1); renderTodos(); saveToStorage(); >function saveToStorage()

A list element and an input element are first created by the code. The onclick attribute of the button element is then set to addTodo, which causes it to invoke the function when clicked. The function renderTodos() goes through every item in the todos array, creating a new li item for each one, setting its href property to «#,» adding a linkText node that says «done» at the end of it, and appending it to the listElement. The programme tries to build a list of tasks for the app. The list of tasks will be iterated over by the code, and each task will be added to an element with the id «listElement.» Hope you like the Todo List Template Using HTML, CSS & JavaScript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. Thank You For Visiting. Written by — Code With Random/Anki Code By — fernanda rodríguez

Источник