New Portfolio Entry – Simple To-Do

I’ve created a Portfolio page with an entry for my most recent personal project, a web application called Simple To-Do.

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.

Check Out the Project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s