VueJS Exercises

This repository includes several small Vue.js projects that I built during my early journey of learning frontend development. The goal of these exercises is to practice the fundamentals of Vue.js and demonstrate basic interactivity and logic implementation using Vue’s reactivity system.

I'm 21 years old and just getting started with Vue.js and web development in general — these are some of my first hands-on projects. I hope they help show both where I started and how I’m growing!

---

📁 Project Structure

VueJS-exercises/
├── assets/
├── projects/
│   ├── Calculator/
│   ├── ThemeSwitcher/
│   ├── GradeAverageCalc/
│   ├── TodoList/
│   └── UserManager/
├── vue.js
└── README.md

---

🔹 1. Calculator

A basic calculator built with Vue.js that supports:

• Addition, subtraction, multiplication, division
• Percentage
• Clear and delete functionality

📄 File: Calculator/index.html

---

🔹 2. Theme Swithcer

A simple Vue.js project to toggle between Light Mode and Dark Mode using class binding.

📄 File: ThemeSwitcher/index.html

---

🔹 3. Grade Average Calculator

This app lets you enter course names and grades, and automatically calculates your GPA (average). Uses Vue.js computed properties and dynamic table updates.

📄 File: GradeAverageCalc/index.html

---

🔹 4. Todo List

A simple task manager:

• Add new tasks
• Mark them complete
• Edit and delete them

Built entirely in Vue.js with some Bootstrap styling.

📄 File: TodoList/index.html

---

🔹 5. User Manager (with PHP)

A basic user management system that combines:

• PHP backend (add/edit/delete users, database connection)
• Vue.js frontend interactivity

✅ Features:

• Add/edit/delete users
• Change user status
• Dynamically update user list using Vue reactivity

📁 Folder: UserManager/

⚠️ You need a local server (like XAMPP) and a MySQL database to run this part.

---

🛠 Requirements

For the standalone .html projects:

• No installation needed — just open the file in a browser!

For the User Manager:

• PHP 7+
• MySQL database
• Apache server or similar (use XAMPP for local setup)

---

🚀 How to Run

1. For Vue.js projects:

   • Download the repo
   • Open each .html file in your browser

2. For the user project:

   • Set up a local server (XAMPP or WAMP)
   • Import the user database schema (you may need to write your own CREATE TABLE)
   • Place UserManager/ in the htdocs folder
   • Access it via http://localhost/UserManager/index.php

---

📚 What I Learned

• Vue.js data binding, directives, computed properties
• Event handling (@click, @keyup.enter, etc.)
• Class/style binding and conditional rendering
• Managing arrays and objects reactively
• Combining PHP backend with Vue frontend
• Bootstrap integration for styling

---

🧠 Future Improvements

• Use Vue CLI for better modularization
• Add Vue Router and Vuex for larger projects
• Convert the user project to a full SPA with Axios for API calls

---

🤝 Feedback

I'm still learning and improving. Any feedback is welcome — feel free to open an issue or contact me!

---

Thanks for checking out my Vue.js playground! 🚀