<div x-data="{ functionName() { /* logic */ } }">
    <button @click="functionName()">Run Function</button>
</div>

<div x-data="{ showMessage() { alert('Hello from Alpine.js!'); } }">
    <button @click="showMessage()">Click Me</button>
</div>

<div x-data="{ count: 0, increment() { this.count++; } }">
    <p>Count: <span x-text="count"></span></p>
    <button @click="increment()">Increment</button>
</div>

<div x-data="{ greet(name) { alert(`Hello, ${name}!`); } }">
    <button @click="greet('Alice')">Greet Alice</button>
    <button @click="greet('Bob')">Greet Bob</button>
</div>

<div x-data="{ num1: 5, num2: 10, calculateSum() { return this.num1 + this.num2; } }">
    <p>Num1: <span x-text="num1"></span></p>
    <p>Num2: <span x-text="num2"></span></p>
    <p>Sum: <span x-text="calculateSum()"></span></p>
</div>

<div x-data="{ changeColor(color) { $refs.box.style.backgroundColor = color; } }">
    <div x-ref="box" style="width: 100px; height: 100px; background: lightgray;"></div>
    <button @click="changeColor('lightblue')">Blue</button>
    <button @click="changeColor('lightgreen')">Green</button>
</div>

<div x-data="{ users: [], fetchUsers() {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(data => this.users = data);
    } }" x-init="fetchUsers()">
    <ul>
        <template x-for="user in users" :key="user.id">
            <li x-text="user.name"></li>
        </template>
    </ul>
</div>

<div x-data="{ name: '', email: '', submitForm() {
        if (!this.name || !this.email) {
            alert('All fields are required!');
            return;
        }
        alert(`Form submitted:\nName: ${this.name}\nEmail: ${this.email}`);
    } }">
    <label>
        Name: <input type="text" x-model="name">
    </label>
    <label>
        Email: <input type="email" x-model="email">
    </label>
    <button @click="submitForm()">Submit</button>
</div>

<div x-data="{ price: 100, discount: 10, calculateDiscountedPrice() {
        return this.price - (this.price * this.discount / 100);
    } }">
    <p>Original Price: <span x-text="price"></span></p>
    <p>Discount: <span x-text="discount"></span>%</p>
    <p>Price After Discount: <span x-text="calculateDiscountedPrice()"></span></p>
</div>