Skip to content

tsohleDev/To-do-planner

Repository files navigation

To Do list

logo

Microverse

To Do list: Final Product

"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. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

Project 1:In this project, I will build a simple HTML list of To Do tasks. The list will be styled according to the specifications listed later in this lesson. This simple web page will be built using webpack and served by a webpack dev server.

Project 2: In this project, I will implement the CRUD (create, read, update, delete) methods. All the elements of the user interface will be fully functional and your application will be completed.

Project 3:In this project, I will add some functionality to your application to make it interactive. The user will also be able to mark task completion by selecting the corresponding checkbox (or undo it by unchecking the checkbox). The updated tasks list will be stored in local storage.

📗 Table of Contents

📖 Project name

Empty List Filled List Checked List Delete List
Desktop Version Desktop Version Desktop Version Desktop Version
**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. You will build a simple website that allows for doing that, and you will do it using ES6 and Webpack!

Here are some features of the page:

  • Type content to be added
  • Select items on the list
  • Add items to listt
  • Edit items in list
  • Delete items from list

🛠 Built With

HTML
CSS
Javascript

(back to top)

🚀 Live Demo

To Do list live demo

(back to top)

💻 Getting Started

  • Create a local directory that you want to clone the repository.

  • Open the command prompt in the created directory.

  • On the terminal run this command -

 git clone [https://github.com/tsohleDev/To-do-planner.git]
  • Go to the repository folder using command prompt
 cd To-do-planner
  • Install the dev dependencies for linters run
 npm install.
  • To start run
 npm start

(back to top)

Prerequisites

In order to run this project you need:

-A working browser application (Google chrome, Mozilla Fire fox, Microsoft edge ...)

-VSCode or any other equivalent code editor

-Node Package Manager (For running, debuging, or installing dependancies to be used)

node and npm:

-Linux

  sudo apt install nodejs npm

-windows

download and install

(back to top)

Setup

Clone this repository to your desired folder:

  • Open the command prompt in the created directory.

  • On the terminal run this command

git clone https://github.com/tsohleDev/To-do-planner.git
  • Go to the repository folder using command prompt
 cd To-do-planner
  • Install the dev dependencies for linters
 run npm install.
  • To start run
npm start

(back to top)

👤Authors

Tsohle Mokhemisi

logogithubhandle
logo twitterhandle
logolinkedIn

(back to top)

🔭 Future Features

  • Implement additional pages, which will allow the user to Register

  • Implement additional pages, which will allow the user to Login

(back to top)

🤝 Contributing

Credits to everyone who inspired the codebase.

I would like to thank Microverse

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Give a ⭐️ if you like this project!

(back to top)

🙏 Acknowledgments

Lucas Erkana
logogithubhandle
logo twitterhandle
logolinkedIn
logofacebook

Font Awesome

Icons8

Google Fonts

Bootsrtap

Luxon

(back to top)

📝 License

This project is MIT licensed.

NOTE: we recommend using the MIT license - you can set it up quickly by using templates available on GitHub. You can also use any other license if you wish.

(back to top)

About

A to do list on the browser using Webpack bundler

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published