Build a Todo list app in HTML, CSS & JavaScript in 2024 | JavaScript for Beginners tutorial
Вставка
- Опубліковано 3 жов 2024
- Learn how to build a todo list web app in HTML, CSS and JavaScript with the ability to display, create, edit and delete your tasks. Task list, to-do list, shopping list.
UPDATED VERSION (With Local Storage): • Build a Todo List App ...
Source code: github.com/Tyl...
// JOIN THE NEW DISCORD SERVER!
/ discord
// MY GEAR FOR CODING AND UA-cam
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.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE
it took me more 3 hours to complete the project ,yet i ve learned lots of things .Thanks budddy so much
Happy to help!
As a new developer i must say that you did a good job in breaking down the explanations properly and this video really helped. Good job👍🏾
Glad it helped!
I was trying to practice with several projects, but i was really bored. This was absolutely helpfull and fun, thank you SO MUCH!
Ayy awesome! We all love a fun project! :D
Idk why everyone complains about the speed. Im a beginner too and i find that you explained everything in detail. I love your videos, the styling here is really good, well done🙌👏
Thank you Iris!
2:38 html file
7:51 css file
21:26 js file
Great video, but I think for any future beginner videos, going at a slower pace would help us noobies out a lot!
I'll try to take that into account! Thank you!
It's super convenient to use the video playback functions like .75x and whatnot
I've been learning JS for 3 months now and stuck on how to take what I've been learning and create stuff with it. This has been a great intro into it's possibilities. Fun tutorial! Thank you :)
Great to hear!
Same here 😩 how are you doing now though?
Same!
Im glad im not the only one. I feel like im stuck in "basics Hell" and just need that final push
try this: find a record keeping problem in your home to solve
Example: A digital book catalog
create a book catalog where you can check books in / out
tasks:
1. create a new record (book title, author, etc)
2. generate a list showing books in various ways
- alphabetically by title
- alphabetically by author
- alphabetically by subj
- alphabetically by genre
3. create check in / out functions
- record date & time
- record to whom
level it up later by scanning the UPC or entering the ISBN to auto populate the book details.
to fast, more explanations.... we get it, you can do it, just explain more, and slow down .... you will have a great channel if you do this !
Noted!
@@TylerPotts You the man !!!
@@ikleveland you tell me how to make it save when i leave tne page plz cant figure it out
@@gamerparadise3694 currently there's a video in the description describing that!
short videos are better !
I have seen some very long videos that never gets completed!
Very well structured tutorial. Thought I could already do it myself with my basic JavaScript skills.
Had no actual problems until I came to the part with deleting posts (I didn't even had an edit function built in.)
But this taught me a lot, thanks for that :)
Woo! Happy I could help!
Thankyou so much for the tutorial, learnt many new things !
thanks a lot for this video. I have been programing quite long time but still could learn couple of programming techniques that helps me a lot!
Tyler great video. I am not a beginner. However, it showed me how to complete CRUD operation with basic DOM manipulation techniques. Bravo! Great Job!
Glad it was helpful!
Best tutorial i've done so far. Thanks Tyler !
Glad it helped!
Hi Tyler! Thanks for the great video. To do list app is very useful for beginners in Javascript, so your video helped me a lot
You're very welcome!
Hi Tyler, it was an intersesting project. The "not" condition in css was a bit new and confusing but the project as whole was very interesting and helpful. Thanks again 🙂
I'm happy you learned something! The not condition is super powerful! 💪
1:54 made me pause the video to make a cup of delicious-looking tea like yours. Hardcore tea lover here
Imma continue this tutorial and get back.
Haha, you got to make a good brew!
You bet!
That said, I loved your video tutorial and narrations. I am still halfway through Js part coz I am trying to sink in everything you teach here.
I must say, it's looking beautiful thus far. Thanks for the share mate!
Regards from France!
Great tutorial for beginners. Thank you very much!
You're very welcome!
Hey, I've never found a video worth commenting on before...until today! I found you so easy to follow! I started coding 8 weeks ago, mainly html and css, but wanted to get to grips with how to use javascript. This video was perfect as I really liked the way you show the divs with the tasks in for the css benefit, then take them away completely, showing us how to then add them with javascript. OK, your javascript part of the video was a little fast but that may well be that I wasn't confident with my code. All I can say is, very much appreciated, great video and thank you!!
Thank you, Julie! That made my day 😁
@@TylerPotts to be honest, your video made my day because I've been struggling to get to grips with how to combine CSS styling and JavaScript. Your video showed exactly what I needed to see in a way that was understandable! If you get a minute to reply, did you make a video after this one? And if so which video? I've subscribed but haven't had a chance to look through yet.
There's a similar video which covers local storage as well which I've just created it's a task list app but for 2022!
@@TylerPotts awesome. I'll take a look.
Definitely keep posting...you're a great youtuber!
im in the same boat haha. also ya during the javascript part i can confidently say i was just writing what he was and not knowing what i was doing :D
Awesome. Thank to you I know how to create a nice Todo by following step by step you explanation in this video. Clear image that I can read even in my cell phone. Thank you much.
Hi Tyler. Thanks for the lesson, great.
Glad you liked it!
thank u so much bro and because it is a good video I did LIKE and SUB for u ok bro keep it up well done and I'm new so this is will be my first project bro thx
Thanks and welcome
Decent video. That’s a lot of CSS!
It is definitely a lot of CSS 😅
@@TylerPotts Yeah. I do like the variables however.
Useful,Thank u!
Glad it was helpful!
Great vid! :)
I tried to make this with localStorage and omg it gets fucked up...
saving tasks with an array was ok.
saving changes after deleting a task was also ok by getting the index of deleted task and splicing it from the array.
but it doesn't work when I edit a task. the index of the edited task always becomes -1 so I can't replace the original task in the array with the edited one.
help?? :)
I am also facing problems while trying to make it with localstorage, the rendering and adding to storage work fine but editing the changes is so confusing, btw how did you get the index of the task to delete? can you link the github/code please, ty
Great video but man your are fast AF slow down and explain stuff mainly JS .. otherwise 🔥
Noted!
Great Video but This isn't a tutorial video for noobs cus he isn't taking his time to explain some certain things
and don't bother coding while watching this video
you'll get frustrated
that's really awesome
Hey there, im getting an error when i run it and it doesnt add a task after i coded the JS - 'node' is not recognized as an internal or external command,
operable program or batch file
Thank you for this video, can you please do this same idea with saving data in SQLite, so the entire application (HTML, CSS, JS and the SQLite db) can be moved and run on other computers without a hosting server or even run it from a flash drive. I would like to add the login function as well. Thank you again.
can someone tell me what was the answer to the localStorage question? I didn't understand it.
write the syntax
too good and thanks a lot
Sir, Which extension you are using for code suggestions? Plz 🙏
thanks for the tutorial ,can u tell me What RPM does your channel have?
Yo how do you get the auto suggestions for Javascript in VS Code where it suggests the next line for you? Great video btw thanks ❤
Wow,this video explains exactly what I didn't understood before and ofcourse I got to learn numerous new methods.🎉
But for now ,I want to know how to add the local storage as continues to this task lists...
21:30 JS begins here
nice explanation and project
actually u did just program and not really explain a lot. minus for that
Man i love the way you code, learned a lot of vscode shortcuts along with JS. Great tutorial.
Woo happy I could help!
Could we have a part 2 with localStorage please :).
I just watched video and then did it all by myself, on top of that I added error popup on submiting empty form :D . Everything was very well explained, thank you. I just want to know Is it okay to use this kind of small projects in my portfolio? of course more complex ones are better but still
Great job! That's awesome! Yes of course! Using projects like this show you can use all the essential methods of CRUD (create, read, update, delete) which looks great on a portfolio!
Thanks for answering ❤
dayum bro, you're fuckin' hero man. 10X u for save me.
Thank you
HI, may i suggest that you do a 2022 one for this year please
for people saying he went too fast: This is supposed to be a very brief tutorial, if you want more details and deeper understanding, don't click on a short video. Thank you Tyler for this! I have a lot of experience with python but I wanted to begin learning javascript so this was an excellent tutorial, please continue!
Thank you, Waqas. I'm happy you enjoyed it! :D
Everything works as shown in the video, but I am beyond confused as to why the tasks are truncated instead of properly adjusting vertically to the size of the display. I can't find anything online that has a solution to this.
can you please send the code with local storage
Great Content👏.. Would you let us know what IDE theme you are using in this video.?
VS Code :)
@@TylerPotts He is asking IDE theme not IDE name
muito bom mano
❤❤
Thanks, very informative. There are very few such interesting Russian-speaking lessons
Thank you bro is Good
Thank you for the video, definitely helped jump start things at the JS side.
Glad it helped!
hello...
It was a knowlegeable video , thank you so much for this .
Dope!
🙌
thanks man, this was my first web dev project took me 3 days to finish this video But i did it! appreciate you bro
great video, i love tutorials where i dont just copy but i learn along with it
Thanks for the little pieces here and there that really gave me hopes of making progress!
Please how will you make the to do list show as you are coding ❤
Loved this tutorial! Thanks for the help, I was stuck trying to build my own but came here and it was clear as the water, amazing explanation!
One question tho, whould it any different it you didn't create the task_content_el? (div inside task_el)
Is this responsive??
Also define the standard property 'background-clip' for compacbility ... You had it also as warning ... Howto fix ?? Thanks
@34:00 for delete operation, whats the difference between
1) list_el.remove(task_el) 2) task_el.remove()
Yop, thank you for your tutorial.
To respect more the DRY principle, you can create a simple function to no repeat the creation of an element and assignment of a class. This way, you can spare lines of code in your main.js:
function createElWithClass(newEl, newClass) {
const current = document.createElement(newEl)
current.classList.add(newClass)
return current
}
Simple use :
const taskEl = createElWithClass("div", "task")
Other thing : if the input is empty, displaying an alert box .. is kinda ugly for the user : )
const header = document.querySelector("header")
if (!task) {
const incorrectSub = document.createElement("p")
incorrectSub.textContent = "Please fill out the input"
incorrectSub.style.color = "red"
header.appendChild(incorrectSub)
return
}
im new to javascript and something i don't understand is how on the delete button event listener, removieChild(task_el) knows which task to delete? like how come when you click delete it just doesn't remove a completely different task, like the first one? how does it know which task you're trying to delete?
Nice video bro
My edit function is not working.... Focus is only getting aplied for the first element and value of button changing for the last one....any suggestions?
Great video. But remember, this video is teaching a beginner, not showing a teacher your skills. maybe slow down and explain things a little more, please. cheers
the best for everyone
Hey Tyler awesome project, great concepts for beginners to lear foundational wise. But a question, in your JS logic, would it be a good idea to create all the elements first, then append the Childs, then add the delete and edit functions?
Yeah that could work and while its loading all of them (in case of 100s) you could always add a loading bar or spinner!
When I click the Add Task button the word i typed dissapears and doesnt print out the word in the tasks section. Does anyone know where i could have messed up?
I got lost inside the function when you were creating new elements…
Also, copilot was really interfering with your tutorial sadly
But thanks for the hints on some features I had no idea existed in css! Keep it up!
Heyy!!'
Just wanted to know is it the same as CRUD???
or Local Storage???
Nice video! But I don't understand how javascript knows which toDo you are targetting when clicking on edit or delete. Because those DOM elements are targeted by ID. But multiple toDos have the same ID. Why, for example, aren't all the toDos deleted when you click delete? I am talking about the line 54, 55, 56. Thanks!
JavaScript is very smart and can read your mind.
I think that's an extension of vscode
Great video! I love it. Most videos are way to slow, but I think that your video is the exception, it's actually a bit too fast! (Especially in the JavaScript area). Don't get me wrong, I appreciate the too the point and consise nature of the video, but the second half felt more like a lecture than a tutorial.
You change the playback speed of the video, if that helps :)
Hi Tyler! This was a great video and I hope you are doing well. Is vanilla javascript still used in the industry or is everyone using js frameworks? Thanks
Vanilla JavaScript is widely used still! We use it at our place of work alongside other languages like php and css
omg.. spent the last six hours trying to understand a tutorial on how to make a todo list with JS and couldn't figure out lots of stuff. Came here and thats it, half an hour passed and I got it all! 🤣 huge thanks to you Tyler!!!
can you explain me why you have commented the div @21:19 and how did you access the commented div in JS in the javascript
Please I need help i have stucked over on adding tasks whenever I run my code i doesn't show on my screen i need someone to help me with this thanks
why most js programmer using semicolon? although can use without it, btw thanks for the tutorial
for some reason the variables set in root didn't work for me, had to enter the hex colors manually.
Hi, how would you generate an executable Jar file for the ToDo list program?
I wish someone explain with a bit more detail what is happening in each line of code at 27:53. I don't understand what all the different lines are doing.
Hi mate how do you use the app if you want to use independent of visual basis thank u
Hi, please does this "window.addEventListener" works on mobile phone?
Please what is the extension that is making does cool preset or demo code
Hey tyler. I have some queries related to javascript
Could you please guide me
how did you auto populate section.task-list into
so much repeated code and complex selectors but overall the vid is great
Intresting, I'll like to make a pull request for localStorage
Thanks for the step-by-step video.
Easy to follow.
Glad it was helpful!
May I know which extension are you using for css
Whats the extension for javascript to guess what you're going to write?
Hi Tyler, many thanks for creating this video and doing this project I really learned lots of new methods in js. if it is possible just do it slower that would be so great😊. but I think you've forgotten to put the link to the article CSS variables.🙂
Thank you and I will do! :D
You can always set the playback speed on UA-cam as per your preferences. Just saying!
i wanted to make something for my school
how can i make everyone see what i add
Thanks man....this helped alot
Glad to hear it!
Hi,I have a question.What was the purpose of setAttribute (readonly,readonly),while we simply could just set the attribute readOnly in the code?
i think this is among the most well explained tutorial
Thank you! :D
Nice tutorial, fun, straightforward and well explained concepts. I'm studying too so this has been really helpful. Just one thing if I may ask, how can I achieve the same result without using the -webkit- you used in the CSS to style the texts?
Yes I would also like to know this.
Hmm I don't think it's possible to achieve without webkit unless you use SVGs? Which may be a solution you could look into if you want!