ToDo List - Vanilla JS

Developer
Ajay Karwal
Size
3,546 Kb
Views
8,096
  1. ToDo List - Vanilla JS Previews
  2. ToDo List - Vanilla JS HTML Codes
  3. ToDo List - Vanilla JS CSS Codes
  4. ToDo List - Vanilla JS JS Codes

How do I make an todo list - vanilla js?

What is a todo list - vanilla js? How do you make a todo list - vanilla js? This script and codes were developed by Ajay Karwal on 26 December 2022, Monday.

ToDo List - Vanilla JS Previews
IQ Test

ToDo List - Vanilla JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ToDo List - Vanilla JS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Todo List</h1> <div id="list" class="listWrapper"> <div class="page"> <form id="addTask" class="cf"> <div class="cf"> <label for="title">Title</label> <input name="title" id="title" type="text" tabindex="1" /> </div> <div class="cf"> <label for="content">Content</label> <textarea name="content" id="content" tabindex="2" rows="4"></textarea> </div> <button id="submit">Add Task</button> </form> <hr> <section id="tasks" class="tasks"> <div class="task cf"> <h2>Create a Todo List</h2> <p>If you want the job, you better create a nice Todo List</p> <button class="delete">Delete</button> </div> <div class="task cf"> <h2>Impress at the interview</h2> <p>Relax, smile, and give it your best shot!</p> <button class="delete">Delete</button> </div> </section> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

ToDo List - Vanilla JS - Script Codes CSS Codes

* { box-sizing: border-box;
}
.cf:after { content: " "; display: table; clear: both;
}
body { margin: auto; font: normal 0.875em Arial; color: #1A1A1A;
}
h1 { text-align: center; margin: 30px 0;
}
h2 { margin: 0;
}
hr { border: none; height: 1px; background: #ccc; margin: 0; padding: 0;
}
form { background: #fff; padding: 30px;
}
form div { margin-bottom: 20px;
}
label { float: left; width: 20%; vertical-align: top;
}
input,
textarea { float: right; width: 80%; border: 1px solid #ccc; vertical-align: top; min-height: 30px; padding: 5px;
}
button { float: right; text-transform: uppercase; background: #3786f0; border: 2px solid #2473e1; color: #fff; padding: 10px 20px; cursor: pointer;
}
button.delete { border: none; color: #c00; background: none; padding: 0;
}
.container { width: 600px; margin: auto;
}
.page { background: #fff; border: 1px solid #ccc;
}
.listWrapper { background: #e5e5e5; padding: 30px;
}
.tasks { padding: 30px 30px 0; margin: 0;
}
.task { border: 1px solid #ccc; margin-bottom: 30px; padding: 15px 0;
}
.task h2 { padding: 0 15px;
}
.task p { border-bottom: 1px solid #ccc; padding: 0 15px 15px;
}
.task button { margin-right: 15px;
}

ToDo List - Vanilla JS - Script Codes JS Codes

// Some global variables
var taskList = document.getElementById('tasks'), task, taskTitle = document.getElementById('title'), taskContent = document.getElementById('content'), addTaskBtn = document.getElementById('submit'), deleteTaskBtn = document.getElementsByClassName('delete');
// Create new task
function addTask(e) { e.preventDefault(); // Build the task item var createNewTask = function(title, content) { return task = '<div class="task cf">' + '<h2>' + title + '</h2>' + '<p>' + content + '</p>' + '<button class="delete">Delete</button>' + '</div>'; }; if (taskTitle.value !== '' && taskContent.value !== '') { // Check if form is filled in and insert new task to top of list taskList.insertAdjacentHTML('afterbegin', createNewTask(taskTitle.value, taskContent.value)); // Add eventListener to the new Delete button, which is index 0 deleteTaskBtn[0].addEventListener('click', deleteTask); // Reset the form taskTitle.value = ''; taskContent.value = ''; } else { alert('Please fill in a title and content'); }
}
// Delete the parent node of selected Delete button
function deleteTask(e) { var thisTask = e.target.parentNode; thisTask.remove();
}
// On load, add click eventListeners to Add Task button and Delete Buttons
addTaskBtn.addEventListener('click', addTask);
for (var i = 0; i < deleteTaskBtn.length; i++) { deleteTaskBtn[i].addEventListener('click', deleteTask);
}
ToDo List - Vanilla JS - Script Codes
ToDo List - Vanilla JS - Script Codes
Home Page Home
Developer Ajay Karwal
Username ajaykarwal
Uploaded December 26, 2022
Rating 3
Size 3,546 Kb
Views 8,096
Do you need developer help for ToDo List - Vanilla JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ajay Karwal (ajaykarwal) Script Codes
Name
Custom animated checkboxes
CSS Grid Test
Skew Test
Skill Bars - React Component
Change Case
Pen Credit
Find PI to the Nth Digit
Template 1
React Button variants test
Palindrome Checker
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!