Little To-Do List

Little To-Do List is a JavaScript app I created that allows users to create/delete tasks on a custom list. This project focused on compartmentalizing HTML and JS components to create and store dynamically created custom lists, each storing a unique set of tasks on a local database.

Originally the project was hosted on a Heroku cloud server, but has since been retired to my local machine. If you'd like to check out the application, feel free to clone the repository and spin up a version on your own machine using the instructions below!

Take a look at the live project

Prerequisites

any HTML code editor of your choice, such as VS Code, Atom, etc.
install Node.js

(optional setup with MongoDB Atlas Cloud Database)

install and setup MongoDB (installation guide)

Installation

clone the repository to your desired location.
Install the required packages in the terminal $ npm install
To run the website as is, start the app from your terminal with, $node app.js
In you browser's address bar, navigate to http://http://localhost:3000/

MongoDB Atlas Setup

Create a MongoDB Atlas Account
Select your desired settings and create a new Cluster
Find the "connect to application" option, and obtain a new SRV Key.
In the root project folder, create a new file called .env
Edit the new .env file, and enter this line at the top of the file. MONGO_ATLAS_KEY= (Enter your SRV Key here)
Save the file.

Starting the application locally

On Windows, open the command terminal and navigate to your project folder.
Install the required packages using $npm install
Start the application on your local server with node app.js
If there are no errors, then you can head to http://localhost:3000 in your web browser

(back to top)

Usage

Once you are successfully connected to the website, you'll be greeted by a fresh To-Do list with a few tutorial items explaining how to interact with the site.

List controls

Create new item Simply type out the item description, then click the + button on the right to add a new item to your list.

Deleting a list item To delete a completed task, click the empty checkbox on the left of your item.

Creating a new list Lists are created and saved dynamically by adding a /new_list_name to the end of the html address. For example, entering localhost:3000/workshop into the address bar will create and save a new empty list to the database