The Odin Project To-Do List App

Рет қаралды 2,351

Күн бұрын

The purpose of this project is to build a to-do list app with vanilla JavaScript, vanilla CSS, HTML, and Webpack. JavaScript ES6 modules are used to keep my code organized. The Web Storage API is used to save and fetch the user's to-do list items.
Project Description: www.theodinproject.com/lesson...
My GitHub: github.com/mrzamin
0:00 - 2:03 Intro
2:04 - 4:48 Requirements
4:49 - 8:13 My To-Do List App
8:14 - 14:25 JavaScript
14:26 - 14:48 Final Thoughts
14:49 - 15:05 Outro

Пікірлер: 24

@dweezo2175 Ай бұрын

I'm impressed, I got to the project & my brain was too burnt out for the day and I couldn't think of what to encapsulate. You seem to have a good grasp on things taught so far.

@OdinScript Ай бұрын

It’s definitely hard. There are times when I can’t get going either, nothing’s working, and I’m filled with doubt. But I just choose not to quit one day at a time. Keep going. Thanks for watching!

@KnightHaowler 2 ай бұрын

I am also learning the MERN stack with help of KZfaq resources . Right now, you just popped into my feed. Firstly, I thought 'Odin' was your name. Then, I clicked to see the UI of your todo app and found out it's not your name. Then, I guessed it might be a framework, but when I saw your code, it was JavaScript. After Googling, I found out the Odin Project is an open-source web developer roadmap. Well, nice to meet you!

@OdinScript 2 ай бұрын

Haha, I would have thought the same thing. The channel name is supposed to be a mashup of words since I’m learning JavaScript and doing Odin. I’m not creative; that was the first thing that came to mind and I stuck to it. I would have stalled trying to choose a better name. Nice to meet you too!

@colleennicole7835 2 ай бұрын

I am also working through the Odin Project, it was fun to see your video pop up on my KZfaq Homepage 😊 Great video and best of luck with your projects!

@OdinScript 2 ай бұрын

That’s great; I hope you are enjoying it. TOP has been the perfect fit learning tool for me. It’s cool to see it works for so many people all over the world as well. Good luck, and thanks for watching!

@syedubaid11 2 ай бұрын

Was looking for this ! Much needed content.

@OdinScript 2 ай бұрын

Great! Thanks for watching.

@g.alarcon9011 2 ай бұрын

I found this video in my "All" section wich is great because I'm just learning English at the same time I'm learning web development, and these videos are amazing for doing both.

@OdinScript 2 ай бұрын

I’m glad these videos offer something positive. Best of luck in your learning!

@gazzarDev 2 ай бұрын

I am also doing the to-do list app from Odin these days!.. great work 👏

@OdinScript 2 ай бұрын

I appreciate the compliment. Stick to it! We will eventually get to where we want to go.

@wojciechsobiesiak 2 ай бұрын

And I yeasterday wrote my first bootloader, so I can start working on my own OS. Keep writing this odin project.

@OdinScript 2 ай бұрын

That’s an awesome project. Congrats. And it’s the plan!

@rinzler749 2 ай бұрын

did you install WSL2 for the odin project or you're using windows?

@OdinScript 2 ай бұрын

I actually did the Windows/Linux dual boot. At the time it was the recommended way. I know that has changed but I have no regrets with Linux.

@rinzler749 2 ай бұрын

@@OdinScript I have two more questions 1. Can I continue with just windows without installing linux or wsl2? 2. When doing the to-do app project did you look back to any tutorials or did you stumble upon a problem that you couldn't solve on your own?

@OdinScript 2 ай бұрын

That requires research but looking at the updated Installations Overview lesson right now, Odin still recommends Mac or if you don’t own a Mac- Linux- as the first choices. I can’t speak to the virtual machine (VM) option. But I would say don’t shy away from the VM or the dual boot. I personally chose the dual boot because of the downsides of VM. I cared about speed. WSL2 is the newest option, but it wasn’t around when I started. I would read the comments/reviews in the Discord of the students who followed that path. Whatever you choose is going to work out!

@OdinScript 2 ай бұрын

Every piece of logic I needed to implement I felt prepared to do because of the Odin lessons. Nevertheless, this project was a tough one to put all the pieces of logic together. I would say some CSS tricks (like crossing out a to-do item) I had to look up online. The other thing that’s really not covered up until this point are data attributes for DOM elements. You can look those topics up online and that becomes part of your learning.

@rinzler749 2 ай бұрын

@@OdinScript thanks a lot for sharing those information is it possible for you to make a discord server for your views so they can discuss?

@jazzpote4316 2 ай бұрын

Well done, the code looks professional and it's impressive to see the swift progress. $.02: best practice is to use const over let variables where possible, such as in the List arrow function. Also, totally optional, but when you have more than 3 or 4 arguments, using a single object argument rather than individual arguments can make life easier. (keeping track of the correct order of arguments is error prone). e.g const createTask = ({ listId, name, description, date, priority}) => { console.log(listId); } Which is the equivalent of const createTask = (args) => { console.log(args.listId); } The former being more readable, the later should be avoided. The first example leverages the concept of object destructuring. it can seem confusing at first but after using it a little bit it will become second nature.

@OdinScript 2 ай бұрын

I’m so grateful for this comment. Besides getting the opportunity to post in a community discord, I don’t have anyone reviewing my code. It can feel like walking in the dark at times. You don’t know if you’ve hit the nail on the head and you often wonder if your code is straying away from best (more readable, maintainable, efficient) practices. I will look into your suggestions - Thanks so much!