An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

Kenny Salazar

Last update: May 5, 2022

Overview

To-do List

A to-do list app

This app let you to set your own to-do list.

Built With

HTML
CSS
JavaScript
WebPack
Jest

Live Page

Page Link

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

Have git correctly installed.
Have NPM and NodeJs correctly installed.

Setup

Open a terminal window where you want to have installed a copy of the repository.

Install

Use this command to get a copy:

$ git clone [email protected]:helio3197/to-do-list.git

Install the required dependencies:

$ npm install

Usage

Run:

$ npm start

Build:

$ npm run build

Testing:

$ npm test

Edit the content as you like.

Authors

👤 Kenny Salazar

GitHub: @helio3197
Twitter: @kennysalazar31
LinkedIn: LinkedIn

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Thanks to Microverse for the guidelines.

📝 License

This project is MIT licensed.

Comments

Peer to Peer code Review 25/02

:heavy_check_mark: Very organized and clean, congratulations. OPTIONAL - [ ] making your code a bit DRYier by assigning the lines of code that are being repeated to variables, constants, or functions, as needed.

opened by iKuartz 0
To-do List: Add Unit Tests
Added tests files using Jest package

Unit tests were created using Jest to test the add and remove functionality of the project.

Features:

A new test.js file was added containing the unit test for the addTask and removeTask functions.

Every testing group check for add/remove feature and localStorage implementations.
opened by helio3197 0
Apply DRY in create-tasks-list.js
In that file the expression li.id - 1 is repeating several times, maybe you'd want to use a variable to store the expression:

[ ] li.id - 1 => const listIndex = li.id - 1;
opened by helio3197 0
To-do List: Created user interactions
Added new features to remove selected tasks and drag and drop feature

New Js modules were built containing functions to save selected tasks into the local storage and let the user remove all selected tasks, also was build a drag and drop feature, allowing the user to sort the list.

New features:

New function module to delete checked tasks.

New feature to enable drag and drop interaction for all tasks in the list.
opened by helio3197 0
To-do List: Add, edit and remove functions
Added new functionalities to add, edit and remove tasks

In this milestone, new Js functions were created to implement the required options for managing the tasks list. All the tasks elements are saved and manipulated from the local storage.

New features:

Added new Js modules containing the functions to add/edit/remove.

Implemented local storage: the task list is saved into the local storage.
opened by helio3197 0
To-do List: Created list structure
Added main content and list structure

In this milestone, Webpack was used to build the main HTML, JavaScript, and CSS files. Functions were added for creating the To-do list dynamically.

Highlights:

The page uses webpack to bundle Js files, making the page lighter.

CSS styles were added to the page.

Added Js functions to create the to-do list dynamically from an array containing task objects.
opened by helio3197 0

An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

Related tags

Overview

To-do List

Built With

Live Page

Getting Started

Prerequisites

Setup

Install

Usage

Authors

🤝 Contributing

Show your support

Acknowledgments

📝 License

Comments

Peer to Peer code Review 25/02

To-do List: Add Unit Tests

Added tests files using Jest package

Features:

Apply DRY in create-tasks-list.js

To-do List: Created user interactions

Added new features to remove selected tasks and drag and drop feature

New features:

To-do List: Add, edit and remove functions

Added new functionalities to add, edit and remove tasks

New features:

To-do List: Created list structure

Added main content and list structure

Highlights:

Owner

Kenny Salazar

A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

A todo-list app designed to help users manage their tasks. Users can create a task, read tasks, update tasks, delete task, check completed tasks and delete all checked tasks. Also contains basic tests. Built with WebPack,, Modular JavaScript, Jest Libary and LocalStorage.

A simple JS To Do List bundled using Webpack. You can add new tasks, edit existing tasks, check completed tasks, and delete tasks from the list. It is built mainly with Javascript.

A Single Page Application featuring a medium fidelity wireframe of a to-do-list app that stores tasks that are added and which can be deleted. The tasks can be checked, unchecked or edited. Built mainly with JavaScript and strict ES6 features. Bundled with webpack.

This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

Todo-List is an online website where users can add a todo tasks. tasks can be removed , added, and edited. Built with Webpack and JavaScript.

This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

This project is about the awesome books we did during Microverse to build a website for adding and removing the books.Done using HTML and ES6 JAVASCRIPT and modules

This is a To-Do List. It shows a minimalist design with the next features: Add new tasks, edit tasks, markup completed tasks, and erase all completed tasks. Built with JavaScript.

In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

Make drag-and-drop easier using DropPoint. Drag content without having to open side-by-side windows

An online library for adding and removing a different number of books from a user collection, keeping track of the books you've read and the one's you are yet to read

This is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This was a continuous project, where in each milestone, new feature(s) was/were added to it.

In this project, I built a simple HTML list of To-Do tasks. Using webpack to bundle JS functionality and other sources.

This project entails a To-do-List whereby a user can input the tasks they want to do, check the tasks done and also clear all tasks when all of them are completed. It is efficient for a user who want to manage their time and keep track of their day.

this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS