A Vue.js-Powered Task Manager Application

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).
  1. 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


Related Posts

Recent Posts

ഇടുക്കിയിലെ മലയോര മേഖലകളിൽ രാത്രിയാത്ര നിരോധിച്ചു. രാത്രി ഏഴു മുതൽ രാവിലെ ആറു വരെയാണ് നിരോധനം

ഏന്തയാർ ഈസ്റ്റിൽ പ്രളയത്തിൽ തകർന്ന പാലത്തിന് പകരം പുതിയ പാലം നിർമ്മിക്കുവാൻ താത്ക്കാലിക പാലം പൊളിച്ച് നീക്കി

Explore the Investment Opportunities: A Comprehensive Guide to Different Types of Mutual Funds

Title: Understanding Mutual Funds: A Beginner's Guide to Investing

തീവ്രമഴ മുന്നറിയിപ്പിന്റെ പശ്ചാതലത്തിൽ സംസ്ഥാനം ജാഗ്രതയിൽ

250,000 അപേക്ഷകൾ വർദ്ധിച്ചതിനാൽ ട്രാൻസ്‌പോർട്ട് കമ്മീഷണർ പരിശോധന പുനരാരംഭിക്കും

ഏലക്കയിൽ കീടനാശിനി സാന്നിധ്യം; ആറര ലക്ഷത്തിലധികം ടിൻ അരവണ നശിപ്പിക്കാൻ ടെൻഡർ ക്ഷണിച്ച് ദേവസ്വം ബോർഡ്‌

ഭീമൻ പാറക്കഷണങ്ങൾ അടർന്ന് ദേശീയ പാതയിലേക്ക് വീഴുന്നത് പതിവാകുന്നു. കുട്ടിക്കാനത്തിനും മുണ്ടക്കയത്തിനുമിടയിൽ നിലനിൽക്കുന്നത് വൻ അപകട ഭീഷണി

ചക്രവാതച്ചുഴി:അതിശക്തമായ മഴ വരുന്നു

പ്ലസ് വൺ പ്രവേശനം. അക്ഷയയിൽ തിക്കി തിരക്കേണ്ട, നെറ്റിവിറ്റി/ജാതി തെളിയിക്കാൻ പത്താംതരം സർട്ടിഫിക്കറ്റ് മതി