To Do list app. Very useful to keep track of daily activities. Made with ❤️, JavaScript and bundle with Webpack

Related tags

Learning resource javascript css html webpack html5
Overview

HTML5 CSS3 JavaScript

To Do List ⚙️

This is a To Do list App to practice Javascript and Webpack deployment.

Live Demo ⚙️

  • GitHub Pages: DEMO

Tech ⌘⇧

  • HTML & CSS best practices: Correct use of tags, elements, properties and syntax.
  • GitHub flow: Correct use of Branches for deployment and features development.
  • Webpack: Source development for production bundling.
  • Linters Check: Local and Pull Request Github workflows to check for stylistic errors, bugs and syntax errors in code.

Author ✍🏼

👤 Raul A Ospina 🧑🏻‍💻

Project Milestones

  • Milestone 0 - project setup (0.5h) ✅
  • Milestone 1 - Add - Remove functions (1h) ✅
  • Milestone 2 - Dynamic content (5h) ✅

Show your support 🦾

  • Give a ⭐️ if you like this project!

License 📝

  • This project is MIT licensed.
Comments
  • Peer-to-peer code review 07/07/2022

    Peer-to-peer code review 07/07/2022

    First of all congratulations on your code, your functions look solid 💯

    We noticed there are conflicting functions inside your event listeners though.

    • [x] Change the event listener on the delete button to be applied when the button is created.
    • [x] Change the deleteTask function so it clears the UL.
    opened by lucas-crodrigues 1
  • Testing To Do list: part 2

    Testing To Do list: part 2

    Test Edit and Delete All Functions

    • We install JSDOM as a global npm module to mock DOM and localStorage.
    • We created a test to edit text in task input and should be saved to localStorage.
    • We created a test to edit checkbox state and new checkbox state should be saveb to localStorage.
    • We created a test to delete all the completed task and the resulting array should be saved to localStorage.
    • We created a test to reset all tasks and the resulting empty array should be saved to localStorage.
    opened by raminka13 0
  • Jest Test 1

    Jest Test 1

    Add to UI - Remove from localStorage

    • We Mocked the DOM with JSDOM
    • We created a test file to evaluate the add function that should add an li inside the ul that contains all tasks.
    • We mocked localStorage with a method inside the test.
    • We coded a test for the remove function that should remove a task from localStorage
    opened by raminka13 0
  • To Do list: interactive list

    To Do list: interactive list

    Reset Button ❌ - Clear All Button 🧼🫧

    • Added event listener to the checkbox. ✅
    • Added new JavaScript functions to save in localStorage checkbox state. 💾
    • Implemented a function for the "Clear all completed" button. 🧼🫧🧹
    • The up to date array is always saved in localStorage.💾
    opened by raminka13 0
  • To Do list: add & remove

    To Do list: add & remove

    Add & Remove to List ↲

    • Implemented a function for adding a new task. ⥅
    • Implemented a function for deleting a task. ⥅
    • Implemented a function for editing task descriptions. ⥅
    • Implemented a function to update IDs and refresh the UI. ⥅
    • Extra = deployed a new element to show the IDs in the list. ☜
    opened by raminka13 0
  • To Do list: Webpack structure

    To Do list: Webpack structure

    Project Setup And first Steps ⌘

    • Set up a new project with webpack. 🪜
    • Created an template.html file to write HTML markup here. ⛓
    • Created an empty To Do List placeholder. 🎛
    • Create an index.js file and set an array. 🦾
    • Wrote a function to iterate over the tasks array and populate an HTML list item element for each task. 📼
    • Create a style.css and set rules for the To Do List. 🎨
    opened by raminka13 0
  • Peer to peer code review 19/7/2022

    Peer to peer code review 19/7/2022

    Great job so far. Your project is looking professional and it works great.

    Optional suggestions:

    • Kindly add the drag and drop feature.
    • Consider giving the numbers a fixed width.
    • Kindly fix to not show the "tasks removed" messages when no tasks are removed when clicking the remove all button.
    • Kindly fix the scroll when adding a lot of tasks.

    opened by diegoyon 0
  • Peer to peer code review session

    Peer to peer code review session

    Your application is very good and unique. This is very good work. As a suggestion, please implement the following features

    • Implement the drag and drop feature.
    opened by wayungi 1
Owner
Raul Ospina
Full-Stack Developer. HTML5, CSS3, JavaScript, Webpack. Available to hire!!!
Raul Ospina
GitHub
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

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

Shamuobe Buingo Joseph 5 May 3, 2022
A simple app that helps a user monitor daily activities by adding, storing and deleting activities.Built with HTML,CSS and JavaScript

To-do-list A simple list app that allows a user to add and remove tasks. Built With HTML CSS JS Webpack Live Demo Click To-do-list to see the page. Ge

Catherine K 7 Apr 8, 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
A simple project to keep track of your activities. It allows basic CRUD operations to organize your to do list.

todo-list A simple project to keep track of todo list. Built With HTML CSS Javascript Webpack Live Demo You can checkout the live version here Getting

Abdelmejid Oumer Ali 9 Jul 20, 2022
Powerful interactive, editable to Do list. keep track of your activities

Project Name To do List Built With HTML CSS webpack Live Demo Live Demo Link Getting Started To get a local copy up and running follow these simple ex

Federico Luna 8 Sep 2, 2022
Keep track of your tasks with this minimalist to do list made with Javascript CSS HTML and Webpack.

my-to-do-list- keep track of your tasks with this to do list DESCRIPTION build a simple HTML list of To Do tasks. LIVE DEMO "https://andgarzonmal.gith

Andres Garzon 12 Jul 21, 2022
It is a simple yet powerful to do list app in which you can add daily to-do tasks.you can edit, remove, check it to change its status to complete or not complete. it would save all the data and changes in local storage and track your daily tasks whether you have completed them or not.Built with vanilla JavaScript

To Do list - minimalist It is a simple yet powerful to do list app in which you can add daily to-do tasks. it would save all the data and changes in l

Zuhaib Amjad 5 Oct 9, 2022
This is an app that helps people keep track of all their activities for a period of time.

To-Do List This is an app that helps people keep track of all their activities for a period of time. They can be able to see what activities they have

Abubakar Ummar 6 Oct 17, 2022
A simple to-do list application that helps to organize your daily tasks and keep track of the task you have completed and the task you are yet to have completed, and also deleting the completed task leaving those yet to be completed.

To-Do-List A To-Do-List App helps users to get their task cordinated and organised. This project is from microverse javascript curriculum which tests

zieeco 12 Jul 8, 2022
This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

Daniel Yerimah 6 Jun 7, 2022
This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Samuel Mwape 18 Sep 20, 2022
A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I implemented 3 functionalities on the this project namely: Add task edit task delete task using Js

My To-Do List A simple todo list app written in javascript and html with basic CSS styling This project makes use of webpack to bundle the code. I imp

Richard Chileya 5 Nov 11, 2022
This is simple To-Do App for managing the daily tasks and to keep track on tasks during the day.

Event Page Todo List. This is simple To-Do App for managing the daily tasks and to keep track on tasks during the day. Built With HTML CSS JavaScript

Miftah Amin 16 Mar 9, 2022
A To-Do-List app designed to help users organise their daily activities

A To-Do-List app designed to help users organise their daily activities. it simply creates a list of things you want to do and allows you to mark them as complete. It was built with HTML, CSS and JavaScript.

Eshetu Melaku 10 Jun 9, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
The project focused on creating To do list structure for organising the daily completed or non-completed activities.

Project to build a simple HTML list of To Do tasks. The list will be styled according to the specifications given by Microverse This simple web page will be built using webpack and served by a webpack dev server.

NTIHINDUKA ALPHA 5 May 20, 2022
Keep a track of all the tasks you need to do and Check off ones you have completed - Created using HTML, SCSS, JavaScript and Webpack.

To Do List Keep a track of tasks you need to do. An Application where you can keep a track of the tasks you need to do and checkout the ones that have

Awais Amjed 19 Jul 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
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