Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed and allows you to mark them as complete or not. Tasks can also be dragged and dropped in any position. It's a minimalistic website built using JavaScript ES6, Webpack and CSS

Overview

Todo Application

Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed and allows you to mark them as complete or not. Tasks can also be dragged and dropped in any position. It's a minimalistic website built using JavaScript ES6, Webpack and CSS.

Built With

  • Major languages (HTML, CSS, JavaScript)
  • Framework (Bootstrap)
  • Others technologies used:
    • webpack(bundler)
    • git(version control)
    • eslint(JavaScript linting)
    • webHint(linting tool)
    • stylelint(style linting)

Live Demo

Live Demo Link here

Getting Started

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

Install

Usage

  • Clone the repository using git clone [email protected]:joseph07-drack/todo-app.git
  • cd into the project folder and run the following scripts
  • Run npm install to install all third party modules used in this project
  • Run npm run build to build the bundle
  • Run npm start to start the server on port 8080

Authors

👤 JODRACK

👩 Taheny Belguith

🤝 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!

📝 License

This project is MIT licensed.

Comments
  • live demo link is not working

    live demo link is not working

    Hello @joseph07-drack 👋 you did Amazing work 🥇 .

    • Clean Code 👍 .
    • Github workflow 👍 .

    but I noticed that the live demo link is not working, there is a typo on the URL.

    1. kindly fix that.
    opened by khitermedachraf 3
  • To Do list: interactive list

    To Do list: interactive list

    Learning objective is to understand how to:


        - use webpack to bundle JavaScript.
        - learn how to use proper ES6 syntax.
        - use ES6 modules to write modular JavaScript. 
    
    opened by jodrack07 1
  • Testing To Do list: part 2

    Testing To Do list: part 2

    • Used jest framework for testing.
    • Created a test file(s) ([..].test.js) for a file(s) containing the following functions:
    • a function for editing the task description.
    • a function for updating an item's 'completed' status.
    • the "Clear all completed" function.
    • Used the mock storage object you have created in Part 1 of this project to mock the localStorage updates.
    • Mocked the HTML elements to test DOM manipulation functions.
    • Made sure you group your tests using the describe() method.
    opened by TahenyBELGUITH 0
  • JEST TESTING REVIEW

    JEST TESTING REVIEW

    JEST TESTING REVIEW

    First, I will say I like the way, you kept the code DRY and your use of desctructuring. Altogther, you have a great project 👍 . But I feel like you can use some better practices to deliver KISS and DRY codes. Below are the issues:

    • [ ] The null input was not taken care of in the add method.
    • [ ] Kindly try to keep it simple with remove testing code.
    opened by V0pe 0
  • Testing To Do list: part 1

    Testing To Do list: part 1

    Learning Objectives:


    Write unit tests for a JavaScript app.

    Required Changes Implemented:


    • This is a pair-programming project. Please decide whose project will you use for testing.
    • Use jest framework for testing.
    • Create a test file ([..].test.js) for a file containing the add item and delete item functions that you want to test.
    • Take a look at each of these functions. Are they pure functions? If the answer is "yes" then writing tests for them should be straightforward. Some of those functions however will update localStorage and manipulate the DOM. For those, you will need to use mocks:
    • Mock a storage object to "imitate" localStorage operations (only if you are using jest < 24.x, in newer versions localStorage is mocked automatically).
    • Mock HTML to test if add/delete functions add or remove exactly one
    • element to/from the list in the DOM.
    • Make sure you group your tests using the describe() method.
    opened by jodrack07 0
  • Project refactoring Refactoring

    Project refactoring Refactoring

    Changes:

    • Now, when adding, removing, updating something in the localstorage, no reloads
    • Increase the usage of DRY, KISS and YAGN approaches
    • Less line of codes to get the feature done
    opened by jodrack07 0
  • # Code quality checking

    # Code quality checking

    Code quality checking (Javascript Best practices, DRY, KISS and YAGNI)


    • [ ] JavaScript Best Practices: - window.location.reload() is not a good practice, find a way to include the event.preventDefault() so that the page may not reload every time and an action get trigged. check (actions.js line 10 and line 27 and ./src/index.js line 72) - unused codes used not be part of the codebase, kindly remove the ./modules/todos.js file. - avoid using verbose code for code readability and maitenance. Kindly check this and refactor.

    • [ ] DRY - I noticed there is localstorage snippet to store items that is repeated more than one time : (actions.js line 8, line 26 and line 32)

    • [ ] KISS Everything is simple 👍

    • [ ] YAGNI No unnecessary code complexy 👍

    opened by jodrack07 0
Owner
Shamuobe Buingo Joseph
Junior Full Stack web developer. I am learning remote software development at Microverse. My tools are: #HTML, #CSS, #JAVASCRIPT, #PHP. I am available for hir
Shamuobe Buingo Joseph
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
Cindy Dorantes 12 Oct 18, 2022
Chris Siku 13 Aug 22, 2022
zieeco 12 Jul 8, 2022
Harrison Njuguna 5 Nov 11, 2022
"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 complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

ABDUL ALI 7 Jul 17, 2022
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 complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Microverse Webpack Javascript For the second Javascript milestone in building a todo website, set up a new repository and prepare it for development u

TOFANA SILVIA 16 Jun 13, 2022
A web app designed to keep track of activities that are done and those that are and not done. Users can add, delete, mark as completed and update the activities. Built with Javscript, html, css and webpack.e your activites

ToDoListApp A web app designed to help web keep track of activities that are done and those that are still pending. Users can add, delete, mark as com

Francis Wayungi 6 Dec 23, 2022
To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Youta Lactio Christabelle 10 Aug 3, 2022
Ajayi Ridwan 7 Oct 21, 2022
This is a simple web application of a To-do List in which you can add, remove and edit all your tasks and also you can mark each task as completed and delete all completed ones.

To-Do List A simple web application of a to do list Built With HTML, CSS, JS, ES6 & Webpack Getting Started In this repository I created To-Do List SP

Juan Sebastian Sotomayor 12 Apr 11, 2022
"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 complete. It is created with HTML , CSS , JS and webpack and NPM.

My Todo 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 com

Dyary Raoof Bayz Agha 5 Mar 29, 2022
A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Zeeshan Haider 9 Mar 12, 2022
A daily activity tracking application that helps to organize your daily tasks and keep track of tasks that have been completed, or yet to be completed.

To-Do-List This is my To-Do List project in the Microverse curriculum. Built With HTML CSS Javascript (Webpack) GitHub Live Demo Live Demo Link Gettin

Hammed Adisa 8 May 7, 2022
"To-do list" is a tool that lists the things you need to do and allows you to mark them as complete. Built with JavaScript, HTML, CSS, and Webpack!

HTML CSS JS ES6 WEBPACK NPM LINTERS Todo List Project "To-do list" is a tool that helps to organize your day. It simply lists the things that you need

null 5 Jul 2, 2022
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 complete. Built with JavaScript.

To Do List Application that record the tasks to remind you and got many features that you might need. This is an image for it Live Demo Live Demo Here

Omar Ragheb 14 Jul 13, 2022
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 complete. Built with JavaScript.

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 complet

Leonardo Goss 9 Mar 4, 2022