Vanilla JS ToDO List App

A clean, minimalistic task manager built with Vanilla JavaScript, Webpack, HTML5, and CSS3.

Live Demo

Table of Contents

---

• Introduction
• Technologies
• Features
• Inspiration
• Screenshots

Introduction

---

This is a simple, intuitive task management application designed to bring order to your daily life. Inspired by Todoist's simplicity and functionality, this Vanilla Javascript project demonstrates effective DOM manipulation, local storage integration and modular JavaScript development using Webpack.

Features

---

• Task Management: Add, edit, and delete tasks.
• Project-Based Organization: Manage multiple task lists for different projects.
• Local Storage: Your tasks are saved between sessions using local storage.
• Responsive Design: Works well on mobile and desktop devices.
• Minimal UI: A clean and simple user interface for optimal user experience.

Technologies Used

---

• Vanilla Javascript: Core functionality.
• HTML5/CSS3: Structure and styling.
• Webpack: For bundling and module management.
• Local Storage: Persistent data storage across sessions.

Screenshots

Setup and Installation

1. Clone the Repository

First, clone the repository to your local machine using Git:

git clone https://github.com/j-winston/TodoList-VanillaJS.git

2. Navigate to the Project Directory

Once the repository is cloned, navigate to the project folder:

cd TodoList-VanillaJS

3. Install Dependencies

Make sure you have Node.js installed. Then, install the project dependencies by running:

npm install

4. Build the Project

To bundle the project using Webpack, run the following command:

npm run build

5. Start the Development Server

After building, start the development server to see the project running locally:

npm start

6. Open the Application

Once the server starts, open your browser and navigate to:

http://localhost:8080

You should now see the app running locally on your machine.

---

Inspiraton

This project was inspired by the clean user interface of Todoist. The goal was to replicate the design while practiciing Javascript DOM manipulation and local storage techniques in a useful real-life application.

Contact

If you have any questions or want to discuss this project, feel free to reach out.