Interactive To Do List, draggable tasks, optimized for desktop and mobile screen sizes. It reserves data in local storage. Built with HTML, CSS, and JavaScript.

Related tags

Learning resource To-Do-List
Overview

To Do List

Interactive daily To-Do List

Built With

  • Major languages: html, css, javascript
  • Frameworks:
  • Technologies used: Webpack

Live Demo

Live Demo Link

Getting Started

-Visit the [Live Demo] above.

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

Authors

👤 Ja'fer Yousef

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

📝 License

This project is MIT licensed.

You might also like...

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

Aug 15, 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

May 9, 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

Aug 4, 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

Sep 26, 2022

A to-do list set up using webpack. It allows the user to add, remove, edit and check items on the list. All the data is saved in local storage.

Project Name: Webpack-Project: To-Do-List Description of the project: A simple to-do-list app created using webpack. Built With Major languages: HTML

Aug 5, 2022

An application to map out game reserves using aerial photography, intelligent image stitching and AI driven recognition focus.

Map Out Game Reserves Using Aerial Photographs An application to map out game reserves using aerial photography, intelligent image stitching and AI dr

Sep 29, 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

Jul 21, 2022

An interactive list of tasks where you can add, remove, edit, mark as completed and clear all done tasks. Tested with Jest.

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

Nov 9, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022
Comments
  • Implement task completed related functionalities

    Implement task completed related functionalities

    On this feature branch I implemented the below tasks:

    • Added a new JavaScript file (status.js) and imported it as a module:
    • it contains methods related to the status updates (completed: true / false).
    • Added event listener to the checkbox (change).
    • Updated items object's value for completed key upon user actions.
    • Implemented a function for the "Clear all completed" button (used filter() method).
    • Stored the updated array of items in local storage, so the user gets the correct list values after the page reloads.
    opened by jaferIdrees 0
  • Implement add remove and edit func.

    Implement add remove and edit func.

    Below parts were completed on this branch

    • 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.
    • All changes to the To Do List should be saved in local storage.
    opened by jaferIdrees 0
  • List structure

    List structure

    Below tasks were completed:

    • Set up a new project with webpack .
    • Create an index.html file and write my HTML markup here.
    • Create an empty To Do List placeholder (<ul> element). The index.html file must be 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 contains three keys.
    • 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 should appear in order of the index values for each task.
    • Create a style.css and set rules for the To Do List. CSS must be loaded by Webpack Style/CSS Loader.
    opened by jaferIdrees 0
  • JavaScript best practices

    JavaScript best practices

    JavaScript Best practices

    https://github.com/jaferIdrees/To-Do-List/blob/784d6167054c87b0d96eafc36843305844a0bb8c/src/index.js#L41 In the addTaskToPage function, it's recommended to place all declarations on top of the function's code ❗ https://github.com/jaferIdrees/To-Do-List/blob/784d6167054c87b0d96eafc36843305844a0bb8c/src/index.js#L55-L57 No need to keep these inline comments code

    DRY, KISS, and YAGNI rules

    No related issues were noticed. 💯

    HTML, and CSS best practices

    No related issues were noticed. 👍

    opened by jaferIdrees 0
Owner
Jafar Yousef
Full-stack software developer with a love for JavaScript and Java. I'm originally a chemist and mess around with business development. Open to new opportunities
Jafar Yousef
GitHub
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
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
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
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 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
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
"Awesome books" is a simple website that displays a list of books and allows you to add ang remove books from that list. Also you can store your data in your local storage. Build with JavaScript, HTML and CSS.

Awesome Books Creating an app that adds and delete books from a list. Built With HTML CSS JavaScript Application Page url https://TimmyChan99.github.i

Fatima Ezzahra elmenoun 5 Jan 28, 2022
Microverse Module 02 Project: This is education project that allow user to add desire books to the list and also delete books. It makes use of local storage to preserve the data on the web browser.Built with HTML, CSS, JavaScript

Project Demo Live Demo AWESOME BOOK PROJECT Project allow user to add desire books to the list and also delete books. It makes use of local storage to

Ajayi Ridwan 8 Dec 3, 2022
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Paul B. Joiner 0 Dec 30, 2021