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

  Рет қаралды 10,752

CodePhilip

CodePhilip

Күн бұрын

Пікірлер: 23
@meghanohara9153
@meghanohara9153 6 ай бұрын
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
@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.
@CoveredInCode-yp5sv
@CoveredInCode-yp5sv 7 ай бұрын
I really appreciate the step-by-step and thorough explanation. So much better than those tutorials that don't explain anything!
@CodePhilipYT
@CodePhilipYT 7 ай бұрын
Thank you!
@SonaBeau_13
@SonaBeau_13 6 ай бұрын
During the journey of creating the To-Do List, I enjoyed it as well! Hehe, I love the process of building project.
@1yavuzahmet
@1yavuzahmet 17 күн бұрын
tesekkurler guzel anlatim olmus.
@zizom
@zizom 5 ай бұрын
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
@CodePhilipYT 2 ай бұрын
Hey, you can create tasks with the word delete and it will work just fine!
@itlead04
@itlead04 28 күн бұрын
awesome lesson, thanks!
@markjosephortizano5084
@markjosephortizano5084 2 ай бұрын
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
@CodePhilipYT 2 ай бұрын
Hey, do you mean like a dashboard for a logged in user where he can see for example his own to do list?
@markjosephortizano5084
@markjosephortizano5084 2 ай бұрын
Yes exactly bro
@CodePhilipYT
@CodePhilipYT 2 ай бұрын
@@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!
@HammerBummer-ro9ik
@HammerBummer-ro9ik 3 ай бұрын
the picture in the back caught my attention, what kind of picture is this?
@CodePhilipYT
@CodePhilipYT 2 ай бұрын
Its a tapestry I bought from amazon, just search for „mushroom tapestry“ or something :)
@ABITHASHREE-nq6fl
@ABITHASHREE-nq6fl Ай бұрын
i got an error undefine in add task
@CodePhilipYT
@CodePhilipYT Ай бұрын
Can you add your code?
@filipmagnuseinvik6323
@filipmagnuseinvik6323 7 ай бұрын
do you have the source to the code?
@CodePhilipYT
@CodePhilipYT 2 ай бұрын
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
@CodePhilipYT 2 ай бұрын
@@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
@TheIndianOutcast
@TheIndianOutcast 7 ай бұрын
Bro! Where have you been.....? Uploading a year later???
@CodePhilipYT
@CodePhilipYT 7 ай бұрын
I stopped coding but got back interested in it :)
@IleniaQuintero
@IleniaQuintero 6 ай бұрын
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.
Local Storage Explained In 10 min | Javascript
10:53
ProMaker Dev
Рет қаралды 63 М.
А что бы ты сделал? @LimbLossBoss
00:17
История одного вокалиста
Рет қаралды 11 МЛН
ПРЯМОЙ ЭФИР. Золотой мяч France Football 2024
4:41:06
버블티로 부자 구별하는법4
00:11
진영민yeongmin
Рет қаралды 28 МЛН
Build this JS calculator in 15 minutes! 🖩
15:20
Bro Code
Рет қаралды 629 М.
Валидация формы на чистом Javascript
34:01
Александр Дудукало
Рет қаралды 30 М.
Html, Css, and Javascript: How to make a to-do list tutorial
19:21
Project Code with AJ
Рет қаралды 2,2 М.
To Do List | Javascript Beginner Project Tutorial
10:16
CodePhilip
Рет қаралды 232 М.
Web Developer Roadmap (2024) - Everything is Changing
25:02
ByteGrad
Рет қаралды 403 М.
The Most Important Skill You Never Learned
34:56
Web Dev Simplified
Рет қаралды 213 М.
Incredible scroll-based animations with CSS-only
32:23
Kevin Powell
Рет қаралды 460 М.
А что бы ты сделал? @LimbLossBoss
00:17
История одного вокалиста
Рет қаралды 11 МЛН