A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM5, CSS, JavaScript, and Webpack.

Last update: Jul 7, 2022

Overview

To-Do-List

A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM, CSS, JavaScript, and Webpack.

Built With

html
css
JavaScript
Webpack

Live Demo

For live version, pleave visit To-Do-Link

Screenshots

First Screen Page	With Tasks	With Selected Tasks

Getting Started

To get a copy of this project running on your local computer, do the followings:

Prerequisites

Must have a working computer
A Web-Browser installed (Chrome - Recommended)

Setup

Install VSCode (link)
Clone this project repository on your local computer. (link)
Open the project directory with VSCode

Install

Open Terminal/Shell inside your VSCode and run

  npm install --force

Run tests

For webhint tests, run
```
  npm run lint:hint
```
For stylelint tests, run
```
  npm run lint:style
```
For eslint tests, run
```
  npm run lint:es
```
To run a local server, run
```
  npm start
```
For testing functionalities, run
```
  npm test
```

Authors

👤 Steve

GitHub: @sntakirutimana72

🤝 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

Fellow Micronauts

📝 License

This project is MIT licensed.

Comments

Milestone 2: Add CRUD Functionalities
To-Do-List Milestone 2: Add CRUD Functionalities

In this milestone, I

Moved the app essential logic into a different file and created the followings:

A populate function for reading from localStorage and populating in the browser.

A create function for creating a new To-Do task and committing it into localStorage.

A update function for committing changes made to the task.

A remove function for removing task from both localStorage and DOM tree.

Fix linter errors.
opened by sntakirutimana72 3
Milestone 5: Test units
To-Do-List Milestone 5: Test Units

In this milestone, I:

Created test units for app functionalities.

Added app screenshots.

Updated README.md to look professional.

Fixed linter errors.
opened by sntakirutimana72 0
Milestone 3: Interactive List
To-Do-List Milestone 3: Interactive List

In this milestone, I:

Partitioned CRUD functionalities into multiple modules to make it easier for expansion.

Replaced Array ~ tasks with a class to manage complex logic to the TO-DO-LIST data structure.

Refactored CRUD functionalities especially the UPDATE part.

Fixed linter errors.
opened by sntakirutimana72 0
Milestone 1: Add List Structure
To-Do-List Milestone 1: Add List Structure

In this milestone, I:

Created an index.html file and added UI features to it.

Created an index.css to house styling markups for the app UIs.

Created an index.js file to handle DOM interactions and to house app functionality logic.

Added webpack to minify the app resources if need be.

Updated README.md file to look professional by including some app details.

Fixed linter errors.
opened by sntakirutimana72 0
Morning session code review - Module2 week3 V1
Suggestions from the morning session code review team

:+1: Good work on implementing the features of the todo list project

Suggestions

Please consider registering an event on the return icon for users who might click on it to add an item on to the todo list
opened by Felix45 0

JS-Best-Practive

Feedback

Some of the functions can be renamed to reflect the exact nature of their roles instead of create(), it could be createNewTask(). For instance, the code snippet below can be improved in the way mentioned above

  export const remove = (obj) => {
    let index = 0;

Method chaining where classes are concerned should be considered. For instance,

  class TasksManager {    
    set tasks(tasks) {
      this.allTasks = tasks;
    }
  
    assign(task) {
      this.allTasks.push(task);
    }

In the below code snippet, the function could've been separated into 2 functions to avoid the use of flags

  const $select = (selector, all, parentTree) => {
    parentTree = document.body;
  
    if (!parentTree) parentTree = document.body;
  
    if (all === true) return parentTree.querySelectorAll(selector);
  
    return parentTree.querySelector(selector);
  };

opened by sntakirutimana72 0

A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM5, CSS, JavaScript, and Webpack.

Related tags

Overview

To-Do-List

Built With

Live Demo

Screenshots

Getting Started

Prerequisites

Setup

Install

Run tests

Authors

🤝 Contributing

Show your support

Acknowledgments

📝 License

Comments

Milestone 2: Add CRUD Functionalities

To-Do-List Milestone 2: Add CRUD Functionalities

Milestone 5: Test units

To-Do-List Milestone 5: Test Units

Milestone 3: Interactive List

To-Do-List Milestone 3: Interactive List

Milestone 1: Add List Structure

To-Do-List Milestone 1: Add List Structure

Morning session code review - Module2 week3 V1

Suggestions from the morning session code review team

Suggestions

JS-Best-Practive

Feedback

Owner

Steven Ntakirutimana

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 To-Do-List app that input's a task by user and saves itself in the localStorage with a unique ID and when the task it checked as complete, user can click on clear all task to remove the task form the UI and localStorage. Built using JavaScript ES6

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.

A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

This project is a list manager that will allow a user organize a list of their tasks. They can conveniently create, update and delete tasks.

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.

This an CRUD app built were users can create, update and delete specific day to day tasks as they wish. The app is built using webpack and served with webpack dev server

A simple HTML list of To Do tasks built using webpack, JS ES6 and CSS. This app allows users to add and delete tasks to organize their days.

A simple to do list app built with HTML, CSS and JavaScript. Users can add daily tasks, edit the tasks, delete the tasks when it's done

Use this project as a tool for remembering your daily tasks, confirming, editing, remove are actions you can do to tasks, your data is saved in the LocalStorage so every time you open or refresh the page all changes will be present.

A simple to-do app for managing daily tasks built with Webpack, JavaScript, HTML, and CSS with the functionality to manipulate multiple completed tasks and store them to local storage.

This is a simple web app that allows a user add list of tasks that needs to be completed. It is built using webpack and served by a webpack dev server.

A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

To Do list is a small but useful project to make list app , you can add tasks delete tasks and modify tasks, the project built using HTML, CSS, JavaScript

A Todo list app that allows the user to add tasks, delete, edit, chage, and clear all completed tasks. Built with JavaScript, CSS and Html.

To-Do List is a simple web based application that gives users an opportunity to note and organize their daily tasks. This app is built with JavaScript, HTML/CSS.

This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology namely; JavaScript with webpack Configuration.