I’ve created a Portfolio page with an entry for my most recent personal project, a web application called Simple To-Do.
What is Simple To-Do?
A web application that allows users to create, edit, and complete items in a to-do list. It also tracks the number of tasks completed by each user. When a task is completed, the application awards a number of Achievement Points based on the Priority assigned to it.
Development
Since my coursework for school didn’t involve any web development, I thought learning how to build a web application would be interesting and fun. I spent most of the summer working through The Web Developer Bootcamp on Udemy, then applying what I learned to a personal project. I had no previous experience with HTML, CSS, or JavaScript.
As a web application, Simple To-Do uses HTML, CSS, and JavaScript on the front end, along with Bootstrap to assist in development, Popper.js for tooltips, and Bootbox.js for dialog boxes. I built the back end with Node.js, Express, and JavaScript, with MongoDB serving as the application’s database.
jQuery and AJAX handle manipulation of the Document Object Model. The application also uses several Node.js packages, including Passport for user authentication, express-sanitizer for cross-site scripting sanitization, and connect-flash to display flash messages to the user.
Challenges
Originally, when a to-do was created, deleted, or marked as complete, the application updated the list by refreshing the entire page. I discovered I could crash the server by clicking multiple times in the same checkbox before the page finished reloading.
By then, I had learned a bit about AJAX from this short video course. Refactoring my code to use AJAX fixed the issue, with the added benefit of making the application more responsive because it updates the DOM without refreshing the page.
Mike Schulenberg 