ToDo_List_Webpack

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

ToDo_List_Webpack

★ 19 Open GitHub ↗

To Do App created in HTML CSS and JS, i used Webpack to bundle all files. The app displays items according to the order they are created in.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h3><b>Module 2: ToDo List</b></h3>

</div>

# 📗 Table of Contents

- [📖 About the Project](#about-project)
  - [🛠 Built With](#built-with)
    - [Tech Stack](#tech-stack)
    - [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
  - [Setup](#setup)
  - [Prerequisites](#prerequisites)
  - [Install](#install)
  - [Usage](#usage)
  - [Run tests](#run-tests)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ](#faq)
- [📝 License](#license)

# 📖 ToDo List with Webpack <a name="about-project"></a>

ToDo List with Webpack is a simple web app that stores a ToDo list, it uses modular architechture aswell as webpack.

## 🛠 Built With <a name="built-with"></a>
HTML, CSS, NodeJS
### Tech Stack <a name="tech-stack"></a>

<details>
  <summary>Structure</summary>
  <ul>
    <li><a href="https://html.com/">HTML</a></li>
  </ul>
</details>

<details>
  <summary>Style</summary>
  <ul>
    <li><a href="https://www.w3schools.com/css/">CSS</a></li>
  </ul>
</details>

<details>
  <summary>Module Bundler</summary>
  <ul>
    <li><a href="https://webpack.js.org/">Webpack</a></li>
  </ul>
</details>

<details>
<summary>Linters</summary>
  <ul>
    <li><a href="https://webhint.io/">Webhint</a></li>
    <li><a href="https://stylelint.io/">Stylelint</a></li>
    <li><a href="https://eslint.org/">ESLint</a></li>
  </ul>
</details>

### Key Features <a name="key-features"></a>
- Object Oriented Programming.

- Modular JS architecture.
  - Use Modules.

- Module Bundler.
  - Use Webpack.

## 🚀 Live Demo <a name="live-demo"></a>

-[Link](https://codedit334.github.io/ToDo_List_Webpack/dist).

## 💻 Getting Started <a name="getting-started"></a>

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

In order to run this project you need:
  Open terminal on the same folder of the project and run:
```sh
 npm install
```

### Setup

Clone this repository to your desired folder:
```sh
  cd my-folder
  git clone git@github.com/codedit334/Todo_List_Webpack.git
```
### Install

Install this project with:
```sh
  cd Todo_List_Webpack
  npm install
```

### Usage

Run Dev Server (Port 3000)

```
  npm run dev
```

### Build for production

```
npm run build
```

### Run tests

- ### Linter Tests

To run tests, run the following command:

To check for html errors run:
```sh
  npx hint .
```
To check for css errors run:
```sh
  npx stylelint "**/*.{css,scss}"
```
To check for js errors run:
```sh
  npx eslint .
```

- ### Jest Tests

```sh
  npm test
```

## 👥 Authors <a name="authors"></a>

👤 Author1

- GitHub: [@codedit334](https://github.com/codedit334)
- Twitter: [@oussedit](https://twitter.com/oussedit)
- LinkedIn: [Oussama Elabdioui](https://www.linkedin.com/in/oussama-elabdioui-4677a41b6/)

👤 Dilsher Balouch

- GitHub: [@DilhserB](https://github.com/DilsherB)
- Twitter: [@_brilliantMindz](https://twitter.com/_brilliantMindz)
- LinkedIn: [brilliantMindz](https://linkedin.com/in/brilliantMindz)

## 🔭 Future Features <a name="future-features"></a>

- Make it interactive.

## 🤝 Contributing <a name="contributing"></a>

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/codedit334/Todo_List_Webpack/issues).

## ⭐️ Show your support <a name="support"></a>

If you like this project send your feedback to encourage me to do more.

## 🙏 Acknowledgments <a name="acknowledgements"></a>

I would like to thank Microverse for offering me this opportunity to learn, and practice my skills.

## ❓ FAQ <a name="faq"></a>

-Why use linters?

- The use of linters helps to diagnose and fix technical issues, also linters can help teams achieve a more readable and consistent style, through the enforcement of its rules.

-Why use modular programming?

- Modular programming usually makes your code easier to read because it means separating it into functions that each only deal with one aspect of the overall functionality.

-Why use OOP?

- With this type of programming, a program comprises objects that can interact with the user, other objects, or other programs. This makes programs more efficient and easier to understand.

## 📝 License <a name="license"></a>

This project is [MIT](https://github.com/codedit334/Todo_List_Webpack/blob/main/LICENSE) licensed.
(Check the LICENSE file)

ToDo_List_Webpack

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README