In the hustle and bustle of daily life, everyone relies on to-do lists to stay organized. However, the downside is the clutter of physical notes on your desk. To address this, I embarked on a mini project to create a tool that allows me to store my to-do lists directly in our customer portal. This way, I can access and save my tasks in the customer account I'm currently working on, ensuring seamless organization.
We've all experienced moments of overwhelm, juggling multiple tasks and possibly forgetting crucial items. This is where online to-do lists come to the rescue. Whether for work, personal life, or groceries, having a digital to-do list helps prevent desk clutter and ensures tasks are always visible.
As part of our ongoing efforts to enhance our customer portal, we've introduced various features, including an improved Email Signature Generator, domain management, and a tool for creating and launching personalized landing pages. Our goal is to transform the customer portal into a comprehensive platform catering to the needs of budding entrepreneurs, offering tools for invoicing, planning, client management, and more.
To address the challenge of managing software and development projects effectively, I initiated a project to create a customizable online to-do list within our customer portal. Below, I outline the steps I took to develop this tool.
I started with the HTML structure, creating input fields for task name and description, along with a "Save Task" button. Bootstrap classes were used for styling.
<div class="col-12">
<label>ToDo Name</label>
<input class="form-control" type="text" placeholder="Task Name" id="todoName">
<label>ToDo Description</label>
<input class="form-control" type="text" placeholder="Task Description" id="todoDescription">
<button id="submit_btn" class="btn-primary btn mt-2">Save Task</button>
</div>
<div class="col-12 mt-2">
<div class="alert-danger" id="errors"></div>
</div>
<div class="col-12">
<div id="todo"></div>
</div>
The JavaScript logic handles input validation, creation of to-do elements, and saving/retrieving tasks from local storage. Functions were created to check input, create to-do elements, save tasks, retrieve tasks on page load, and delete tasks.
window.onload = function () {
getToDoList();
};
var enterButton = document.getElementById("submit_btn");
enterButton.onclick = checkInputToDo;
function checkInputToDo() {
clearErrors();
var name = document.getElementById("todoName").value;
var description = document.getElementById("todoDescription").value;
if (name.length > 0 && description.length > 0) {
makeToDoElement(name, description);
saveListElement(name, description);
} else {
showErrors(name, description);
}
}
function clearErrors() {
var errorBox = document.getElementById('errors');
if (errorBox.innerHTML !== "") {
errorBox.innerHTML = "";
}
}
function showErrors(name, description) {
var errorBox = document.getElementById('errors');
if (name.length === 0) {
appendError('De naam van je TODO item is niet ingevuld');
}
if (description.length === 0) {
appendError('De omschrijving van je TODO item is niet ingevuld');
}
function appendError(errorMessage) {
var p = document.createElement('P');
p.appendChild(document.createTextNode(errorMessage));
p.classList.add('p-2');
errorBox.appendChild(p);
}
}
function makeToDoElement(name, description) {
var list = document.getElementById("todo");
var divcard = createDivWithClass("div", "card border border-primary my-2");
var divbody = createDivWithClass("div", "card-body-row");
var divcol10 = createDivWithClass("div", "col-10");
var h4 = createElementWithClass("H4", "card-title", name);
var p = createElementWithClass("P", null, description);
var divbtn = createDivWithClass("div", "col-2");
var dBtn = createButtonWithClasses("button", ["float-right", "btn", "btn-danger"], "X");
divcol10.appendChild(h4);
divcol10.appendChild(p);
divbody.appendChild(divcol10);
divbody.appendChild(divbtn);
divcard.appendChild(divbody);
list.appendChild(divcard);
function taskDone() {
divcard.classList.toggle("done");
removeFromSession(name, description);
}
divcard.onclick = taskDone;
dBtn.onclick = function (event) {
event.path[3].remove();
regenerateListForLocalStorage();
};
divbtn.appendChild(dBtn);
document.getElementById("todoName").value = "";
document.getElementById("todoDescription").value = "";
}
if (name.length > 0 && description.length > 0) {
makeToDoElement(name, description);
saveListElement(name, description);
}
function saveListElement(todoName, todoDescription) {
var todo = {name: todoName, description: todoDescription};
var todos = getStoredTodos();
todos.push(todo);
localStorage.setItem('todolist', JSON.stringify(todos));
}
function getStoredTodos() {
return localStorage.getItem('todolist') ? JSON.parse(localStorage.getItem('todolist')) : [];
}
function getToDoList() {
var todolist = getStoredTodos();
var listContainer = document.getElementById("todo");
listContainer.innerHTML = "";
for (var i = 0; i < todolist.length; i++) {
makeToDoElement(todolist[i].name, todolist[i].description);
}
}
function deleteListItem(event) {
event.path[3].remove();
regenerateListForLocalStorage();
}
function removeFromSession(name, description) {
var todos = getStoredTodos();
var updatedTodos = todos.filter(function (todo) {
return !(todo.name === name && todo.description === description);
});
localStorage.setItem('todolist', JSON.stringify(updatedTodos));
}
function regenerateListForLocalStorage() {
var list = document.getElementById("todo").children;
var todos = [];
for (var i = 0; i < list.length; i++) {
var nameElement = list[i].getElementsByTagName('H4')[0];
var descriptionElement = list[i].getElementsByTagName('P')[0];
if (nameElement && descriptionElement) {
var name = nameElement.innerHTML;
var description = descriptionElement.innerHTML;
var todo = {name: name, description: description};
todos.push(todo);
}
}
localStorage.setItem('todolist', JSON.stringify(todos));
}
function createDivWithClass(elementType, classNames) {
var div = document.createElement(elementType);
if (classNames) {
classNames.split(' ').forEach(function (className) {
div.classList.add(className);
});
}
return div;
}
function createElementWithClass(elementType, className, text) {
var element = document.createElement(elementType);
if (className) {
element.classList.add(className);
}
if (text) {
element.appendChild(document.createTextNode(text));
}
return element;
}
function createButtonWithClasses(elementType, classes, text) {
var button = document.createElement(elementType);
if (classes) {
classes.forEach(function (className) {
button.classList.add(className);
});
}
if (text) {
button.appendChild(document.createTextNode(text));
}
return button;
}
CSS styling includes a "done" class to visually indicate completed tasks with a FontAwesome icon and a background color.
.done:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;
font-size: 80px;
position: absolute;
right: 70px;
color: #34b534;
}
.done {
background: #d3efd3;
}
By integrating a customizable online to-do list into our customer portal, I've created a convenient tool for efficient task management. This solution allows for the seamless storage and retrieval of tasks, promoting a clutter-free and organized workspace. As I continue to enhance this tool, the goal is to enable users to manage multiple lists for different projects and provide a comprehensive overview for better task prioritization.
Also interesting
Expand your knowledge with the 4BIS Blog...
Web development, Software Modernisation, Business software, Managed Hosting, Saas
API connections are essential for seamless integration between software systems, but determining the cost of creating one can be complex. In this guide, we break down the main factors that impact API development costs—including data volume, security...
Read moreWeb development, Software Modernisation, Ecommerce / Webshop, Business software, PHP, MySQL, HTML & CSS
Discover 5 essential tips for finding the right software developer, from price-quality ratio to location and experience. Read our helpful guide!
Read moreAutomate, Web development, Software Modernisation, Business software, Knowledge Base
Discover how automation of your software and processes can improve your business. Learn about the benefits of automation and how it can make your operations more efficient. Contact us for customized automation solutions.
Read more Do you want to know more or are you interested? Please feel free to contact us directly, by phone or via mail.
Or use one of our contact forms so that we can answer you as quickly and appropriately as possible can give. We would love to hear from you!