World Flags

4 years ago

K2ouMais

Inspired by the shared code from "amacsmith" (Laravel Artisan Commands) decided to share a bit of code, too.

I just got a list of countries from an API and send it to a view.

In the view I just show the country flag and country name.

Controller:

use Illuminate\Support\Facades\Http;

$response = Http::get('https://restcountries.eu/rest/v2/all');

$collection = collect($response->json())->pluck('name', 'alpha2Code');

$countries = $collection->toArray();

return view('__tinker__::tinker', ['countries' => $countries]);

View:

<html class="h-full">
    <body class="h-full">
      <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
      <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.6/css/flag-icon.min.css" rel="stylesheet">
      <div class="h-full w-full overflow-scroll">
   		<div class="flex justify-center">
  			<h1 class="text-3xl">World Flags</h1>
  		</div>
  		<div class="flex flex-wrap justify-center">
          @foreach($countries as $countryIsoCode => $countryName)
            <div class="max-w-sm w-1/4 bg-white m-4 rounded shadow-lg flex-col flex overflow-hidden  items-center">
                <div class="px-6 py-4 flex-1 flag-icon flag-icon-{{ strtolower($countryIsoCode) }}"></div>
                <div>
                    <div class="text-2xl mb-2 mt-4 flex-1">{{ $countryName }}</div>
                </div>
            </div>        
          @endforeach
		</div>
      </div>
    </body>
</html>
New course: Desktop apps with Electron
Learn more