**"To-Do List"** is a minimalist website project that helps to organize the tasks of a day, with CURD functionality. It therefore collects and lists tasks to be done, allows marking a task as complete, organizing them by index, update, remove and delete tasks. The site was developed using ES6 and webpack.
This project To Do List demonstrates the development of the minimalist design of a website using Javascript structured in modules, with Webpack and other dependencies, ES6 syntax, HTML and CSS. It employs the use of an array of objects to dynamically populate and manipualte content in the DOM, incorporating best practices.
The project includes designs for two different screen sizes.
- Mobile: up to 768px wide.
- Desktop: 768px or wider.
Brief :
- There are no logo and navigation links.
- There are only 3 rows to begin with, title row, task input row and task marking row.
- It has only one page where CURD is done.
Client
- HTML
- CSS
- JS
- Minimalist design
Server
- Optionally: Deployable Using GitHub Pages
Database
- N/A
- Conversion of a Minimalist web app to HTML/CSS using webpack
- List or Show tasks
- Add or Remove a task
- Mark all completed tasks to indicate completed
- Responsive Web Design: Desktop & Mobile
- Interactivity Using JS
You can access a live demo here
To get a local copy up and running, follow these steps.
In order to run this project you need:
- Git.
- An IDE (e.g. VS Code)
- Browser to run.
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).
- Make sure all dependencies( eg: webpack, webpack dev server, css-loader, sass-loader, bootstrap)
To run the project locally, execute the following command:
- Run the following command;
- npm run server (You should see a success result)
- Now access the app on port 3000 by entering the following in your browser:
- https://localhost:3000
To run tests, run the following command:
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 Webhint (optional):
- Run
npm install --save-dev [email protected]
- To fix validation errors run:
npx hint .
For Stylelint
- Run
npm install --save-dev [email protected] [email protected] [email protected] [email protected]
-
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 [email protected] [email protected] [email protected] [email protected]
-
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.
You can deploy this project using:
- GitHub Pages from a specific branch (e.g. main).
- You can also used any cloud service like gcloud or Azure.
- A deployed version can be found here: https://ometman.github.io/to-do-list/dist
Developed by: Omet Omeni (Ometman)
- GitHub: @ometman
- Twitter: @twitterhandle
- LinkedIn: LinkedIn
- Popup alert on deleting or adding a task
- Changing look and feel of buttons
- Improved Aesthetics & Design
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
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.
I would like to thank especially Microverse for inspiring this project & project guidelines.
-
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.
This project is MIT licensed.