It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 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.
<!-- this script is provided by http://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='http://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!