KinWin.js

// ID selector
kw('#myId')

// Class selector
kw('.myClass')

// Name selector
kw('@inputName')

// Tag selector
kw('=div')
                

// HTML content
kw('#content').html('New content')

// Attributes
kw('#attr-demo')
.attr('title', 'Hello')
.attr({
    'data-type': 'demo',
    'aria-label': 'Example'
})

// Classes
kw('.class-demo')
    .addClass('active')
    .removeClass('inactive')
    .toggleClass('highlight')
                

// Basic event handling
kw('#click-demo').on('click', (e) => {
    e.target.classList.toggle('active');
});

// Event delegation
kw('#list-demo').delegate('click', '.list-item', (e) => {
    // Handle clicks on any .list-item, even new ones
    kw(e.target).toggleClass('selected');
});

// Form events
kw('#event-input').on('input', (e) => {
    kw('#input-value').html(e.target.value);
});
                

// GET request
kw('#get-demo').on('click', async () => {
    const data = await Http.get('https://jsonplaceholder.typicode.com/posts/1');
    kw('#get-result').html(JSON.stringify(data, null, 2));
});

// POST request
kw('#post-demo').on('click', async () => {
    const data = await Http.post('https://jsonplaceholder.typicode.com/posts', {
        title: 'KinWin Demo',
        body: 'This is a test post',
        userId: 1
    });
    kw('#post-result').html(JSON.stringify(data, null, 2));
});

// Form serialization
kw('#demo-form').on('submit', (e) => {
    e.preventDefault();
    const data = kw('#demo-form').serialize();
    kw('#form-result').html(JSON.stringify(data, null, 2));
});

// Form value handling
kw('#demo-input').on('input', (e) => {
    const value = kw('#demo-input').val();
    kw('#input-result').html(`Current value: ${value}`);
});

// Fade animations
kw('#fade-demo').fadeOut(300)  // fade out in 300ms
    .fadeIn(300);              // fade in in 300ms

// Slide animations
kw('#slide-demo').slideIn(500);  // slide in from left

// Chain animations
kw('#chain-demo')
    .fadeOut(300)
    .fadeIn(300)
    .slideIn(500);