Task-Scheduling

WebApp Features:

Front-end (Vue.js):
  1. Create a Vue.js application with the following components:
    • Task List: Display a list of tasks.
    • Task Creation: Allow users to add new tasks to the list.
    • Task Deletion: Allow users to remove tasks from the list.
    • Task Filtering: Implement filtering options to filter tasks based on completion status (e.g., show only completed tasks or incomplete tasks).
  2. Implement basic data validation on the front-end (e.g., ensure the task title is not empty).

Technologies and Tools Used:

  1. Node.js
  2. Visual Studio Code
  3. Vue Cli
  4. Configurations of:
    • CDN js config file
    • Bootstrap
    • Font Awesome
    • Axios library
    • JSON server for REST-API
    • Postman

How to run the program

  1. Install Visual Studio code
  2. Install Node.js
  3. Install vue.js in Command prompt------ npm install -g @vue/cli
  4. create project-------- vue create
  5. While creating the project do select these settings: * features: Babel, Router, Vuex, Linter * vue.js version: 3.x * history mode: anything * linter config: basic * additional lint features: lint on save * config package: can be anything.. preferred package.json * you can save the preset for future references.
  6. to run the server --------npm run serve
  7. install bootstrap and font awesome files: -------npm install bootstrap @fortawesome/fontawesome-free
  8. install axios: ------ npm install axios
  9. install json server: ------- npm install -g json-server
  10. to run the server: ------- json-server --watch db.json

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Screenshots:

Home Screen  All tasks

addTask

addTask 2

Completed Task

Incompleted Tasks

GitHub

View Github