Project Name

Testing To Do list: part 1

Built With

• CSS, HTML, ES6
• Webpack
• Technologies use- Git, npm

About

In this part of the testing project, we will test functions responsible for the status and content updates. we will also test the order re-position of items in the list upon drag/drop actions.

Live Demo

Live Demo

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

Getting Started

WebPack

First let's create a directory, initialize npm, install webpack locally, and install the webpack-cli

1. npm init -y
2. npm install webpack webpack-cli --save-dev

Loading CSS

1. npm install --save-dev style-loader css-loader

Loading Data

1. npm install --save-dev csv-loader xml-loader

HtmlWebpackPlugin

1. npm install --save-dev html-webpack-plugin

Using webpack-dev-server

1. npm install --save-dev webpack-dev-server
2. npm install --save-dev express webpack-dev-middleware

Set-up GitHub Actions

1. create a .github/workflows folder and add a copy of .github/workflows/linters.yml (https://github.com/microverseinc/linters-config/blob/master/html-css/.github/workflows/linters.yml) to that folder.

Setup & Install

Set-up linters in your local env

Webhint

1. you need to initialize npm to create package.json file. npm init -y
2. Run npm install --save-dev hint@7.x
3. Copy .hintrc (https://github.com/microverseinc/linters-config/blob/master/html-css/.hintrc) to the root directory of your project.

Stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

1. Run npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
2. Copy .stylelintrc.json (https://github.com/microverseinc/linters-config/blob/master/html-css/.stylelintrc.json) to the root directory of your project.

ESLint

1. Run npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
2. Copy .eslintrc.json(https://github.com/microverseinc/linters-config/blob/master/html-css-js/.eslintrc.json) to the root directory of your project.

Run tests

1. Run npx hint . to Fix Web validation errors.
2. Run npx eslint . --fix on the root of your directory of your project to Fix linter errors.
3. Run npx stylelint "**/*.{css,scss}" . --fix on the root of your directory of your project to Fix linter errors.
4. Run npm test. to run tests.

Authors

1. Ssekweyama Pius

• GitHub: @githubhandle
• Twitter: @twitterhandle
• LinkedIn: LinkedIn

🤝 Contributing

1. Bright Kportiklah

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

• Big thanks to Microverse and all the student teams that contributed in any form

📝 License

This project is MIT licensed.