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

Overview

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 completed and update the activities. Built with Javscript, html, css and webpack.

Built With

  • HTML.
  • CSS.
  • JavaScript.

Getting Started

  • To run a local copy of this project follow these simple steps.

Prerequisites

  • A modern web browser, preferably Chrome or Firefox

Cloning the repository

  • Create a directory.
  • Open a terminal in this directory and run this command: git clone [email protected]:wayungi/ToDoListApp.git.
  • Open the index.html file with a browser application
  • The website will load

Live Demo

Live Demo Link

Authors

👤 Francis Wayungi

👤 Mumenya Nyamu

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Aknowledgement

Background image pattern used is from Honeycomb pattern vector created by starline - www.freepik.com

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Comments
  • DRY

    DRY

    Please refactor this code to remove the duplication

    https://github.com/wayungi/ToDoListApp/blob/ac0e9b6f167d2437fd43c747e3789570380516e0/src/style.css#L19 https://github.com/wayungi/ToDoListApp/blob/ac0e9b6f167d2437fd43c747e3789570380516e0/src/style.css#L44 https://github.com/wayungi/ToDoListApp/blob/ac0e9b6f167d2437fd43c747e3789570380516e0/src/style.css#L61 https://github.com/wayungi/ToDoListApp/blob/ac0e9b6f167d2437fd43c747e3789570380516e0/src/style.css#L44

    opened by wayungi 1
  • Javascript best practices

    Javascript best practices

    Please use object destructing in the line below https://github.com/wayungi/ToDoListApp/blob/ac0e9b6f167d2437fd43c747e3789570380516e0/src/modules/task.js#L1

    Use HTML 5 tags https://github.com/wayungi/ToDoListApp/blob/ac0e9b6f167d2437fd43c747e3789570380516e0/src/index.html#L22

    opened by wayungi 1
  • Morning Session PTP Code Review: To-do List

    Morning Session PTP Code Review: To-do List

    Hello @wayungi!

    Your to-do list app is looking great! :sunglasses: Although we have found some room for improvement that could make your project look more professional.

    Suggestions for clean code improvement

    • [x] In line 30 of ui.js code, inside the trash.addEventListener you can see that you have 3 mentions for the same e.target.parentElement.parentElement.id, maybe would be a good change if you created a const to store that. That is going to make your code more clean. And you also can use a name for the const that mention what are you targeting, because if someone other than yourself read the code it will understand better what is the target.
    opened by Hannziegel 1
  • Just Simple Changes

    Just Simple Changes

    Hi! @wayungi :wave:

    Your project is looking awesome! :sunglasses: Although we have found some room for improvement that can make your project shine like a diamond :gem: :ok_hand:

    Proposed Improvements :bulb: :memo:

    • Kindly test the DOM to see if the functions are working with the clicks, You can mock the Dom to use it
    • Kindly test the localstorage to see if data is added and removed from it, you can also mock it for that
    opened by ice949 0
  • Add interactivity

    Add interactivity

    This PR adds

    • A new JavaScript file imported as a module:
    • An event listener to the checkbox.
    • Update items object's value for completed key upon user actions.
    • A function for the "Clear all completed" button.
    • use of local storage to store array of items

    Note

    • To edit a task, double click the task.
    • To save an activity after editing, hit enter.
    opened by wayungi 0
  • Add and remove

    Add and remove

    This PR adds the following features

    • add task
    • remove task
    • save data to local storage

    Note:

    • Double click an activity to edit it.
    • Press Enter key to save the edited activity
    opened by wayungi 0
Owner
Francis Wayungi
Software developer, JavaScript, Ruby, CSS and HTML. I love swimming and playing with the Linux terminal. Open to new and challenging opportunities.
Francis Wayungi
zieeco 12 Jul 8, 2022
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
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
Application that uses the localStorage to keep the information on the activities that are pending to be done and also those that are completed

Application that uses the localStorage to keep the information on the activities that are pending to be done and also those that are completed. It provides an option to edit activities and also delete them. The clear all applies to those that are marked as completed by selecting the checkbox.

Oscar Bermudez 8 Apr 8, 2022
To-Do list a web app for tracking personal progress through the day. Users can input a list of tasks and mark them as completed once they are done. Built with JavaScript and Webpack

To-do-List-Project To Do List Project Description. This project creates a simple HTML list of To Do tasks. It was built using webpack and served by a

Olawale Olapetan 7 Jul 8, 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
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
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
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 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 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
This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit them or delete them.

To Do List This is a Webpack based to-do-list project. With this app, users can add thier daily routine tasks to the list, mark them as complet, edit

Ali Aqa Atayee 12 Oct 30, 2022
ToDoList app helps users make their day organized and user can add tasks, delete completed tasks.Build with Javascript, HTML, CSS

ToDoList Description the project. This project we will help you organize your day. Add tasks Delete tasks And clear all tasks keep your list clean. Bu

Nurgul Kereikhan 6 Oct 11, 2022
Grayce Muthui 8 Jun 16, 2022
An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

An app to manage tasks. A user can add, delete and edit a task and mark it as completed, It uses simple GUI and relies on DOM manipulation in pure JS and using local storage.

KHITER Mohamed Achraf 6 Aug 20, 2022
The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Atugonza ( Billions ) Joel 14 Apr 22, 2022