Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/oguntayomicheal/to-do-list

A single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS
https://github.com/oguntayomicheal/to-do-list

css3 html5 javascript

Last synced: 25 days ago
JSON representation

A single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS

Awesome Lists containing this project

README

        

# πŸ“— Table of Contents

- [πŸ“— Table of Contents](#-table-of-contents)
- [πŸ“– ToDo-List-App ](#-todo-list-app-)
- [πŸ›  Built With ](#-built-with-)
- [Tech Stack ](#tech-stack-)
- [Key Features ](#key-features-)
- [πŸš€ Live Demo ](#-live-demo-)
- [πŸ’» Getting Started ](#-getting-started-)
- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment ](#deployment-)
- [πŸ‘€ Author ](#-author-)
- [πŸ”­ Future Features ](#-future-features-)
- [🀝 Contributing ](#-contributing-)
- [⭐️ Show your support ](#️-show-your-support-)
- [πŸ™ Acknowledgments ](#-acknowledgments-)
- [❓ FAQ ](#-faq-)
- [πŸ“ License ](#-license-)

# πŸ“– ToDo-List-App

> This is a single page application that allows users to keep track of their tasks. The CRUD (create, read, update, delete) methods were implemented. Thus, Users can add the task and also check the checkbox if the task has been completed. The updated tasks list is stored in the local storage.

## πŸ›  Built With

### Tech Stack

Client

### Key Features

- **Responsive Design.**
- **Pixel Perfect design.**
- **Local Storage**

(back to top)

## πŸš€ Live Demo

[Live Demo Link](https://oguntayomicheal.github.io/To-Do-list/dist/)

## πŸ’» Getting Started

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

### Prerequisites

In order to run this project you need:

- A web browser to view output e.g [Google Chrome](https://www.google.com/chrome/).
- An IDE e.g [Visual studio code](https://code.visualstudio.com/).
- [A terminal](https://code.visualstudio.com/docs/terminal/basics).

### Setup

Clone this repository to your desired folder or download the Zip folder:

```
git clone https://github.com/oguntayomicheal/To-Do-list.git
```

- Navigate to the location of the folder in your machine:

**``you@your-Pc-name:~$ cd To-Do-List``**

### Install

Install all dependencies:

```
npm install
```

### Usage

To run the project, follow these instructions:

- After Cloning this repo to your local machine.
- To get it running on your default browser and local host, run:
```
npm start
```

### Run tests

To run tests, run the following command:

- Track HTML linter errors run:
```
npx hint .
```
- Track CSS linter errors run:
```
npx stylelint "**/*.{css,scss}"
```
- Track JavaScript linter errors run:
```
npx eslint .
```
- For unit testing, run:
```
npm test
```

### Deployment

You can deploy this project using: GitHub Pages,
- I used GitHub Pages to deploy my website.
- For more information about publishing sources, see "[About GitHub pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#publishing-sources-for-github-pages-sites)".

(back to top)

## πŸ‘€ Author

πŸ‘€ **Micheal Oguntayo**

- GitHub: [@oguntayomicheal](https://github.com/oguntayomicheal)
- Twitter: [@OguntayoMicheal](https://twitter.com/Oguns_micky)
- LinkedIn: [@OguntayoMicheal](https://www.linkedin.com/in/ogunsmicky/)

(back to top)

## πŸ”­ Future Features

- [ ] **Implement button to switch sort type (ascending or descending).**
- [ ] **Implement completed and not-completed routes for completed and non-completed tasks, respectively.**
- [ ] **Add backend to store tasks.**

(back to top)

## 🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

(back to top)

## ⭐️ Show your support

Give a ⭐️ if you like this project and how I managed to build it!

(back to top)

## πŸ™ Acknowledgments

- The original design ideal from MicroverseπŸ’•.
- Project from [Microverse](https://www.microverse.org/?grsf=bcrgi3) JavaScript module.
- Thanks to the Microverse team for the great curriculum.
- Thanks to the Code Reviewer(s) for the insightful feedbacks.
- A great thanks to My coding partner(s), morning session team, and standup team for their contributions.
- Hat tip to anyone whose code was used.

(back to top)

## ❓ FAQ

- **Can I fork and reuse the repository**

- Yes please, feel free.

- **Can I improve the repository, and my changes will be accepted if they are good?**

- Yes please, nice ideas are welcome, please.

(back to top)

## πŸ“ License

This project is [MIT](./MIT) licensed.

(back to top)