This is a solution to the Todo app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- Add new todos to the list
- Mark todos as complete
- Delete todos from the list
- Solution URL: https://www.frontendmentor.io/solutions/to-do-list-local-storage-oY8Z7AmP2h
- Live Site URL: https://todolisttsx.vercel.app
- React
- Flexbox
- Bootstrap
- JavaScript Local Storage
Through completing the To Do List project, I gained experience working with JavaScript and localStorage. I learned how to add event listeners and handle form submissions, dynamically create and modify HTML elements, and store and retrieve data using localStorage. I also developed problem-solving skills and learned how to effectively use console.log and other debugging techniques to troubleshoot issues. Overall, this project provided a great opportunity to apply my programming knowledge in a practical way and further develop my skills.
As part of my continued development, I aim to deepen my understanding of JavaScript and DOM manipulation. I have found that these skills are essential for developing dynamic and interactive web applications. By further developing my knowledge in these areas, I hope to be able to build more complex and sophisticated web applications that provide a better user experience. I plan to continue practicing my skills in jQuery and DOM manipulation by working on projects that challenge me and push my understanding of these topics.
- Website - Keith Gaines
- Frontend Mentor - @keithgaines
Shoutout to Brad Traversy for his course "50 Projects in 50 Days - HTML, CSS, & JavaScript" on Udemy. This helped me really understand how to use JavaScript to work with local storage and the overall JS logic of the project. From his example (written in vanilla JS), I was able to understand the concept enough to re-write it myself into JQuery.