Save To Do List in Browser (NO DATABASE NEEDED) | JavaScript Beginner Project

#javascript #todolist #localstorage
📌 In this episode we will learn how to create a To Do List that uses LocalStorage which is like a database inside your browser on the client side, so no backend is needed! Im using HTML, CSS and JavaScript.
📢 Subscribe if you want more Javascript Beginner Project Tutorials
👍 Leave a like if you enjoyed it
📢 If you have feedback or suggestions for projects that I could build, please tell me in the comments below.
🔽 📋 My latest Three Javascript Beginner Projects Tutorials: 📋 🔽
➡️ To Do List | Javascript Beginner Project Tutorial
🔗 • To Do List | Javascrip...
➡️ Change Background color on Click | Javascript Beginner Project Tutorial
🔗 • Change Background colo...
➡️ Number Guessing Game | Javascript Beginner Project Tutorial
🔗 • Number Guessing Game |...
📼 Full Playlist with all Javascript Tutorials:
🔗 bit.ly/2RbwdWz
#javascript #beginner #projects #tutorial #html #css #coding #sourcecode #cssgrid #cssflexbox #code #webdevelopment #frontend #dev #todolist

[@CoveredInCode-yp5sv]

I really appreciate the step-by-step and thorough explanation. So much better than those tutorials that don't explain anything!

[@CodePhilipYT]

Thank you!

[@meghanohara9153]

This video was SOOO helpful. I have been banging my head against a wall trying to find a tutorial for a todo list for beginners and everyone claims they are for beginners but are really way more detailed and advanced making it so much more confusing than it needs to be and this version you put out was so straightforward and easy to code along with and understand. Thanks so much for posting! You saved my sanity! My next project to tackle is a memory game any chance you want to help with that!???

[@luffy-taro1065]

thank you very much i was stuck on this assignment for like 3 days and tried many things refered many code and stuffs but couldnt understand much but you man saved my. made the concept crystal clear.

[@SonaBeau_13]

During the journey of creating the To-Do List, I enjoyed it as well! Hehe, I love the process of building project.

[@HammerBummer-ro9ik]

the picture in the back caught my attention, what kind of picture is this?

[@CodePhilipYT]

Its a tapestry I bought from amazon, just search for „mushroom tapestry“ or something :)

[@zizom]

Thank you for this great tutorial I learned a lot. I have a question about how you handle the delete text. Wont the you code used in the video make any delete word get deleted ? What if i wanted to add a note about delete old files for example ?

[@CodePhilipYT]

Hey, you can create tasks with the word delete and it will work just fine!

[@markjosephortizano5084]

I have one question
I'm newbie at IT Programing
Now I'm learning JavaScript first. How do we create dashboard by using only button on front then it will redirect to dashboard?

[@CodePhilipYT]

Hey, do you mean like a dashboard for a logged in user where he can see for example his own to do list?

[@markjosephortizano5084]

Yes exactly bro

[@CodePhilipYT]

@@markjosephortizano5084 Thats a bit more complicated because we need to add user authentication and for that we need a backend language or framework like node.js for javascript or what I like to use is php. You will also need a database to store the user data.
I plan on doing a tutorial about that soon!

[@TheIndianOutcast]

Bro! Where have you been.....? Uploading a year later???

[@CodePhilipYT]

I stopped coding but got back interested in it :)

[@filipmagnuseinvik6323]

do you have the source to the code?

[@CodePhilipYT]

Here is the javascript code:
const addButton = document.getElementById('addTask');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
loadTasks();
function addTask() {
const task = taskInput.value.trim();
if (task) {

createTaskElement(task);
taskInput.value = '';
saveTasks();
} else {
alert('Please enter a task!')
}
}
addButton.addEventListener('click', addTask);
function createTaskElement(task){
const listItem = document.createElement('li');
listItem.textContent = task;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.className = 'deleteTask';
listItem.appendChild(deleteButton);
taskList.appendChild(listItem);
deleteButton.addEventListener('click', function(){
taskList.removeChild(listItem);
saveTasks();
});
}
function saveTasks() {
let tasks = [];
taskList.querySelectorAll('li').forEach(function(item) {
tasks.push(item.textContent.replace('Delete', '').trim());
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function loadTasks() {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.forEach(createTaskElement);
}

[@CodePhilipYT]

@@pawanbakle2893 Hey, here is the css:
body {
font-family: Arial, sans-serif;
}
.container {
text-align: center;
margin: 0 auto;
width: 50%;
}
h1 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f7f7f7;
padding: 8px;
border-radius: 5px;
}
.deleteTask {
background-color: #ff6b6b;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
And here is the HTML Code:



To Do List


To-Do List

Add

[@IleniaQuintero]

Hello,
I was looking at your video channel. We may be helping a company that uses secure images to increase supply chain security and help cloud native development. Would you be willing to help try their software, make a video, and help show devs how to use their tools?
This is not an offer, but just to start a conversation about your willingness to take on sponsorship. Please provide me with your email if you are interested.
You'd have a chance to look at their technology and decide if it's the type of software that you'd be interested in covering in your channel.