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

Overview

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 webpack dev server.

Built With

  • JavaScript
  • HTML
  • CSS
  • Git & Github

Live Demo

Live demo

Getting Started

This project is part of a training series to highlight the need for proper documentation, best practices, and writing clean codes with html, css and Javascript.

Prerequisites

  • Have an IDE installed on your computer to be able to view the code locally.
  • Have a good working knowledge of Git and Github.

Setup

  • Open a command line terminal (Git bash preferrably) and navigate to a directory where you would like to save the work folder using cd.
  • Clone the repository with git clone https://github.com/wale-prog/To-do-list.git
  • To get the cuurent working tree, git fetch --all, then checkout to "todo-list-structure" branch.
  • Finally, display the content of the ./dist/index.html by starting the webpack dev server doing the following:
    • navigate to the root directory with a command line terminal
    • run 'npm start'

Install

  • IDE preferrably VScode
  • using command line terminal in the root directory install the following:
    • node package manager with 'npm init -y'
    • webpack with 'npm install webpack webpack-cli --save-dev'
    • HtmlWebpackPlugin with 'npm install --save-dev html-webpack-plugin'

Usage

  • For any individual who wishes to practice and master webpack usage, basic HTML,CSS and Javascript
  • For practice of HTML5, CSS and Javascript technologies.

Author

👤 Wale Olapetan

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Shoutout to @felixodete for being amazing.
  • Microverse.

📝 License

This project is MIT licensed.

Comments
  • To-Do List: Interactive

    To-Do List: Interactive

    In this pull request, I have made the following changes to the To-Do list project:

    • I have created a new Javascript file and imported it as a module, it contains the logic for status updates (`completed: true/false).
    • Task statuses are updated live on the local storage upon user actions
    • The "clear all completed" button has also been implemented to enable users remove multiple tasks at once.

    All changes have been saved to the local storage so users get the correct update when the page is reloaded.

    opened by wale-prog 0
  • To-Do List : CRUD

    To-Do List : CRUD

    In this Pull Request, I have made the following changes to the To-do list project:

    • remove the hardcoded tasks and create them dynamically with the user's input.
    • write a function to add tasks.
    • write a function to delete tasks.
    • write a function to edit tasks.
    • update tasks indexes as the user adds or removes tasks.

    All changes are saved in the local storage.

    opened by wale-prog 0
  • To Do List: List structure

    To Do List: List structure

    In this pull request, I have done the following:

    • initiated this project with webpack, and created the HTML file dynamically in the dist folder using the HTML Webpack plugin.
    • installed CSS loaders to enable the compilation of the CSS file.
    • create an array of objects to hold to-do data
    • description in the to-do data along with a boolean expression that shows if the task has been completed is saved in an array of objects and then dynamically loaded to the page.
    opened by wale-prog 0
  • To-do list Self review : DRY, KISS, and YAGNI

    To-do list Self review : DRY, KISS, and YAGNI

    • The code has been kept dry, there are no repeated codes instead, codes have been reused.
    • the code has been kept simple by using in-built array and object methods and removing excess lines of codes.
    • no lines of codes have been added because they will look good or fancy, rather I plan to improve this project as my knowledge expands and the need arises.
    opened by wale-prog 0
  • To-do List: Self Review - JavaScript best practice.

    To-do List: Self Review - JavaScript best practice.

    It has been quite interesting working on this project but looking back and checking the codes, there are a few things that could have been done better. The following are my observations:

    • in the deleteUI module, the lines of code linked here was used to iterate through three different arrays, I have not read anything wrong about using a for loop to iterate through more than one arrays but certainly does not feel right.
    • No console.log statement has been left in the code, the DRY concept has also been implemented, the modularity of the code makes it simple and reusable, and the descriptive naming convention has been employed when naming variables and functions.
    • Since ES6 syntax was used, destructuring should have been used for the following lines of code
    opened by wale-prog 0
Owner
Olawale Olapetan
Full-Stack Software Developer, and JavaScript enthusiast, I play guitar and enjoy driving open roads in my free time. Stack: JavaScript, Ruby, Rails, and React.
Olawale Olapetan
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 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
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
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
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 to do list where you can add tasks, mark completed tasks and clear all completed tasks.

To Do List A to do list where you can add tasks, mark completed tasks and clear all completed tasks. You can rearrange the order of the tasks by doubl

Amira 7 Mar 4, 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
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
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
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 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
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
zieeco 12 Jul 8, 2022
A web app which help you to save your daily tasks, mark them as completed and edit and delete them. Built with JavaScript

To-Do List A simple to-do list to help you organize your daily tasks. Built With HTML. CSS. JavaScript: ES6, Modules, Classes, Arrow Functions, Events

Williams Colmenares 13 Dec 17, 2022
A web app which help you to save your daily tasks, mark them as completed and edit and delete them. Built with JavaScript

To-Do List A simple to-do list to help you organize your daily tasks. Built With HTML. CSS. JavaScript: ES6, Modules, Classes, Arrow Functions, Events

Williams Colmenares 11 Aug 10, 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