Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/j-winston/todolist-vanillajs
A clean, responsive ToDo List app built with Vanilla Javascript, Webpack, and Local Storage. Manage tasks and projects with an intuitive UI inspired by Todoist.
https://github.com/j-winston/todolist-vanillajs
css3 dom-manipulation front-end-development html5 localstorage projectmanagement responsive-design task-manager todoapp vanilla-javascript webpack
Last synced: 24 days ago
JSON representation
A clean, responsive ToDo List app built with Vanilla Javascript, Webpack, and Local Storage. Manage tasks and projects with an intuitive UI inspired by Todoist.
- Host: GitHub
- URL: https://github.com/j-winston/todolist-vanillajs
- Owner: j-winston
- Created: 2023-04-08T15:18:30.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-23T16:36:56.000Z (4 months ago)
- Last Synced: 2024-11-14T17:33:40.653Z (3 months ago)
- Topics: css3, dom-manipulation, front-end-development, html5, localstorage, projectmanagement, responsive-design, task-manager, todoapp, vanilla-javascript, webpack
- Language: JavaScript
- Homepage: https://j-winston.github.io/TodoList-VanillaJS/
- Size: 215 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vanilla JS ToDO List App
*A clean, minimalistic task manager built with Vanilla JavaScript, Webpack, HTML5, and CSS3*.
[Live Demo](https://j-winston.github.io/todo-list/)
## 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:
```bash
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:
```bash
cd TodoList-VanillaJS
```
### 3. Install Dependencies
Make sure you have Node.js installed. Then, install the project dependencies by running:
```bash
npm install
```
### 4. Build the Project
To bundle the project using Webpack, run the following command:
```bash
npm run build
```
### 5. Start the Development Server
After building, start the development server to see the project running locally:
```bash
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.