9be0c0b0c77d_01_LatestCovidCases.vue

<template>
  <div class="mt-20 p-6 rounded-lg bg-white mx-auto max-w-sm text-center shadow-md">
    <h1 class="mt-4 text-4xl font-bold">{{ country_rank }}</h1>
    <h2 class="mt-4 text-3xl font-bold">{{ country_name }}</h2>
    <h3 class="mt-4 text-xl text-red-400 font-bold tracking-wide">Total Cases : {{ total_cases }}</h3>
      <table class="mt-4 table w-64 mx-auto" id="cases">
        <tr>
          <td class="text-left font-semibold">New Cases</td>
          <td class="text-right tracking-wide">{{ new_cases }}</td>
        </tr>
        <tr>
          <td class="text-left font-semibold">Total Deaths</td>
          <td class="text-right tracking-wide">{{ new_deaths }}</td>
        </tr>
        <tr>
          <td class="text-left font-semibold">Total Deaths</td>
          <td class="text-right tracking-wide">{{ total_deaths }}</td>
        </tr>
        <tr>
          <td class="text-left font-semibold">Total Recovered</td>
          <td class="text-right tracking-wide">{{ total_recovered }}</td>
        </tr>
      </table>
    <select class="mt-10 w-64 p-1 border-gray-400 border-2 rounded-lg" id="country_select" v-model="country_select">
      <option v-for="(country, key) in countries" :value="country" :key="key">
        {{ country }}
      </option>
    </select>
    <button class="mt-6 px-4 py-2 rounded-lg bg-pink-500 text-white shadow-md font-semibold text-sm inline-block tracking-wider hover:bg-pink-400 focus:bg-pink-600" @click="changeCountry">Change Country</button>
  </div>
</template>