Build a Todo List App in HTML, CSS & JavaScript with LocalStorage in 2022 | JavaScript for Beginners

Подписаться 57 тыс.

Просмотров 102 тыс.

50% 1

Learn how to build a Todo list application in 2022 with HTML, CSS and JavaScript. You will learn the basics to JavaScript along with some more advanced features such as LocalStorage for saving data to the browser.
Source code: github.com/TylerPottsDev/yt-j...
// JOIN THE DISCORD SERVER!
/ discord
// BECOME A MEMBER TO UNLOCK MORE CONTENT!
ru-vid.comjoin
// TIMESTAMPS
00:00 Intro
01:39 HTML
11:14 CSS
33:20 JavaScript
49:25 Takeaways & Outro
// MY GEAR FOR CODING AND RU-vid
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// FOLLOW ME ON TWITTER
/ tyler_potts_
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

Хобби

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 117

@howdy9517 Год назад

Warning to students. If you’re gonna code along. Dont try to be fancy with html class name. This will save you a lot of headaches.

@daidensacha Год назад

Thanks Tyler, It was fun to code along. I really like the flow of your code, and your implementation of the project. Perfect timing for me to come across your tutorial. Much appreciated.

@TylerPotts Год назад

Awesome, thank you!

@CoconutwCoco 10 месяцев назад

I love it, the category part is exactly what I am looking for. please make more with more real life functions like creating a category, having multiple subcategories, making an user

@umiamira3332 Год назад

Thank you! I code along and learned many things, especially how to localstorage.

@magmax0309 Год назад

Excellent tutorial, keep on doing this. thanks

@carlosl-f2433 Год назад

Really liked this tutorial. Great manner of speaking, logic was great. Nicely done.

@WRB-WellyRoadBoysPodcast Год назад

Good to see you smashing it bro!

@TylerPotts Год назад

Appreciate it!!

@johncelleherrera Год назад

Man!!!! This deserves more views, likes and subscribers :)) I love it bro

@Globalfacts0 Год назад

Boss you the best. Great interface and awesome functionalities🔥 ✊✊✊

@blackbrocolli691 Год назад

Awesome video!

@marcelaquezada2596 Год назад

Thank you so much, best tutorial about crud, really nice project.

@davidwillian680 Год назад

thank youuuuu very muchhhhhhh from Brazil.

@aizatarifroslan1194 Год назад

thank u soo much it helped a lot

@carolineweir1726 Год назад

This is great, thank you so much. I've learned a lot. Got a bit confused at some of the JS but early days in my coding journey!

@vuchke 2 года назад

as a guy who is starting to learn code again, thanks for using different techniques in your css! you da real MVP

@TylerPotts 2 года назад

Happy to hear that!

@tranvuhao6246 2 года назад

Thank you for your video !!!

@TylerPotts 2 года назад

You are welcome!

@flybon1097 2 года назад

Thank you for your help You explain every line of code with meticulous detail After checking the error messege I was able to fix the problem .

@TylerPotts 2 года назад

Glad it helped

@flybon1097 2 года назад

@@TylerPotts I would like to see how you can make the ToDo app responsive Or maybe change the edit and delete button to fit the screen when it's in mobile size Anyways I love your videos and how you explain everything I subscribed

@germanrojas4517 Год назад

Hey Tyler, thanks for making this great video. I'm having some trouble adding the sort functionality....how did you accomplish this? I looked at your source code and could not find any answers. Thanks!

@ahmedelkhdrawy6915 11 месяцев назад

From Egypt 🔴⚪⚫ Thank you so much for your effort and sharing your deep knowledge.💖

@arshiashaikh8180 Год назад

Amazing tutorial, superb explanation. Absolutely enjoyed. The UI too is perfect. I struggled with js a bit, so any suggestions on how to improve js ?

@boody8844 Год назад

I know it's been 8 months but I recommend you go and dabble some questions on codewars

@matthewokadinya6514 Год назад

Hey Tyler! Wonderful project. I've been trying to add a reminder functionality to the app. How do you think I should go about it. What advice and one liners do you have for me. Thank you!

@maccabro7 Год назад

Amazing tutorial

@anneclaire4253 2 года назад

Thank you so much!

@TylerPotts 2 года назад

You're welcome!

@adnanshaikh4036 2 года назад

Keep up the good work , love from India ❤️

@TylerPotts 2 года назад

Thank you!! Shout-out to India! :D

@tumeke4ubro Год назад

Hiya, great tutorial, I'm a newbie just learning and have been following along, I have the exact same code in VScode as you do, but my data for some reason is not being held in storage? I did notice that where you have nameInput.value = username; on your code value is showing as a different color however mine is not - does this mean anything? Any other ideas where it might be possibly be going wrong? Thank you!

@jakobpusterhofer5182 Год назад

nice tutorial !! i liked it alot Can you tell me what kind of theme you are using in vs code ?

@Max-ps5nr Год назад

I love this todo list app, i will use it on google

@LAUGHWITHRYDHAMPREETSINGH 4 месяца назад

Before watching this video, I would love to know if I can still deploy it on vercel the normal way. Since it uses local storage and all

@Anotherhumanexisting Год назад

Hi! Loved the 2021 tutorial, now I am trying to update it with these features. However, the radio buttons do not show up, only the labels do, when I add them (checkboxes don't show either). I can't find an answer online but I assume it has something to do with the CSS styling. Thoughts?

@Devsycoder Год назад

Could anybody help me with how to make the delete and the edit button responsive to the block? so it doesnt cover long text. The only reason i want it responsive is becasue im setting it up on mobile and i see it doesnt fit in correctlty.

@zalodias123 2 года назад

Would be awesome if you made this same project in React or Vue. So we could compare approaches, and understand better how a framework can help!

@TylerPotts 2 года назад

Great suggestion!

@PlusSe7en 2 года назад

@@TylerPotts Please let me know if you do this! thats exactly what i need.

@Globalfacts0 Год назад

My suggestion is that you input a space for time. So that users can set the time they want to do their task and create an alarm that goes off when it's time for users to do the task.🤞

@NagatoKamiPain Год назад

Hi there, love your work. I am currently on HTML part and this label thing is giving me a hard time. When I put it in HTML validator I get "Element div not allowed as child of element label in this context. (Suppressing further errors from this subtree.)" is this something to consider not to do in future or?

@Jhorel.93gs Год назад

it's possible use a time notification calendary and on this project ?

@kireeti1120 5 месяцев назад

I tried to update ur 2021 todo list app without local storage to one with local storage but my edited inputs which contain spaces are not being updated and those words are becoming seperate attributes in content html ..... Can u help me with this???

@seanfernandes4438 Год назад

So perfect

@lindauragoulart8001 Год назад

now i am in a good mood

@iamtrazed Год назад

How can I prevent the Add Todo button from working if the input field of the id="content" is empty?

@nikhilgupta9876 Год назад

Hello Sir, It was a great tutorial and learned so many things from this.....but it would be great if you store data in IndexedDB

@Kieran_GG Год назад

.todo-item .todo-content { flex: 1 1 0%; } Doesn't seem to be working correctly, as it still cuts off around 1/3 of the way along the white space. Any ideas? Thanks!

@Salah-YT Год назад

hi any help me out please the grid-gap doesn't work from CSS line 89 I can't separate them i do the same is him but I think CSS company they changed this property so I dont know how is work how to make a gap thx

@TylerPotts Год назад

I believe 'grid-gap' is now called 'gap', I should look to update this soon.

@Salah-YT Год назад

@@TylerPotts yes bro even VS-CODE telling me grid-gap have been changed to gap but i use it with rem and em and % it is not working so i ignore it ill follow u to complete the javascript so if u find it out let me know thx

@ASsoul065 10 месяцев назад

I have a problem with my JS script. This is my error code: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). Can anybody help me?

@BarbaraCallahan-vv3tz Год назад

what is this local storage that you open with chrome?

@clayton101201 Год назад

am having trouble with my .todo-list .list section. it not formatting correctly. any help?

@graykaufmann Год назад

35:53 How does e.target.value work and why do you need it ?

@mahmoodnazari5233 2 года назад

It's great, I enjoyed it, but what theme and extension(s) you used for vs code?

@TylerPotts 2 года назад

Thanks and I have a video covering the extensions on my channel if you're curious. The theme is Synthwave 84

@da372 3 месяца назад

Hi I need to make a todo app with taski priority and calendar time to it with search and priority filter and crud operations in html css javascript can you make it please before Sunday?

@enesbirdal3443 9 месяцев назад

is it resposive designed?

@mikha-ilallie2321 Год назад

The only problem I am having is that whenever I refresh, my todo list goes away and only comes back when I add a new todo. Great video though! really interesting. Anyone have any advice for me about my issue?

@a.j999 Год назад

hi can anyone help me input.checked = item.done ican't understand what is this meaning

@ishratkaur1605 Год назад

Why do we use e.target.elements ? What is the use of 'elements' in there ?

@freshoilonyou Год назад

I asked thesame!

@bruh-qi7ue 2 года назад

So does this append the elements by using local storage each time you reload? Cause I used innerHTML (in my own project) to save my div to local storage but editing and deleting does not work.

@TylerPotts 2 года назад

Hmmm interesting my method saves an array and then you reload the array and call the display function to actually display the loaded todos

@FakeMister 2 года назад

First and thank you!!

@TylerPotts 2 года назад

SPEEEEEED and no, thank you! :D

@angusundies7878 Год назад

hi @tylerPotts, I keep getting " Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') " on line 14 in the javascript file and i'm unsure why

@Veganmylk Год назад

I got the same message, did you manage to find a solution? I can't seem to find any helpful and specific info on Stack overflow.

@JosephRedwoodMartinez Год назад

Two questions: 1. does injecting the html using innerHtml go against best practices? is there a better alternative? 2. Would it be advantageous to refactor this code to separate the application logic from the DOM stuff? seems like the single-responsibility principle could be applied and the code could be broken up a bit into smaller chunks I enjoyed coding along to this video, and I really learned a bunch. But I also wondered if I might be picking up some tricky habits here that are best avoided when working on larger projects.

@jaymarley6172 Год назад

yes you can separate the logic its up to you how you want your architecture to be especially if it makes your files more manageable

@santamilutina8915 Год назад

When you click on pink bubble it still ends up being blue in the list...

@ManuMarea 2 года назад

Great , can i have a to do lista with active links submitted ?

@TylerPotts 2 года назад

Yeah but it'll be a bit more complex than this tutorial!

@e.alarcon5322 Год назад

I feel ya. I've tried Ableton, Reaper, even shelled out for Cubase and I am no closer to understanding any of tNice tutorials than I was before. I don't

@josephito27 8 месяцев назад

I managed to translate this app to React with 0 styles lol but works perfectly

@digitalmarketingviral2591 Год назад

how did you write the cyan dot on line 15 of the main.css. i use just a dot, but it didn't work.

@UnjustCrow Год назад

It is an asterisk (*). :)

@Derpuniversity Год назад

I got everything but have ran into one issue. When I refresh the page my todos dissappear until I click 'Add todo' I am assuming this is a local storage file issue with my JSON commands in Javascript but I am not sure as I have looked over the code and it is all the same.

@dominick358 Год назад

im running into the same issue did you find a solution?

@treytzee Год назад

Hey I tried executing the github file code and the to-do list isn't showing up. Console log is saying that todos.push() is not a function and todos.forEach() isn't either. Do you know what's wrong with it? Maybe the global variable isn't working?

@Michelle-me6sg Год назад

did you every manage to solve this? i'm having the same problem.

@RTidsy Год назад

@@Michelle-me6sg you need to just put "let todos = [ ]" before the load event listener. Any issues i'd use ChatGPT to check

@ikouwemudoh8333 Год назад

Experiencing the same challenge, please did you resolve this ?

@user-xu7jz4li7e Год назад

the code doesn't work....something wrong with the way todos was declared as variable. not even adding a 2000ms timeout helped. :(

@ahmetdikbayir6518 Год назад

Hello everybody, Thank you Tyler for this tutorial. And I want to say that my program has some problem. My todo list do not strike out my assignment. So, I can solve this problem by changing css the last code like that; .todo-item.done input { text-decoration: line-through; color: var(--grey);

@rishaangupta131 Год назад

npx : The term 'npx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + npx live-server . + ~~~ + CategoryInfo : ObjectNotFound: (npx:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException it is not letting me create the server? can somebody help? is the server nescesary for this app to work?

@madhumathi93 Год назад

Same problem

@TheCrowdel 2 года назад

nice tutorial i subscribe, wait another tutorial

@TylerPotts 2 года назад

Thank you! More are coming soon! :D

@sydneyiansalazar6117 Год назад

Element “div” not allowed as child of element “label” in this context. (Suppressing further errors from this subtree.) I tried to validate the html and this is the error. how to fix this btw?

@sydneyiansalazar6117 Год назад

since if I change the element the js would be changed as well

@sydneyiansalazar6117 Год назад

I changed the div element into a span element as label cannot have a div element as a child and so far it is still working

@Jhorel.93gs Год назад

How do I keep tasks added first? They are always added at the end Thanks From Brazil! :D

@mattwest4083 Год назад

did you try insertAdjacentHTML with "beforeend"?

@beckyb9215 2 года назад

is the github copilot now available?

@TylerPotts 2 года назад

I don't believe so you still have to request access.

@arthabhunter Год назад

sir i am confuse i have learned js but i should move in react to get a job but i think if i do react i will forget js could u please suggest me i am self learner

@wttc4 Год назад

no, you won't. Make some projects using JavaScript, then go learn React.

@zachfenton608 2 года назад

Awesome. i want to intergarte it with mongodb.

@TylerPotts 2 года назад

Go for it!

@zachfenton608 2 года назад

I am about to work on your code, I have another db express program. I have been in the garden so this evening i should work on it

@lorenzosansone2594 2 года назад

Can we use this on our mobile phones? How can we do?

@josephito27 8 месяцев назад

just deploy the app.

@carloscastro4398 Год назад

how

@factopunk 2 года назад

Bring discord bot series back

@s0mbrrer0 Год назад

Tyler, here you have hints for the code, for example const canvas = document.getElementbyid('canvas'). What plagin VS

@johnhenryrey Год назад

Let's make soft!

@bhopathivardhankumarreddy40 Год назад

how can we open this on a mobile? Can you please tell me

@deivymorales1 Год назад

No me sirvio :(

@izzy20. 2 месяца назад

trash

@juanmanuelruizmolina6092 Год назад

Your video is non sense ,for me.

@JhoEspana Год назад

Thanks ... Why didn't you use and document.createDocumentFragment? is this possible?

@peiw.5768 Год назад

Here's my code for sorting by createdAt // add new todo to todos array todos.push(todo) // sort the todo items by created date sorted_todos = todos.sort(function(a, b) { return b.createdAt - a.createdAt }); // save the sorted_todos to localStorage // localStorage.setItem('todos', JSON.stringify(todos)); < - - - the original code localStorage.setItem('todos', JSON.stringify(sorted_todos));