HTML Dynamic Todo List

Written by @kerixa 11 March 2021

HTML Dynamic Todo List For cases where forms are used in the websites, we must have the beauty of the forms because the forms are the user interface with the website and must be very beautiful and comfortably designed. The following code provides a dynamic checkbox list which can be used as a todo list. You have an option to add items to this list as well.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
:root {
	--font-1: "Roboto", sans-serif;
}

body {
	background: linear-gradient(to bottom, #d22d36, #b24d65);
	background-size: 100%;
}

.container {
	display: block;
	margin: 0 auto;
	width: 100%;
	max-width: 500px;
	overflow: hidden;
}

.container h1 {
	color: white;
	text-align: center;
	text-decoration: underline;
	font-family: var(--font-1);
	margin: 20px 0px 5px 0px;
}

.container form {
	display: block;
	margin: 0 auto;
	text-align: center;
	background: white;
	padding: 20px 0px;
}

.container .todo-input {
	display: inline-block;
	font-size: 25px;
	border: none;
	outline: none;
}

.container .add {
	margin: 0px;
	background: #ccc;
	border: 5px solid #ccc;
	font-size: 25px;
}

.container .todo-container {
	background: white;
	margin: 20px 0;
	width: 100%;
	min-height: 300px;
	padding: 10px;
}

.container .todo-container li {
	display: block;
	width: 95%;
	text-decoration: none;
	border-bottom: 3px #ccc solid;
}


/* The container */

.checkbox {
	display: block;
	position: relative;
	padding-left: 5px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/* Hide the browser's default checkbox */

.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}


/* Create a custom checkbox */

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	background-color: #eee;
}


/* On mouse-over, add a grey background color */

.checkbox:hover input~.checkmark {
	background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.checkbox input:checked~.checkmark {
	background-color: #b24d65;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}


/* Show the checkmark when checked */

.checkbox input:checked~.checkmark:after {
	display: block;
}


/* Style the checkmark/indicator */

.checkbox .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.container .todo-container li div {
	display: inline-block;
	font-size: 22px;
	padding: 0px 10px 10px 40px;
	margin: 0px;
	font-family: var(--font-1);
}
</style>
<div class="container">
  <h1>Todo List</h1>
  <form>
    <input type="text" class="todo-input" placeholder="enter a todo">
    <button type="button" class="add"> + ADD</button>
  </form>
  <div class="todo-container">
    <li class="todo-item">
      <label class="checkbox">
        <input type="checkbox">
        <span class="checkmark"></span>
      </label>
      <div>Terraform Mars</div>
    </li>
    <li class="todo-item">
      <label class="checkbox">
        <input type="checkbox">
        <span class="checkmark"></span>
      </label>
      <div>Clean Car</div>
    </li>
    <li class="todo-item">
      <label class="checkbox">
        <input type="checkbox" checked="checked">
        <span class="checkmark"></span>
      </label>
      <div>Go to the store</div>
    </li>
  </div>
</div>
<script>
let input = document.querySelector(".todo-input");
let add = document.querySelector(".add");

add.addEventListener("click", function () {
	let value = input.value;
	if (value != "") {
		addTodo(value);
	}
	input.value = "";
});

function addTodo(x) {
	let parent = document.querySelector(".todo-container");
	let kid = document.createElement("li");
	kid.classList.add("todo-item");
	kid.innerHTML = `
	<label class="checkbox">
	<input type="checkbox">
	<span class="checkmark"></span>
	</label>
	<div>${x}</div>`;
	parent.prepend(kid);
}
</script>
<a target='_blank' href='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Designer Diva, Jirgensons E, vamsi, wapmohin, azmir
advertisement 2