LaravelDaily/Laravel-Alpine-Weather-API

//
                <div x-data="weather()"
                     class="p-6 bg-white border-b border-gray-200">
                    <div class="flex items-center">
                        <select x-model="city" @change="getWeather()"
                                class="flex-1 ml-4 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <option value="">-- Select city --</option>
                            @foreach(config('app.cities') as $key => $name)
                                <option value="{{ $key }}">{{ Str::title($key) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <template x-if="loading">
                        <div class="loader bg-white p-5 my-4 rounded-full flex space-x-3 justify-center">
                            <div class="w-5 h-5 bg-red-800 rounded-full animate-bounce"></div>
                            <div class="w-5 h-5 bg-green-800 rounded-full animate-bounce"></div>
                            <div class="w-5 h-5 bg-blue-800 rounded-full animate-bounce"></div>
                        </div>
                    </template>

                    <template x-if="error != ''">
                        <div x-text="error" class="mt-4 text-red-600"></div>
                    </template>

                    <template x-if="!loading">
                        <div class="overflow-hidden overflow-x-auto mt-6 min-w-full align-middle sm:rounded-md">
                            <table class="min-w-full border divide-y divide-gray-200">
                                <thead>
                                <tr>
                                    <template x-for="day in weather.time">
                                        <th class="px-6 py-3 bg-gray-50">
                                        <span class="text-xs font-medium tracking-wider leading-4 text-left text-gray-500 uppercase"
                                              x-text="day"></span>
                                        </th>
                                    </template>
                                </tr>
                                </thead>

                                <tbody class="bg-white divide-y divide-gray-200 divide-solid">
                                <tr class="bg-white">
                                    <template x-for="max in weather.temperature_2m_max">
                                        <td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap">
                                            Max. temp. <span x-text="max"></span>
                                        </td>
                                    </template>
                                </tr>
                                <tr class="bg-white">
                                    <template x-for="min in weather.temperature_2m_min">
                                        <td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap">
                                            Min. temp. <span x-text="min"></span>
                                        </td>
                                    </template>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </template>
                </div>
//
        <script>
            function weather() {
                return {
                    city: '',
                    weather: {},
                    loading: false,
                    error: '',
                    getWeather() {
                        this.error = ''
                        this.weather = {}
                        if (this.city === '') {
                            return;
                        }
                        this.loading = true
                        fetch('/api/weather/' + this.city)
                            .then((res) => res.json())
                            .then((res) => {
                                if (!res.temperature_2m_max) {
                                    this.error = 'Error happened when fetching the API'
                                } else {
                                    this.weather = res
                                }
                                this.loading = false
                            })
                    }
                }
            }
        </script>
//

//
        <script src="//unpkg.com/alpinejs" defer></script>
//