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

Overview

To Do List

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

Preview

A simple and minimalistic To Do List to keep track on tasks during the day. Don't miss on your daily duties. Add, Edit, Re-organize, Delete, and clear are all the functionalities of this webapp. Give it a try!

Built With

  • HTML/SCSS
  • Webpack
  • Visual Studio Code Editor

Live Demo

Live Demo Link

Getting Started

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

  • Clone this repository with git clone[email protected]:JohnFTitor/toDoList.git using your terminal or command line.
  • Change to the project directory by entering :
    cd toDoList in the terminal

Prerequisites

You need to make sure to have installed the latest version of Node.js and npm on your computer.

Setup

You can clone this repository or simply download the files as a .zip If you want to set up a personal repository based on this one, you can as well fork it.

Install

After clone it and before working on it, you have to run npm install so that all the dependencies of the project get downloaded in your pc locally. Such dependencies include webpack and linters checks, for which you have to either generate your own config file or get one.

Note: If you're a Microverse's Student, you should use the config files provided by the program. Linters Config HTML/CSS and JS

Usage

You're free to use this project however you like it for educational purposes. Just keep in mind the acknowledgment described below

Run linters checks

Linter Checks are automatically run with Github actions when there's a pull request. If you want to run them locally, remember to have the config file in the root of the local project.

Deployment

The deployment can be found in the Github Pages of this repository or through the link provided above

Authors

πŸ‘€ AndrΓ©s Felipe Arroyave Naranjo

Contributors

πŸ‘€ Oyelakin Ridwan

Show your support

Give a ⭐️ if you like this project!

πŸ“ License

This project is MIT licensed.

Comments
  • Add remove testing

    Add remove testing

    Hi there πŸ‘‹πŸ»

    Thanks for taking the time to review the project. Here are some things important to note about it:

    Sass

    The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

    Now into the project...

    Changes implemented in "add-remove-testing" branch

    • βœ… Our code follows the javascript guidelines of this project.
    • βœ… Create a [..].test.js file to store all the tests
    • βœ… Use Jest to create test cases for add/remove methods of the class TaskCollection
    • βœ… Tests are grouped using describe()
    • βœ… Add mock configuration to jest.config.js so it ignores all svg imported images

    Final notes

    Is expected that this project meets the requirements. Please let us know if anything is left to be done or can be improved. Again, thanks for the review.

    enhancement 
    opened by JohnFTitor 1
  • Peer to Peer to Code Review

    Peer to Peer to Code Review

    Hey Guys, Great job on the testing. It's actually impressive what you guys have accomplished.

    • The work you have done is exceptional, I don't have much to review but I guess I can suggest you guys this link as an additional source of information.

    https://medium.com/@rickhanlonii/understanding-jest-mocks-f0046c68e53c

    opened by zhadier 1
  • Add checkbox mark as suggested in #5

    Add checkbox mark as suggested in #5

    Hi there πŸ‘‹πŸ»

    Thanks for taking the time to review the project. Here are some things important to note about it:

    Sass

    The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

    Now into the project...

    Changes implemented in "checkbox" branch

    • βœ… Add checkbox mark.

    Final notes

    Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.

    enhancement 
    opened by JohnFTitor 0
  • Edit update completed

    Edit update completed

    Hi there πŸ‘‹πŸ»

    Thanks for taking the time to review the project. Here are some things important to note about it:

    Sass

    The project was built using Sass. The only difference was that we needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, we used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

    Now into the project...

    Changes implemented in "edit-update-completed" branch

    • βœ… Our code follows the JavaScript guidelines of this project.
    • βœ… Add Tests for the edit functionality, triggering the event listener with a helper function.
    • βœ… Add Tests for the toggle status functionality triggering the event listener with a helper function.
    • βœ… Add tests for the clear all completed functionality, checking the mock HTML.

    Final notes

    Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.

    enhancement 
    opened by JohnFTitor 0
  • Modify code to meet better practices

    Modify code to meet better practices

    Hi there πŸ‘‹πŸ»

    Thanks for taking the time to review the project. Here are some things important to note about it:

    Sass

    The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

    Now into the project...

    Changes implemented in "betterPractices" branch

    • βœ… Add comments and change variable names and location
    • βœ… Separate drag and drop functionality in a different module for better readability

    Final notes

    Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.

    enhancement 
    opened by JohnFTitor 0
  • Self Review on Good Practices

    Self Review on Good Practices

    Hello πŸ‘‹πŸ»

    This Issue is a self-reflection on my code to check for good practices. I'll list some issues I'll find in my code to check and fix later.

    Bad Practices 🚫

    On index.js

    • [x] Variable definition should be at top of the document

    https://github.com/JohnFTitor/toDoList/blob/7d4086b4e8afcdaeb36cb7b1811328799da5cc26/src/scripts/index.js#L41-L43

    • [x] Comment the purpose of some sections would be helpful to understand the code better. It looks like everything is just "In there", so it would be nice to have a bit more of an explanation.

    • [x] To keep things simpler and increase readability, it would be better to port this functionality to another module.

    https://github.com/JohnFTitor/toDoList/blob/7d4086b4e8afcdaeb36cb7b1811328799da5cc26/src/scripts/index.js#L41-L113

    On TaskCollection.js

    • [x] Using a clearer name would be useful to identify the element we are talking about

    https://github.com/JohnFTitor/toDoList/blob/7d4086b4e8afcdaeb36cb7b1811328799da5cc26/src/scripts/TaskCollection.js#L3

    • [x] Add some few comments would help to the explanation of the code
    enhancement 
    opened by JohnFTitor 0
  • Drag drop

    Drag drop

    Hi there πŸ‘‹πŸ»

    Thanks for taking the time to review the project. Here are some things important to note about it:

    Sass

    The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

    Now into the project...

    Changes implemented in "drag-drop" branch

    • βœ… My code follows the style guidelines of this project.
    • βœ… Use Drag event listeners to implement the drag functionality
    • βœ… Update list array whenever the position of the elements changed

    Final notes

    Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.

    enhancement 
    opened by JohnFTitor 0
  • Clear all

    Clear all

    Hi there πŸ‘‹πŸ»

    Thanks for taking the time to review the project. Here are some things important to note about it:

    Sass

    The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

    Now into the project...

    Changes implemented in "clearAll" branch

    • βœ… My code follows the style guidelines of this project.
    • βœ… Create functions to set the status of a task object and to filter completed items from an array.
    • βœ… Add event listener to checkbox to update completed status of its task object.
    • βœ… Filter completed items and remove each of them using the same functions defined before.

    Final notes

    Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.

    enhancement 
    opened by JohnFTitor 0
  • Add remove buttons

    Add remove buttons

    Hi there πŸ‘‹πŸ»

    Thanks for taking the time to review the project. Here are some things important to note about it:

    Sass

    The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

    Now into the project...

    Changes implemented in "add-remove-buttons" branch

    • βœ… My code follows the style guidelines of this project.
    • βœ… Create separated Javascript files for the project's functionality.
    • βœ… Create Class TaskCollection to hold all functionality (Add, Remove, Edit).
    • βœ… Follow the index guideline for the objects.
    • βœ… Change card elements to inject text
    • βœ… Use .bind() method to add parameters to event listener. This will make sense for the drag button default functionality in my next update of this PR

    Final notes

    Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.

    enhancement 
    opened by JohnFTitor 0
  • List structure

    List structure

    Hi there πŸ‘‹πŸ»

    Thanks for taking the time to review the project. Here are some things important to note about it:

    Sass

    The project was built using Sass. The only difference was that I needed to add an additional loader to webpack, but the result is overall the same (A CSS output). Additionally, I used MiniCssExtractPlugin to generate an external CSS file in the dist folder instead of the styles in the head of the document. It has the same dynamic response, it's just that the output looks more organized.

    Now into the project...

    Changes implemented in "list-structure" branch

    • βœ… My code follows the style guidelines of this project.
    • βœ… List items are dynamically generated through webpack.
    • βœ… The HTML linking to the scripts and styles is dynamically generated through webpack.
    • βœ… SCSS Styles are imported in javascript and Dynamically bundled with webpack.

    Final notes

    Is expected that this project meets the requirements. Please let me know if anything is left to be done or can be improved. Again, thanks for the review.

    enhancement 
    opened by JohnFTitor 0
Owner
AndrΓ©s Felipe Arroyave Naranjo
Front-end Developer | React lover | hobbyist writer. I like to take challenges to grow and I'm looking for a new job opportunity to test my skills!
AndrΓ©s Felipe Arroyave Naranjo
In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

 Hassan Momanyi 10 Nov 25, 2022
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.

To-Do-List A simple HTML list of To Do built using webpack and served by a webpack dev server. Live Link See Demo Built With HTML, CSS, Javascript To

Michael Ugochukwu 3 May 10, 2022
In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

To do list In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev ser

JesΓΊs VΓ‘zquez 8 Dec 21, 2022
In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a webpack dev server.

To Do list with Webpack In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a w

Sidney Kaguli 8 Aug 23, 2022
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

Project Name The To-Do-List app description this is a project in the second week of the second module in microverse. its a useful to do list that save

Alzubair Alqaraghuli 5 Jul 25, 2022
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.

Project Name To Do List Built With HTML CSS JavaScript Live Demo To do List Live Demo Link Getting Started This is a To Do List. It shows a minimalist

Santiago CΓ‘rdenas 6 Jun 9, 2022
A simple HTML page maintaining list of To Do tasks using webpack and served by a webpack dev server.

Task Organiser In this project, we build a simple HTML list of To Do tasks using webpack and served by a webpack dev server. Built With HTML CSS Javas

Angom 4 Jun 24, 2022
This project is about building a simple HTML list of To Do tasks. Built using webpack and served by a webpack dev server.

To Do List app This project is about building a simple HTML list of To Do tasks and is built using webpack and served by a webpack dev server. Built W

Dino Ronald Quispe Arias 6 Nov 4, 2022
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.

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 Start

Kenny Salazar 7 May 5, 2022
Grayce Muthui 8 Jun 16, 2022
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

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

Daniel Yerimah 6 Jun 7, 2022
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.

To-Do List "To-do list" is an app that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Karla Delgado 15 Sep 26, 2022
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

To Do List This is a website that allows users to manage the tasks. users can add every task to do and when the task is done users can delete the task

Mustafa Fahimy 8 Jul 21, 2022
Aron 8 Dec 17, 2022
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.

To-Do-List App 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

Samuel Mwape 18 Sep 20, 2022
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.

TO-DO-LIST "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as compl

Favour Ezeugwa 18 Aug 19, 2022
Evolve is an online investment portfolio management system where users can keep track of all the assets that they have invested in and how well their assets are performing.

Evolve is an online investment portfolio management system where users can keep track of all the assets that they have invested in and how well their assets are performing.

Indrajit 6 Oct 16, 2022