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.

Related tags

Learning resource javascript html5 css3
Overview


Tumaini Maganiko

📗 Table of Contents

📖 To Do List PROJECT

This is my second microverse project I have built it with HTML and CSS.

🛠 Built With

  1. HTML
  2. CSS
  3. JAVASCRIPT
  4. Modules
  5. Webpack

Tech Stack

Client

Key Features

  • Added index.html file
  • Added styles.css
  • Added index.js file
  • Used Modular JS

(back to top)

🚀 Live Demo

(back to top)

💻 Getting Started

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

Prerequisites

  1. Web browser
  2. Code editor
  3. Git-smc

Setup

Clone this repository to your desired folder:

Run this command:

  cd my-folder
  git clone https://github.com/tumainimaganiko/Awesome-Book-project

Install

Install this project with:

command:

  cd my-project
  npm install

Usage

To run the project, execute the following command:

Open index.html using live server extension.

Run tests

Coming soon

Deployment

Coming soon

(back to top)

👥 Author

👤 Tumaini Maganiko

(back to top)

🔭 Future Features

  • Add Interactive list.
  • Add and remove items.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project rate me star

(back to top)

🙏 Acknowledgments

I would like to thank Microverse

(back to top)

📝 License

This project is MIT licensed.

(back to top)

Comments
  • To do list

    To do list

    in this project, I did the following:

    • Use webpack to bundle JavaScript.
    • Use ES6 modules to write modular JavaScript.
    • Create an index.js file and set an array of simple to-do tasks (array of objects).
    • Write a function to iterate over the tasks array and populate an HTML list item element for each task.
    • Render the dynamically created list of tasks in the dedicated placeholder.
    • Create a style.css and set rules for the To-Do List.
    opened by tumainimaganiko 1
  • Interactive list

    Interactive list

    In this project I did:

    • Add a new JavaScript file and import it as a module.
    • Update items object's value for completed key upon user actions.
    • Implement a function for the "Clear all completed" button (using filter() method).
    • Store the updated array of items in local storage.
    opened by tumainimaganiko 0
  • Add remove list

    Add remove list

    In this project I did the following:

    • 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.
    • By default, new tasks have the property completed set to false and the property index set to the value of the new array length.
    • Deleting a task updates all remaining items' indexes, so they represent the current list order and are unique.
    • All changes to the To Do List are saved in local storage.
    opened by tumainimaganiko 0
  • Morning session p2p feedback (2023-05-09)

    Morning session p2p feedback (2023-05-09)

    Morning session feedback

    You have done a fantastic job @tumainimaganiko 💯 🎉

    Few things to add to your project are:

    • It will great for the input field where To-dos are entered to stand out more. Maybe by adding top padding or increasing the size of the input-field
    opened by fezzopro 0
  • Self Assesment

    Self Assesment

    JS Best Practices

    1. Use of undescriptive variable names:
    • https://github.com/tumainimaganiko/To-Do-Lists/blob/8e0a776b1d2028eb50a06b0d4c212b7192ae6386/src/index.js#L34-L36
    • https://github.com/tumainimaganiko/To-Do-Lists/blob/8e0a776b1d2028eb50a06b0d4c212b7192ae6386/src/index.js#L43
    1. No Comments to help explain what the code does, how it works, and why I made certain design decisions.

    HTML and CSS Best Practises

    1. No use of HTML5 semantic tags
    • https://github.com/tumainimaganiko/To-Do-Lists/blob/8e0a776b1d2028eb50a06b0d4c212b7192ae6386/src/index.html#L11-L24
    1. I did not create a CSS rule for multiple elements.
    • https://github.com/tumainimaganiko/To-Do-Lists/blob/8e0a776b1d2028eb50a06b0d4c212b7192ae6386/src/style.css#L11-L12
    • https://github.com/tumainimaganiko/To-Do-Lists/blob/8e0a776b1d2028eb50a06b0d4c212b7192ae6386/src/style.css#L31-L32
    • https://github.com/tumainimaganiko/To-Do-Lists/blob/8e0a776b1d2028eb50a06b0d4c212b7192ae6386/src/style.css#L6-L7
    • https://github.com/tumainimaganiko/To-Do-Lists/blob/8e0a776b1d2028eb50a06b0d4c212b7192ae6386/src/style.css#L23-L24
    opened by tumainimaganiko 0
Owner
Tumaini Maganiko
Full-Stack Software Developer, Rails enthusiast. Stack: JavaScript, Ruby, Rails, React, Redux. Looking for my next job!
Tumaini Maganiko
GitHub https://tumainimaganiko.github.io/To-Do-Lists/dist/
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 To-Do-List app that input's a task by user and saves itself in the localStorage with a unique ID and when the task it checked as complete, user can click on clear all task to remove the task form the UI and localStorage. Built using JavaScript ES6

To Do List App It's an app in which user will be able to add tasks into the list and when completed the user can check it as complete!. Built With HTM

Satyam Sharma 3 Jul 8, 2022
Module '2' Week two '2' project. The following technologies are used: HTML, CSS , Webpack, and JavaScript. Features of this app are rendered dynamically. It allows user to pinned or add task the will be doing on it. Local storage session is implemented. Task stay on app when user refresh or reload page. Task can be checked when completed.

To Do list: Description the project. Built With Major languages Frameworks Technologies used Screenshot of project Built With HTML, JAVASCRIPT, CSS, a

Evans Kupour 8 Nov 4, 2022
A web app which help you to save you a list of your favorite books, they will be saved on your local storage to never loose them even if you close the page. Built wiht JavaScript

Awesome Books In this project I build a page to save a list of your favorites books, you can add new books, delete it and they will be saved in the lo

Williams Colmenares 9 Dec 17, 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
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
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
"To-do list" is a tool that lists the things you need to do and allows you to mark them as complete. Built with JavaScript, HTML, CSS, and Webpack!

HTML CSS JS ES6 WEBPACK NPM LINTERS Todo List Project "To-do list" is a tool that helps to organize your day. It simply lists the things that you need

null 5 Jul 2, 2022
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

Krishna Prasad Acharya 8 Aug 15, 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
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 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
"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 complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

ABDUL ALI 7 Jul 17, 2022
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 complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Microverse Webpack Javascript For the second Javascript milestone in building a todo website, set up a new repository and prepare it for development u

TOFANA SILVIA 16 Jun 13, 2022
This project is a To-do list app which users can store and edit their Todo Tasks. Users can also change the order of their todo

Project This project is about a todo app bundling using webpack Additional description about the project and its features. Built With HTML CSS Javascr

Richmond Adu-Kyere 2 Jun 17, 2022
This is the version to be reviewed - "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 complete. A simple website that allows for doing that, and built using ES6 and Webpack!

Todo-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 comple

Didier Peran Ganthier 4 Dec 20, 2022
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
"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 complete. It is created with HTML , CSS , JS and webpack and NPM.

My Todo 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 com

Dyary Raoof Bayz Agha 5 Mar 29, 2022
A superfast and easy to use knowledge base to help your customers get the info they need, when they need it most.

A superfast and easy to use knowledge base to help your customers get the info they need, when they need it most. helpkb is an open-source Next.js (A

Mark Moffat 11 Dec 5, 2022