This project is basically a to-do list application based on JavaScript, HTML, and CSS. Where we can add, remove and edit tasks.

Overview

Title-Info

This project is basically a to do list application. Where we can add, remove and edit tasks.

ScreenShots/GIF

Built With

  • HTML
  • CSS
  • Javascript
  • VScode

Live Demo

For the link to the live demo, Click here

Getting Started

To get a local copy up and running you just need to follow the following steps;

  • Clone this repository with git clone https://github.com/Tufahel/to-do-list.git using your terminal or command line.
  • Run code . to open it in vscode
  • Run "npm install"
  • Run "npm run build"
  • Run "npm start"
  • Now site will automatically run into your default browser.

Authors

👤 Author

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

Comments
  • List Structure.

    List Structure.

    In this pull request I have followed the following requirements:

    • Set up a new project with webpack.
    • Create an index.html file and write my HTML markup there. Create an empty To Do List placeholder ( div or ul element).
    • The index.html file is set as a template using the HTML Webpack Plugin.
    • Create an index.js file and set an array of some simple to-do tasks (array of objects). Each task object have contain three keys: a. description [string]. b. completed [bool]. c. index: [number].
    • Write a function to iterate over the tasks array and populate an HTML list item element for each task.
    • On page load render the dynamically created list of tasks in the dedicated placeholder. The list appears in order of the index values for each task.
    • Create a style.css and set rules for the To-Do List. CSS loaded by Webpack Style/CSS Loader.
    • All my source files (index.html, index.js, and style.css) are located in the /src directory, and my distribution files will be generated by webpack and served by webpack dev server from the /dist folder.

    Here is a demo screenshot: Screenshot from 2022-02-16 22-44-42

    opened by Tufahel 1
  • Interactive List Exercise.

    Interactive List Exercise.

    In this pull request I have implemented the following instructions:

    • Add a new JavaScript file and import it as a module: it will contain methods related to the status updates (completed: true / false).
    • Add event listener to the checkbox (change).
    • Update items object's value for completed key upon user actions.
    • Implement a function for the "Clear all completed" button (use filter() method).
    • Store the updated array of items in local storage, so the user gets the correct list values after the page reloads.

    Here is Gif video for better understanding: gif-todo

    opened by Tufahel 0
  • Crud Implementation

    Crud Implementation

    In this pull request I have implemented following requirements:

    • Remove all hardcoded items from the tasks array.
    • Create a new JavaScript file for the new functionality.
    • Implement a function for adding a new task (add a new element to the array).
    • Implement a function for deleting a task (remove an element from the array).
    • Implement a function for editing task descriptions.
    • By default new tasks should have the property completed set to false and the property index set to the value of the new array length (i.e. if you're adding a 5th task to the list, the index of that task should equal 5).
    • Deleting a task should update all remaining items' indexes, so they represent the current list order and are unique. All changes to the To-Do List should be saved in local storage.

    Here is a Gif Video for broad understanding: gif-todo

    opened by Tufahel 0
  • HTML and CSS Best Practice

    HTML and CSS Best Practice

    • HTML is ok in comparison with its best practices.
    • As for CSS, you can consider the suggestions below:

    https://github.com/Tufahel/to-do-list/blob/e47e21ba99fe3454b356ef58df58151d8d7dbb65/src/style.css#L91

    https://github.com/Tufahel/to-do-list/blob/e47e21ba99fe3454b356ef58df58151d8d7dbb65/src/style.css#L116

    • Consider this suggestion regarding those issues => Screenshot from 2022-02-21 19-58-48
    opened by Tufahel 0
  • JavaScript Best Practice

    JavaScript Best Practice

    • You almost follow Javascript Best Practice in this project. Just need to fix little issues.

    https://github.com/Tufahel/to-do-list/blob/e47e21ba99fe3454b356ef58df58151d8d7dbb65/src/modules/addTodo.js#L7

    • Consider using !== not != in Javascript
    opened by Tufahel 1
Owner
Tufahel Ahmed
Full-Stack Software Developer training in @microverseinc. Student at NWPU China in CST. Learning JS, React, C, C++, DS & Algo. Open to new opportunities.
Tufahel Ahmed
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
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
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
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
A Minimalist to do list website where user can add, remove and edit multiple tasks and All the changes user makes in his to do list is saved in browser local storage so that it can be accessed later.

Testing for Add Remove function in To Do List App Jest framework is used for testing. Created (addremove.test.js) for a file containing the add item a

Krishna Prasad Acharya 8 Aug 15, 2022
This project is a web application that enables users to add, edit and remove tasks they intend to perform. Built with JavaScript, HTML, and CSS.

TO DO List Unit testing using jest Create the to-do List project with webpack. Ultimately, the user should be able to add an item and delete the item

Afolabi Akorede 10 Jul 26, 2022
An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

To do List This project its an interactive list of task where you can add and remove tasks dinamically Project Images Add new Tasks Edit Existing Task

Alex Puente 7 Nov 9, 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
A simple To-Do List app built using JavaScript, where users can add, edit and remove tasks from the list as well as marking them as completed.

To-Do List This is a to-do list application. Built With Languages: HTML5 & CSS3 JavaScript Preprocessors: Sass Technologies: Webpack Conventions and M

Gabriel Santo 3 Jun 25, 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
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: interactive list description: A todo list app that allow users to add new task, delete, edit, and clear all completed.Built with JavaScrip

IBRAHIM AHMAT 7 Aug 4, 2022
This is a web application that enables users to add, edit and remove tasks they intend to perform. Built with JavaScript, HTML, and CSS.

TODO LIST It list everything that you have to do, with the most important tasks at the top of the list, and the least important tasks at the bottom. B

Josphat Kiploman 7 Sep 16, 2022
Aron 8 Dec 17, 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
This website utilizes JavaScript, HTML, and CSS to allow the user to create a to-do list that they can add to, remove from, and edit.

todo Description the project. "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

Emily Robertson 8 Jul 23, 2022
Simple To-do list build using HTML5, CSS3, JavaScript and Webpack. You can add new tasks, remove and edit them.

Simple To-do list build using HTML5, CSS3, JavaScript and Webpack. You can add new tasks, remove and edit them.

Esteban Munoz 6 Mar 5, 2022