🔧 MicroUI Basic Examples

// Select elements using CSS selectors
const element = MicroUI.$('#demo-element');
const buttons = MicroUI.$$('.demo-btn');

// Change text content
MicroUI.html(element, 'New content!');

// Add CSS classes
MicroUI.addClass(element, 'highlight');

// Toggle classes
MicroUI.toggleClass(element, 'success');

// Simple event listener
MicroUI.on('click', '.event-btn', function() {
    alert('Button clicked!');
});

// Event with element interaction
MicroUI.on('mouseover', '.hover-demo', function(e) {
    this.textContent = 'Hovering!';
});

MicroUI.on('mouseout', '.hover-demo', function(e) {
    this.textContent = 'Hover over me';
});

// Fade in animation
MicroUI.fadeIn(element, 500);

// Fade out animation
MicroUI.fadeOut(element, 500);

// Slide down effect
MicroUI.slideDown(element, 300);

// Chain animations with callbacks
MicroUI.fadeOut(element, 200, function() {
    MicroUI.html(this, 'Content changed!');
    MicroUI.fadeIn(this, 200);
});

// Simple GET request
MicroUI.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(function(data) {
        console.log('Received:', data);
    })
    .catch(function(error) {
        console.error('Error:', error);
    });

// POST request with data
MicroUI.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'MicroUI Test',
    body: 'This is a test post'
}).then(function(data) {
    console.log('Created:', data);
});