Simple yet powerful to-do list app to manage your daily tasks! Built with: CSS, HTML, JavaScript

Related tags

Learning resource javascript css html ecmascript6
Overview

To-Do List

Simple yet powerful to-do app to manage your daily tasks!

Built With

  • HTML, CSS
  • Fameworks: N/A
  • Technologies: Linters, Git, GitHub, Webpack

Live preview

Here!!

Screenshots

Initial state

imagen

Adding new Items

imagen

Editing list items and deleting them with the "delete" button

imagen

Completing tasks

imagen

Getting Started

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

Prerequisites

  • node package manager – to be able to install packages locally.
  • A github Account – to be able to use github actions.

Setup

  • Open the terminal
  • Run cd \path\to\where\you\want\your\local\copy
  • Clone the repo
    • Run git clone https://github.com/Trictonicmp/to-do-list.git
    • Run cd README/

Authors

👤 Amaury Permer

🤝 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

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

📝 License

This project is MIT licensed.

Comments
  • Issue found

    Issue found

    https://github.com/Trictonicmp/to-do-list/blob/77391afcf8f6f076c711c2725534f3eabaf16d8a/src/js/Item.js#L48 In this function, the add class method is being used too much and repeatedly, kindly make a function to add all classes at once.

    opened by Trictonicmp 0
  • Interactive list

    Interactive list

    Interactive list changes

    In this PR I:

    • Added a function to delete completed tasks
    • Added a function to change the completed state of each item
    • Added a function to make the completed tasks be marked as completed when loading the data from localStorage
    • Added animation for deleting elements
    • Added animation for new elements
    • Added animation to the list items buttons to move when changing the state from display to editing
    • Added a function to change textarea height according to the description content to make it easier for users to change more than one line in tasks that require more than one line
    • Changed the list input element to be a textarea
    • Fixed a bug that was causing the elements to be deleted twice making the delete element button to delete more than the actual item.
    opened by Trictonicmp 0
  • Add/Remove Functionality

    Add/Remove Functionality

    Add/Remove

    in this PR I:

    • Added CSS variables to be able to make a dark-mode in a future PR
    • Added a Favicon icon
    • Added a function to be able to select list items
    • Added a function to edit the list item
    • Added a function to add a new list item
    • Added a function to remove a list item
    • Added a function to update each list item index
    • Added a function to save the local storage data as the user makes changes on a list item
    • Changed the structure of the HTML list items
    opened by Trictonicmp 0
  • To do list

    To do list

    To do list app

    In this PR I:

    • Made the whole project structure and set it up with Webpack
    • Added the main HTML skeleton of the app
    • Added styles to make it look beautiful, following the requirements design
    • Added functionality to render the list items as a list element in the HTML DOM
    opened by Trictonicmp 0
  • Peer-to-Peer-Code-Review

    Peer-to-Peer-Code-Review

    Awesome Job so far @Trictonicmp! It will be fine if you add a screenshot of the site to your README.md file. An update of the README.md file will be perfect.

    opened by ONJoseph 0
Owner
Amaury Permer
Computer Science Bachelor Degree Becoming Full-Stack Developer. Open to new opportunities. Stack: | JavaScript | React | Java | C++ |
Amaury Permer
GitHub https://trictonicmp.github.io/to-do-list/
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 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
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
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
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
In this project I have build a To Do List app that you can list, add, delete and manage your daily tasks better. Build with HTML, CSS, JS, ES6, JSON

ToDo List This project is build by javascript web packages which can add and remove daily tasks. Built With Html Css Javascript Sublime Text Author ??

Sahar Saba Amiri 7 Oct 25, 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
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 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 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 is a simple web based application that gives users an opportunity to note and organize their daily tasks. This app is built with JavaScript, HTML/CSS.

Project Name To-Do App Live Demo About Project In this feature, I built a to do list app which helps to list the tasks to be done at a particular time

Hatim Eddinani 8 Aug 18, 2022
Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

Javascript Project Todo List Using Javascript to create a simple Todo List project. Populating the todo list and then removing from the list. Built Wi

Ghazanfar Ali 9 Sep 28, 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 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 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
A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

Tumaini Maganiko ?? Table of Contents ?? Table of Contents ?? To Do List PROJECT ?? Built With Tech Stack Key Features ?? Live Demo ?? Getting Started

Tumaini Maganiko 7 May 9, 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
A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM5, CSS, JavaScript, and Webpack.

To-Do-List A To-DO-List app that allows user to create, update, and remove their daily tasks in and from the browser localstorage. Built with HTLM, CS

Steven Ntakirutimana 5 Jul 7, 2022
A to-do list website task by (@microverseinc), you can easily manage your daily tasks

To DO list Is a website to manage daily tasks Built With HTML,CSS,JS webpack Live Demo (if available) Live Demo Link Getting Started This is an exampl

Yousef Hesham 6 Oct 22, 2022