In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

Related tags

Learning resource To_do_list
Overview

To do list

In this project, we built a simple HTML list of To Do tasks. This simple web page was created using webpack and served by a webpack dev server.

Built With

  • HTML, CSS and JavaScript.
  • Linters and Webpack.
  • GitHub

Live Demo

Live Demo Link

Getting Started

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

Prerequisites

NodeJS

Setup

1. [email protected]:jevazquezb/To_do_list.git
2. cd To_do_list

Install

npm install

Usage

npm run dev

Done!

Ready to work? ⛏️ You're all set to explore and change the repo locally (on your computer).

Author

👤 Jesús Vázquez

🤝 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

  • Google!!!
  • Inspiration.
  • etc.

📝 License

This project is MIT licensed.

Comments
  • To Do list: interactive list

    To Do list: interactive list

    In this project we:

    • Used Webpack to bundle JavaScript.
    • Learned how to use proper ES6 syntax.
    • Used ES6 modules to write modular JavaScript.
    • Built a simple HTML list of To-Do tasks.
    • Added a "Clear All" feature to the app.
    opened by jevazquezb 0
  • To do list: testing part 2

    To do list: testing part 2

    In this project we:

    • Write unit tests for a To-do list app.
    • Tested a function for editing the task description.
    • Tested a function for updating an item's 'completed' status.
    • Tested the "Clear all completed" function.
    opened by jevazquezb 0
  • Update script command

    Update script command

    https://github.com/jevazquezb/To_do_list/blob/058c23d04f474c05d5adc2d6b26684495f2d6b96/package.json#L6-L10

    There is no dev script command in your package.json Screenshot 2022-06-09 at 14 31 57

    Kindly update the script command

    opened by learnwithalfred 0
  • To do list: Own assessment (DRY)

    To do list: Own assessment (DRY)

    DRY Assessment

    To_do_list/src/styles/style.css

    • I could add .disp class to the corresponding element in the HTML file... https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/styles/style.css#L28-L34 ... and remove display and align-items properties from the .img-btn class. https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/styles/style.css#L45-L48

    • I might use a single class that has "border", "outline" and "background-color" properties and give it a name (e.g .box). Don't forget to add it to the corresponding elements. https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/styles/style.css#L69-L72 https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/styles/style.css#L108-L111

    To_do_list/src/index.js

    • I could make a function to create single elements with an id and a class. https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/index.js#L45-L47

    • Or I could make functions for specific HTML elements. For instance, one function for buttons... https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/index.js#L49-L54 https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/index.js#L70-L73 https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/index.js#L84-L87

    • And another one for images: https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/index.js#L75-L79 https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/index.js#L90-L94

    • On the other hand, I could put this code inside a function. https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/index.js#L99-L102 https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/index.js#L113-L116

    To_do_list/src/modules/clear_all.js and To_do_list/src/modules/task_manager.js

    • I could make a function out of this loop: https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/modules/clear_all.js#L44-L46 https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/modules/task_manager.js#L15-L17

    • Also I could probably turn these two functions into one: https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/modules/task_manager.js#L11-L19 https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/modules/clear_all.js#L41-L48

    • And these two as well: https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/modules/clear_all.js#L3-L11 https://github.com/jevazquezb/To_do_list/blob/9e1266b494dc25f8abd2960a0584adc11db0d640/src/modules/task_manager.js#L21-L30

    opened by jevazquezb 0
  • Morning session code review

    Morning session code review

    Hi Jesus, thanks for sharing your code, It looks amazing! We as a group agreed that we don't have anything to add to your code, It looks good and works perfectly! Happy coding!

    opened by KaskMIL 0
Owner
Jesús Vázquez
Becoming a Full-Stack Software Developer. JavaScript, Ruby, Rails, React, Redux on load. Looking for new opportunities. Tennis lover and flour tortillas my sin.
Jesús Vázquez
GitHub
In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a webpack dev server.

To Do list with Webpack In this project, I build a simple HTML list of To Do tasks. This simple web page will be built using webpack and served by a w

Sidney Kaguli 8 Aug 23, 2022
This project is about building a simple HTML list of To Do tasks. Built using webpack and served by a webpack dev server.

To Do List app This project is about building a simple HTML list of To Do tasks and is built using webpack and served by a webpack dev server. Built W

Dino Ronald Quispe Arias 6 Nov 4, 2022
A simple HTML page maintaining list of To Do tasks using webpack and served by a webpack dev server.

Task Organiser In this project, we build a simple HTML list of To Do tasks using webpack and served by a webpack dev server. Built With HTML CSS Javas

Angom 4 Jun 24, 2022
This is a simple web app that allows a user add list of tasks that needs to be completed. It is built using webpack and served by a webpack dev server.

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 compl

Favour Ezeugwa 18 Aug 19, 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
A todo-list app designed to help users manage their tasks. Users can create a task, read tasks, update tasks, delete task, check completed tasks and delete all checked tasks. Also contains basic tests. Built with WebPack,, Modular JavaScript, Jest Libary and LocalStorage.

todolist This project is created to understand the use of ES6 with Webpack Built With HTML, CSS and Javascript. Webpack. Live Demo (if available) http

Shotola Ololade 3 Oct 13, 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
The to-do list project is an app that allows users to successfully organize their day by inputting prioritized tasks. The project also allows users to carry out the CRUD operations for (add, edit and delete). Two special features of the app are that it saves tasks in the local storage of the user's browser, so when the user reloads or revisits the app, the user can view a list of tasks formerly inputted, and it allows users to prioritize their tasks by dragging up and down the list section.

TO-DO-LIST This is a To Do List Project that dynamically displays tasks to be done with interactions for removing and adding task when completed or no

Francis Ugorji 9 Nov 1, 2021
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
In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

To Do List In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaSc

Andrés Felipe Arroyave Naranjo 10 Mar 31, 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
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
A Single Page Application featuring a medium fidelity wireframe of a to-do-list app that stores tasks that are added and which can be deleted. The tasks can be checked, unchecked or edited. Built mainly with JavaScript and strict ES6 features. Bundled with webpack.

To-Do-List In this "To-Do-List" project, I created the basic structure of a page single page application with HTML, CSS and javascript, using the webp

amon-cofie 6 Oct 7, 2022
In this project, I built a simple HTML list of To-Do tasks. Using webpack to bundle JS functionality and other sources.

To-do-list App A simple To-do-list app using DOM manipulation. Built With HTML/CSS JavaScript Webpack Jest Live Demo Live Demo Getting Started Get a c

Andy Menutti 10 Nov 5, 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
This project entails a To-do-List whereby a user can input the tasks they want to do, check the tasks done and also clear all tasks when all of them are completed. It is efficient for a user who want to manage their time and keep track of their day.

Screenshot Here is a screenshot for the project. To-Do-List Project This is a Microverse project that entails a to-do-list which one is able to add an

Grayce Muthui 8 Jun 16, 2022
A simple to-do app for managing daily tasks built with Webpack, JavaScript, HTML, and CSS with the functionality to manipulate multiple completed tasks and store them to local storage.

TODO LIST APP In this project, I have built a simple HTML list of To Do tasks. The list is styled according to the listed specifications . This simple

Selma Belhadj 8 Jun 7, 2022
This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Manel Hammouche 11 Aug 3, 2022