Porag's Amazing To-do List

Porag's Amazing To-do List

A very simple yet powerful to-do list built using WEBPACK and served by a WEBPACK DEV SERVER on HTML, CSS, and JS.

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 Porag's Amazing To-do List

This project Amazing To-do List is a project demonstrates the use of HTML & CSS and Javascript Moduler development. Built using WEBPACK and served by WEBPACK DEV SERVER A very simple yet powerful to-do list. Along with dynamic modification of the DOM with Events including all the coding best practices.

🛠 Built With

Tech Stack

Client

• HTML
• CSS
• JS

• webpack

• WEBPACK BASICS HIGHLIGHTS

Server

• Local webpack dev server
• Optionally can be Deployed Using GitHub Pages

Database

• N/A

Key Features

• Adding a new item.
• Removing a selected item.
• Marking a selected item as complete.
• Removing all items marked as complete at once.
• Reordering a selected item (as drag-and-drop) [as an additional feature].

(back to top)

🚀 Live Demo

Please follow the link for a live demo.

• Amazing To-do List

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need:

• Git.
• An IDE (e.g. VS Code)
• Browser to run.

Setup

Clone this repository to your desired folder:

• Using Git Bash or any integrated terminal of you choice.
• Open with code editor (e.g. VS Code).
• Open the index.html file using any local server (e.g. live server extension in VS Code)

Usage

To run the project, execute the following command:

• Open the index.html file on a local server on your browser.

To add dependencies and run linter tests

Follow the following:

---

Initial Step:

---

• mkdir .github/workflows
• copy the linters.yml file to the directory created above.
• touch .gitignore if not created already and add node_modules/ to it.
• initialize npm to create package.json file by running the command:

$ npm i -y

(here i for install & -y for saying yes to all)

---

For Webpack:

---

• To install Webpack and Webpack CLI:

$ npm install webpack webpack-cli --save-dev

• To optaionally install a JS library as an example (e.g. Lodash)

$ npm install --save lodash (optional)

• To install the HtmlWebpackPlugin plugin.

$ npm install --save-dev html-webpack-plugin

• To install style-loader and css-loader

$ npm install --save-dev style-loader css-loader

• To install the webpack-dev-server as a dev dependency (to use live reloading)

$ npm install --save-dev webpack-dev-server

• List of the commands to run the build (with all the alternatives).

To build and run with the webpack dev server:

$ npm start

(Will be served at: http://localhost:8080/)

• To build only :

$ npm run build

(and then may be served using a local server e. g. Live Server in VS Code)

• (Optional Alternatives)

$ npm run webpack or, $ npm run webpack --mode production

$ npx webpack

$ npx webpack --mode production

$ npx webpack --config webpack.config.js

---

For Webhint (optional):

---

• Run

npm install --save-dev hint@7.x

• To fix validation errors run:

npx hint .

---

For Stylelint

---

• Run

npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x

• Copy .stylelintrc.json to the root directory of your project.

• Run

npx stylelint "**/*.{css,scss}" on the root of your directory of your project.

• Fix linter errors.

---

ESLint

---

• Run

npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

• Copy .eslintrc.json to the root directory of your project.

• Run

npx eslint .
on the root of your directory of your project.

• Fix linter errors.

Deployment

You can deploy this project using:

• GitHub Pages for the main branch. A deployed version can be found here: https://...

(back to top)

👥 Author

Developed by:

Author

• GitHub: @porag-m06
• Twitter: @twitterhandle
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• Reordering a selected item (as drag-and-drop) [as an additional feature].
• Improve Aesthetics & Design

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

As a tech enthusiast, your support is always appreciated. If you like this project please do let me know with your support in any way you see fit.

(back to top)

🙏 Acknowledgments

Inspired by the minimalist website: web.archive.org

I would like to thank Microverse for this project & project guidelines.

(back to top)

❓ FAQ

• Can I fork this project?

  • Yes, feel free to fork and knock yourself out :) .

• Can I share this project with others?

  • Yes, you can share this project for any educational purposes.

(back to top)

📝 License

This project is MIT licensed.

(back to top)