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.

Overview

To-do List

Description

To-do-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 project has been assigned to me by microverse.

Built With

  • Languages: HTML5, CSS5, JavaScript
  • VCS: GitBash
  • Package Manager: Node, NPM
  • Webpack -Following github flows standards.

Setup

-to use the project To do list please follow :

Open GitHub and go to my GitHub repository name: to do list.to clone. Click “Code” and copy the given URL.

click code and copy the URL.

Open “Git Bash” and change the current working directory to the location where you want the cloned directory.

Type git clone in the terminal, paste the URL you copied earlier, and press “enter” to create your local clone.

Syntax:

$ git clone {repository URL}

Usage

open your directory To-do-List/

use vs-code or any IDE to view line code .

use you preferd browser to run the file .html to get project website. to run in terminal / git :

$ npm start

Live demo

click here

Authors

👤 **Tarik Bouari **

🤝 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

  • Linters Article: Setup Linters
  • Icons resource: Iconify

📝 License

This project is MIT licensed..

Comments
  • Issues raised in the morning session

    Issues raised in the morning session

    Issues raised

    congratulations @tarikbouari upon making it this far with this project you did such a great job implementing the features that were stipulated, however, we managed to raise a few issues to make your code even better than it is

    • Kindly include the updated README.md as it is missing in your project and do not forget to include the webpack setup

    • Please also ensure that your webpack setup is sound and to achieve this I would recommend the following tutorial https://www.youtube.com/watch?v=IZGNcSuwBZs&t=20s&ab_channel=TraversyMedia.

    • If possible you could also do away with unused dependencies in your package.json file for example lodash and core-js as this will pile a lot of bundle size on your final project or app

    • You can as well put the following part of the code in a separate file and just import it to your project https://github.com/tarikbouari/To-do-List/blob/ff7a2fe4c72c500867015eb19f398ad9def27301/src/index.js#L29-L37

      This will be a reusable component that you can use and it will make your code neater and more organized.

    • As a good practice it will also be good to store all none index.js files inside the src folder in their own folders as this will make your work even more organized

    Other than that, we hope you finish everything on time, and happy coding 😄

    opened by John-Kibirige 1
  • Testing part2

    Testing part2

    In the Testing part2 we did

    • We used jest framework for testing.

    • We created a test file (addRemove.test.js) for a file containing the following functions:

              1. a function for editing the task description.
              2. a function for updating an item's 'completed' status.
              3. the "Clear all completed" function.
      
    • We used the mock storage object we have created in Part 1 of this project to mock the localStorage updates.

    • We mocked the HTML elements to test DOM manipulation functions.

    • We grouped our tests using the describe() method.

    opened by GhislainMitahi 0
  • Jest testing

    Jest testing

    Testing To-Do list: part 1

    • We decided the @tarikbouari project for testing.

    • We used jest framework for testing.

    • We created a test file (addRemove.test.js) for a file containing the add item and delete item functions that we want to test.

    opened by GhislainMitahi 0
  • Interative-list

    Interative-list

    In this project I:

    • Added a new JavaScript file and imported it as a module:
    • Added function related to the status update
    • Added event listener to the checkbox (change).
    • Updated items object's value for completed key upon user actions.
    • Implemented a function to clear all the selected checkbox
    • Fixed linter errors
    opened by tarikbouari 0
  • Add and remove features

    Add and remove features

    In this project I:

    • Removed all hardcoded items from the tasks array.
    • Created a new JavaScript file for the new functionality.
    • Implemented a function for adding a new element to the array
    • Implemented a function for deleting an element from the array
    • Implement a function for editing task descriptions.
    • fixed linter error
    opened by tarikbouari 0
  • Create-list-structure

    Create-list-structure

    In this project I :

    • Setup webpack to manage my files
    • Created HTML file and added a form
    • Created javascript file (index.js) and set array with some to do tasks
    • Wrote a function to iterate over the tasks and rendered the tasks when the homepage loads
    • Styled the home page in style.css
    • fix linter errors
    opened by tarikbouari 0
  • PtP code review 8/23/22

    PtP code review 8/23/22

    Overall the application looks great.

    Here is what can be improved upon.

    • add an event listener to the form so tasks can be added with enter key as well as submit button.
    • add an event listener to the items as well for the same results.
    • Deleting items after editing them results are not working properly, the items gets edited but not deleted, this is most likely due to the implementation of the change event listener.
    opened by Amtresu 0
  • Javascript Best pratices

    Javascript Best pratices

    hi @tarikbouari 👋 ,

    you have done an amazing job so far, but here are some suggestions and code best practices you can implement in your code in order to improve it.

    • Please kindly remove all ensure code in your index.js file. (line 26) https://github.com/tarikbouari/To-do-List/blob/628e4764e0380e5c9689c3d9e5cccb09e1e74426/src/index.js#L26

    • I highly suggest you should export at once all your variables instead of repeating yourself https://github.com/tarikbouari/To-do-List/blob/628e4764e0380e5c9689c3d9e5cccb09e1e74426/src/index.js#L5-L8

    you can use a destruction synthax as the following : export { var1, var2, ...........}

    opened by tarikbouari 0
Owner
tarike bouari
Full-Stack Developer, Part-time UI designer. Stack : JavaScript | React | Redux | Ruby | Rails. I love coding challenges. Open to new opportunities.
tarike bouari
Microverse Module 02 Project: This is an educational project to make a TodoList web application, where the users can add new todo, remove todo, edit todo, mark todo as completed, and remove all completed todo. Built with Webpack

todo-list This project is about building a list of To Do tasks. Where you can save your daily activities and help in daily evaluation. Live demo you v

divine charlotte 25 Jan 3, 2023
Awesome-book is an online library website where a user can store a collection of books. Different book can be added and removed. Built with JavaScript using Dom

Awesome-book Description Awesome-book is an online library website where a user can store a collection of books. Differents book can be added and remo

tarike bouari 8 Sep 9, 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
Esther Udondian 6 Aug 1, 2022
A simple application used to organize your day to day activity. Tasks can be added and removed from this list.

Minimalist ToDo List A minimalist list of TODOs. Built With HTML, CSS, JavaScript Webpack Jest NPM Node Getting Started In order to obtain a local cop

Eva Lavinia Bucur 10 Sep 9, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022
TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list.

Todo TODO List is a simple website that displays a list of todo and allows you to add and remove todo from that list. App Screenshot Live Demo Todo Ap

Ishmael Kargbo 3 May 12, 2022
This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 2022
A simple todo list app that allows users to add, delete, edit, and clear all completed tasks, built with HTML, CSS, Javascript and webpack.

todo list In this website you will add books and also watch the lists of books. Built With HTML CSS JavaScript See Live click here Authors ?? HaaDiiii

Hamid Ali 10 Oct 7, 2022
A single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS

To Do list Application This is a single page application that allows users to keep track of their tasks. Users can add the task and also check the che

Micheal Oguntayo 4 Oct 14, 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
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
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
Simple string diffing. Given two strings, striff will return an object noting which characters were added or removed, and at which indices

Simple string diffing. Given two strings, striff will return an object noting which characters were added or removed, and at which indices

Alex MacArthur 196 Jan 6, 2023
To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed.

To Do App To-Do List project is the application for a to-do list, users can add and remove tasks from the to-do list. Mark tasks as completed. Users c

Ishpaul Singh 6 Jul 21, 2022
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
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

Todo-List 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 s

Duane David 10 Sep 28, 2022