🚀 SQL Query Pro - Janith Deshan

Your interactive, client-side SQL playground for learning and exploration!

---

✨ Overview

Welcome to the SQL Query Pro Playground! This project is a responsive and visually appealing web application designed to help you practice and understand SQL queries directly in your browser. With pre-loaded datasets and a user-friendly interface, you can write and execute SQL statements to see instant results, explore database schemas, and get quick query tips.

It's built with a focus on modern frontend technologies, ensuring a smooth and engaging user experience.

(Imagine a GIF here showing the playground in action - writing a query, hitting run, and seeing results. You'll need to create one if you want it to be perfectly aligned with your UI!)

---

🌟 Features

• Interactive SQL Editor: Write and execute SQL queries directly in the browser.
• Pre-loaded Datasets: Explore Employees, Rooms, Meetings, and EmployeesMeetings tables with sample data.
• Real-time Results: See query outputs beautifully rendered in an HTML table.
• Database Schema Details: A dedicated panel providing a clear overview of table structures, columns, types, and relationships (PK/FK).
• Helpful Query Tips: Quick reminders and examples for common SQL operations.
• Responsive Design: Optimized for seamless use on desktops, tablets, and mobile devices.
• Modern UI/UX: Engaging aesthetics with Google Fonts, Font Awesome icons, and subtle AOS animations.
• Background Overlay Animation: A unique, subtle animated background to enhance visual appeal.
• Client-side Processing: Powered by AlaSQL for instant feedback without server interaction.

---

💻 Technologies Used

• HTML5: Structure of the web page.
• CSS3 (TailwindCSS): Modern utility-first CSS framework for rapid styling.
• JavaScript: Core logic and interactivity.
• AlaSQL: Client-side in-browser SQL database engine for data management and query execution.
• Font Awesome: Extensive library of vector icons.
• Google Fonts: Inter (for general text) and Fira Code (for code snippets).
• AOS (Animate On Scroll): Library for scroll-reveal animations.

---

🛠️ How to Run Locally

1. Clone the repository:

   git clone https://github.com/janiyax35/SQL-Query-Pro-Playground.git

2. Navigate to the project directory:

   cd SQL-Query-Pro-Playground

3. Open index.html: Simply open the index.html file in your preferred web browser. No complex setup or server required!

---

📊 Database Schema Details

Here's a quick look at the tables and their columns available in the playground:

Employees Table

• Description: Stores information about employees.
• Columns:
  • EmployeeID (INT, PK): Unique identifier for the employee.
  • FirstName (VARCHAR(10)): Employee's first name.
  • LastName (VARCHAR(10)): Employee's last name.
  • Place (VARCHAR(15)): City or place of the employee.
  • Country (VARCHAR(15)): Country of the employee.
  • PhoneNo (CHAR(10)): Employee's phone number.

Rooms Table

• Description: Stores details about meeting rooms.
• Columns:
  • RoomID (INT, PK): Unique identifier for the room.
  • RoomName (VARCHAR(20)): Name of the room (e.g., 'Training Room').
  • Capacity (INT): Maximum capacity of the room.

Meetings Table

• Description: Contains information about scheduled meetings.
• Columns:
  • MeetingID (INT, PK): Unique identifier for the meeting.
  • TimeFrom (TIME): Start time of the meeting.
  • TimeTo (TIME): End time of the meeting.
  • RoomID (INT, FK to Rooms(RoomID)): Foreign key linking to the Rooms table.
  • MeetingTitle (VARCHAR(30)): Title or subject of the meeting.
  • MeetingDate (DATE): Date of the meeting.

EmployeesMeetings Table

• Description: Junction table linking employees to meetings (many-to-many relationship).
• Columns:
  • EmployeeID (INT, PK, FK to Employees(EmployeeID)): Foreign key linking to the Employees table.
  • MeetingID (INT, PK, FK to Meetings(MeetingID)): Foreign key linking to the Meetings table.

---

💡 Query Tips

• Use SELECT * to retrieve all columns from a table.
• Filter rows with the WHERE clause (e.g., SELECT * FROM Employees WHERE Country = 'India';).
• Combine data from multiple tables using JOIN statements.
• Order your results with ORDER BY (e.g., ORDER BY FirstName DESC;).
• Aggregate data using functions like COUNT(), SUM(), AVG(), MIN(), MAX() with GROUP BY.
• AlaSQL is generally case-sensitive for table and column names, match the schema exactly!

---

👋 Connect with Janith Deshan

Let's connect and build awesome things together!

---

Made with ❤️ by Janith Deshan