Build Your First PROJECT
Learn Ayisha.js by building a complete blog step by step. From basics to advanced features, master reactive programming with hands-on practice.
Setup & Basic HTML Structure
Let's start by creating the basic HTML structure for our blog. We'll include Ayisha.js and set up the initial layout.
🎯 Live Demo - Basic Setup
by
📋 Code Example
by
✨ @text directive displays dynamic content and @model creates two-way data binding!
Adding State & Reactivity
Now let's add some interactive elements to our blog. We'll create a visitor counter and a welcome message.
🎯 Live Demo - Interactive Elements
Welcome to !
Visitors:
Current visitor count:
📋 Code Example
Welcome to !
Visitors:
✨ @click directive executes JavaScript when elements are clicked. State updates trigger automatic re-renders!
Creating Dynamic Lists
Let's create a simple blog post list. We'll use the @for directive to iterate over an array of posts.
🎯 Live Demo - Blog Post List
No posts yet. Add your first post above! 📝
📋 Code Example
No posts yet. Add your first post above! 📝
✨ @for creates dynamic lists and @key ensures optimal performance. @if conditionally renders elements!
Conditional Rendering & User Interactions
Let's add more sophisticated interactions. We'll implement post editing and show/hide functionality.
🎯 Live Demo - Interactive Posts
📋 Code Example
✨ @if conditionally shows/hides elements. Complex expressions work perfectly for interactive UIs!
Loading Data from APIs
Let's load real blog posts from JSONPlaceholder API. We'll use the @fetch directive to make HTTP requests.
🎯 Live Demo - API Integration
Posts from JSONPlaceholder API:
Click the button above to load posts from the API! 🚀
📋 Code Example
Posts from JSONPlaceholder API:
User ID: | Post ID:
✨ @fetch:click makes HTTP requests on user interaction. @result stores the response data!
Dynamic User Loading
Let's load user information dynamically based on user selection. We'll combine multiple API calls.
🎯 Live Demo - User Selection
Email:
Website:
Company:
Posts by :
📋 Code Example
Email:
Website:
✨ URL interpolation with {variable} syntax allows dynamic API calls!
Form Validation
Let's add a contact form with validation. We'll use the @validate directive to ensure data quality.
🎯 Live Demo - Contact Form
Validation Status:
Name valid:
Email valid:
Phone valid:
Message valid:
📋 Code Example
✨ @validate provides real-time validation. Check _validate object for validation results!
Search & Filter Functionality
Let's add search functionality to filter blog posts. We'll use JavaScript's array methods within Ayisha.js.
🎯 Live Demo - Search Posts
Found posts matching ""
First load some posts from Step 5 to use the search! 🔍
📋 Code Example
Found posts matching ""
Post ID:
✨ @input triggers on every keystroke. Complex filtering logic works seamlessly!
Comments System
Let's build a comments system for our blog posts. We'll load comments from the API and allow users to add new ones.
🎯 Live Demo - Post Comments
Comments for this post:
by
Add a Comment:
📋 Code Example
Comments for this post:
by
Add a Comment:
✨ Nested API calls and dynamic list manipulation create rich, interactive experiences!
Advanced Features & State Management
Let's wrap up with advanced features: state watching, animations, and a complete blog dashboard.
🎯 Live Demo - Blog Dashboard
Total Posts
Average Likes
Total Visitors
Your Blog Posts:
Debug State:
📋 Code Example
Total Posts
Average Likes
Total Visitors
Likes: |
✨ @watch monitors state changes, @animate adds smooth transitions, and @state helps with debugging!
🎉 Congratulations!
You've completed the Ayisha.js blog tutorial!
You now know how to:
- ✅ Create reactive user interfaces
- ✅ Handle user interactions and events
- ✅ Work with APIs and external data
- ✅ Implement form validation
- ✅ Build dynamic search and filtering
- ✅ Manage complex application state
- ✅ Create engaging user experiences