HTML, CSS and JavaScript To Do List Project
- 📖 About the Project
- 💻 Getting Started
- 👥 Authors
- 🔭 Future Features
- 🤝 Contributing
- ⭐️ Show your support
- 🙏 Acknowledgements
- ❓ FAQ
- 📝 License
[To_Do_List] is a simple a simple web page that displays a list of To Do tasks inserted by a user. It is built using webpack and served by a webpack dev server.
- [Webpack]
- [Desktop-Version]
- [Dynamic-Design]
🎥 Video Explanation Coming soon!
🚀 Live Demo Live Demo
Creating your first "To DO List" project
To get a local copy up and running, follow these steps.
In order to run this project you need:
-A Git hub account -Git bash -Node JS -Webpack -Visual Studio Code as your code editor
Clone this repository to your desired folder:
cd my-folder
git clone[(https://github.com/joyapisi/To-Do-List.git)]Since this code is using webpack, run npm start in your terminal to run it instead of using the live server.
webpackis a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
A linter is a tool to help you improve your code. You can learn more about Linters here: (source: (https://www.testim.io/blog/what-is-a-linter-heres-a-definition-and-quick-start-guide/)).
- Fewer errors in production- The use of linters helps to diagnose and fix technical issues such as code smells. As a result, fewer defects make their way to production.
- Achieving a more readable and consistent style, through the enforcement of its rules.
- Having more secure and performant code.
- Having an objective and measurable assessment of code quality.
- Having fewer discussions about code style and aesthetic choices during code reviews.
- Follow the instructions here to set up webpack.
- In the link above, go through these topics in order:
Linters for various programming languages are available for use, e.g. Rubocop for Ruby or ESLint for JavaScript.
There are many ways you can integrate a linter in your workflow:
-text editor plugin -GitHub Actions -GitHub apps
Note: The npm package manager is going to create a node_modules directory to install all of your dependencies. You shouldn't commit that directory. To avoid that, you can create a .gitignore file and add node_modules to it:
node_modules/
Run
npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
This is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.
NOTE: If you are using Windows, make sure you initialize npm to create package.json file.
npm init -y
- Run
how to use npm: (https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
npm install --save-dev hint@7.x - Copy .hintrc to the root directory of your project.
- Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
- If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.
- Run
Copy contents of .eslintrc.json to the root directory of your project
npx hint . - Fix validation errors.
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- Run
npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x not sure how to use npm? Read this.
-
Copy .stylelintrc.json to the root directory of your project.
-
Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.
If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it. 4. Run npx stylelint "*/.{css,scss}" on the root of your directory of your project.
-
Fix linter errors.
-
IMPORTANT NOTE: feel free to research auto-correct options for Stylelint if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!
👤 Joy Phoebe
- GitHub: (https://github.com/joyapisi)
- Twitter: (https://twitter.com/joyapisi)
- LinkedIn: (https://http://www.linkedin.com/in/joy-phoebe-00b80a13a)
- Add more styling (aesthetics)
- Add mobile version
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
If you like this project, kindly leave a comment below and share it with someone who enjoys coding! Coding is all about continuous learning and allowing yourself to be a beginner. Keep going!
I'm thankful to Microverse for providing a study platform which guided me through this project.
-
[Question_1] An easier and quicker way to understand webpack?
- This YouTubevideo will help you understand webpack better and in details
-
[Question_2] Where can I download node JS for installation?
- Node Js can be downloaded here-
This project is MIT licensed.