A simple to-do list web application built with ES6 and bundled with webpack. Checkout the awesome features it offers.

Related tags

Learning resource My-To-do-List
Overview

A To-do List Web Application

A simple to-do list with amazing features and a great ux. built using ES6 and npm webpack. Check it out to explore its amazing features. The link is in the live demo section below.

desktop-version mobile-version

Built With

  • Javascript, HTML, CSS
  • npm webpack, linters

Live Demo

Live Demo Link

Getting Started

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

Prerequisites

You will need:

A laptop or tablet, preferably a laptop; A browser installed like Chrome, Firefox, etc; A text editor like installed Atom, VS-code, etc; Terminal or commandline; Internet connection.

Setup, Install, and Usage

Proceed to follow these steps:

Follow these steps:

  • Create a folder in the local storage of your computer which will contain the repository;
  • open your browser and go to the project's repository on github;
  • Click on the code button and copy the https link that is provided on the dropdown;
  • open terminal or commandline from the folder you created in the first step, and type in the command, "git clone " and then paste the url you copied on the previous step, (https://github.com/carlylechia/My-To-do-List.git).
  • finally, you have the repository on your local computer storage. You can now open your text editor and import the repository to start making changes.

Authors

👤 Chia Carlyle

🤝 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 the Microverse team for the guidance and reviews.

📝 License

This project is MIT licensed.

Comments
  • Final milestone: Interactive list

    Final milestone: Interactive list

    On this branch, I made the following updates:

    • Added a new JavaScript file and imported it as a module:
    • it contains methods related to the status updates (completed: true / false).
    • Added an event listener to the checkbox (change) and added a line through the checked task.
    • Updated items object's value for completed key upon user actions.
    • Implemented a function for the "Clear all completed" button using the filter() method.
    • Stored the updated array of items in local storage, so the user gets the correct list values after the page reloads.
    • Implemented the function for the refresh button which empties the list.
    opened by carlylechia 3
  • Peer to peer code review 25/02/2022

    Peer to peer code review 25/02/2022

    Feedback

    • The project is working perfectly and UI and UX are really good. I also noticed that you are in the progress of implementing the drag and drop feature to the app. It would be great to see that feature in the app.
    • A small change about the index of the list. Please check the list index starts with 1 instead of 0.
    opened by vikipretium 1
  • Milestone-2: Implement CRUD (Create, Update, Delete)

    Milestone-2: Implement CRUD (Create, Update, Delete)

    On this branch, I:

    • Wrote a function to add a task to the list
    • Wrote a function to delete a task from the list
    • wrote a function to display the items on the to-do list
    • Wrote functions to save and obtain data to and from the local storage.
    opened by carlylechia 0
  • Milestone 1: To-do list structure

    Milestone 1: To-do list structure

    To complete this milestone:

    • I successfully installed linters and the webpack bundler to use as accessories;
    • I separated my source and dist directories and their respective files;
    • I successfully imported all necessary files
    • I built the list structure of my to-do list web application as shown in the project requirements.
    opened by carlylechia 0
  • Peer to peer code review 03-08-2022

    Peer to peer code review 03-08-2022

    Thank you for presenting your project. It looks nice. And it met all the project requirements. However, if someone checks one of the tasks as complete it does not put a line through the task. I think it would be great if you implement that in your project.

    opened by ridwanediallo 0
Owner
Chia Carlyle
Web developer, JavaScript enthusiast, part-time songwriter. Currently learning: JavaScript, Ruby, Rails, React, Redux. Looking for my next job!
Chia Carlyle
GitHub
BestBuy Bot is an Add to cart and Auto Checkout Bot. This auto buying bot can search the item repeatedly on the ITEM page using one keyword. Once the desired item is available it can add to cart and checkout very fast. This auto purchasing BestBuy Bot can work on Firefox Browser so it can run in all Operating Systems. It can run for multiple items simultaneously.

BestBuy Bot — Open Source GPU/PS5/Xbox Bot I took bits from best open and closed sourced bots and made this simple bot. Please star my repo if this co

Karan Kapuria 585 Dec 31, 2022
Awesome Books project with ES6 is an application that was built using Vanilla JavaScript with ES6 features like using arrow functions. This application allows you to keep records of your favorite books.

Javascript Project Awesome Books with ES6 Using Javascript to create a simple Awesome Books project. Populating the books list and then removing one b

Ghazanfar Ali 8 Sep 28, 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
In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications listed later in this lesson. This simple web page is built using webpack and served by a webpack dev server.

Awesome books:JavaScript Using Modules In this project, I built a simple HTML list of To Do tasks. The list is styled according to the specifications

Hassan Momanyi 10 Nov 25, 2022
This "To-do-list" app is a simple web application that displays a list of task and allows you to add and remove task from that list. it is built with the latest technology namely; JavaScript with webpack Configuration.

To-do-list "To-do-list" is a simple web application that displays a list of task and allows you to add and remove task from that list. Built With HTML

Aniekan udo 10 Nov 21, 2022
This project is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This Awesome books webpage was created using ES6.

Awesome books App using Module Awesome books App using Module This book list was built using modules and other ES6 syntax. It allows users to add/remo

Esther Udondian 6 Jul 25, 2022
JavaScript project for the Leaderboard list app, built using webpack and ES6 features.

Leaderboard List App JavaScript project for the Leaderboard list app, built using webpack and ES6 features. The leaderboard website displays scores su

Samuel Mwape 8 Aug 16, 2022
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.

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 ser

Jesús Vázquez 8 Dec 21, 2022
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
JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

bizimungu pascal 4 May 20, 2022
JavaScript project for the Leader-board list app, using webpack and ES6 features, notably modules

Leaderboard JavaScript project for the Leader-board list app, using webpack and ES6 features, Built With HTML CSS Javascript webpack Getting started t

Banlon Jones 3 Feb 17, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules

LEADERBOARD In this activity I am setting up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I wil

Tobin 11 Mar 16, 2022
The Leaderboard list app using webpack and ES6 features

Leaderboard Game In this activity I set up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I consu

Ibrohim Rasulov 13 Sep 16, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules.

Leaderboard ONJoseph Leaderboard project JavaScript leaderboard project using API. Description In this activity I will set up a JavaScript project for

Joseph O 3 May 12, 2022
A JavaScript project for the Leaderboard list app, using webpack and ES6 features, this is a requirement for Micronauts in Module 2 block 4. This project is MIT Licensed

LeaderBoard A JavaScript project for the Leaderboard list app, using webpack and ES6 features, this is a requirement for Micronauts in Module 2 block

Makoji David 9 Sep 9, 2022
Leaderboard list app, using webpack and ES6 features

Leaderbord-project Leaderboard list app, using webpack and ES6 features Built With HTML CSS Javascript Linters Webpack Live Demo N/A Getting Started T

Didier Peran Ganthier 4 Dec 20, 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 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
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