thananon · anwam · Jul 15, 2021 · Jul 15, 2021
diff --git a/README.md b/README.md
@@ -53,23 +53,25 @@
   </ol>
 </details>
 
-
-
 <!-- ABOUT THE PROJECT -->
+
 # About The Project
-[![CovidTH][product-screenshot]](https://covidth.info/)
 
+Thailand Covid-19 Daily Tests Dashboard
 
-*** ฝากเติมหน่อยนะครับ ^ ^
+[![CovidTH][product-screenshot]](https://covidth.info/)
+
+\*\*\* ฝากเติมหน่อยนะครับ ^ ^
 
 <!-- GETTING STARTED -->
+
 ## Getting Started
 
 To get a local copy up and running follow these simple steps.
 
 ### Prerequisites
 
-* Node.js
+- Node.js
 
 ### Installation
 
@@ -94,7 +96,9 @@ Use this space to show useful examples of how a project can be used. Additional
 _For more examples, please refer to the [Documentation](https://example.com)_ -->
 
 ## Built With
+
 ### Svelte + Vite
+
 This template should help get you started developing with Svelte in Vite.
 
 ### Recommended IDE Setup
@@ -146,8 +150,8 @@ export default writable(0)
 
 See the [open issues](https://github.com/thananon/covidth/issues) for a list of proposed features (and known issues).
 
-
 <!-- CONTRIBUTING -->
+
 ## Contributing
 
 Contributions are what make the Website Covid data, inspire, and create. Any contributions you make are **greatly appreciated**.
@@ -164,21 +168,22 @@ Contributions are what make the Website Covid data, inspire, and create. Any con
 Distributed under the MIT License. See `LICENSE` for more information. -->
 <!-- ROADMAP -->
 
-
 <!-- CONTACT -->
+
 ## CONTACT
+
 Name - [@9ARM](https://www.youtube.com/channel/UCoiEtD4v1qMAqHV5MDI5Qpg) - Youtube
 
 Project Link: [https://github.com/thananon/covidth](https://github.com/thananon/covidth)
 
 <!-- ACKNOWLEDGEMENTS -->
-## Acknowledgements
 
-* [Svelte](https://svelte.dev/)
-* [vite](https://vitejs.dev/)
-* [chart.js](https://www.chartjs.org/)
-* [SvelteStrap](https://sveltestrap.js.org/)
+## Acknowledgements
 
+- [Svelte](https://svelte.dev/)
+- [vite](https://vitejs.dev/)
+- [chart.js](https://www.chartjs.org/)
+- [SvelteStrap](https://sveltestrap.js.org/)
 
 [contributors-shield]: https://img.shields.io/github/contributors/thananon/covidth.svg?style=for-the-badge
 [contributors-url]: https://github.com/thananon/covidth/graphs/contributors

diff --git a/index.html b/index.html
@@ -1,26 +1,36 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="th">
   <head>
     <meta charset="UTF-8" />
     <meta name="thumbnail" content="rattaban_huakuy.jpg" />
-    <meta property="og:image" content="rattaban_huakuy.jpg" />
-    <meta
-      property="og:title"
-      content="covidth - เว็บข้อมูลโควิดแบบกูทำเองก็ได้"
-    />
     <meta
       name="description"
       content="เราจะมี ศบค. ไว้ทำไมถ้ากูต้องหาข้อมูลเอง?"
     />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     <script>
-      const faviconElement = document.querySelector("[rel=icon]");
+      const faviconElement = document.querySelector("[rel=icon]")
       const faviconList = ["favicon.ico", "favicon1.ico", "favicon2.ico"]
-      const favicon = faviconList[Math.floor(Math.random() * faviconList.length)];
-      faviconElement.href = `/${favicon}`;
+      const favicon =
+        faviconList[Math.floor(Math.random() * faviconList.length)]
+      faviconElement.href = `/${favicon}`
     </script>
+
     <title>covidth - ข้อมูลโควิดแบบกูทำเองก็ได้</title>
+
+    <!-- OpenGraph Meta Tags -->
+    <meta
+      property="og:title"
+      content="covidth - เว็บข้อมูลโควิดแบบกูทำเองก็ได้"
+    />
+    <meta property="og:url" content="https://www.covidth.info/" />
+    <meta property="og:image" content="rattaban_huakuy.jpg" />
+    <meta
+      property="og:description"
+      content="เราจะมี ศบค. ไว้ทำไมถ้ากูต้องหาข้อมูลเอง?"
+    />
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.svelte b/src/App.svelte
@@ -4,11 +4,13 @@
   import covtest from "./covtest.json"
   import Cards from "./Cards.svelte"
 
-  Chart.defaults.font.family = '"Anakotmai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif'
+  Chart.defaults.font.family =
+    '"Anakotmai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif'
 
-  let recordNumber = 30
   let myChart
   let selectedList = [false, false, true]
+  let recordNumber = 30
+  const options = [3, 7, 30]
 
   if (screen.width < 768) {
     recordNumber = 3
@@ -84,17 +86,16 @@
     )
   }
 
-  const onSelectChange = () => {
-    let value = document.getElementById("getShowDate").value
+  const onSelectChange = (e) => {
+    const value = e.target.value
     if (recordNumber != value) {
       recordNumber = value
       myChart.destroy()
       loadChart()
-      if(value === '30'){
-        document.getElementById("chartInner").style.minWidth = '750px'
-      }
-      else if(value === '7'){
-        document.getElementById("chartInner").style.minWidth = '500px'
+      if (value === "30") {
+        document.getElementById("chartInner").style.minWidth = "750px"
+      } else if (value === "7") {
+        document.getElementById("chartInner").style.minWidth = "500px"
       }
     }
   }
@@ -110,7 +111,7 @@
 </svelte:head>
 
 <main>
-  <h1>เราตรวจโควิดกันวันละกี่เคส?</h1>
+  <h1 class="site-title">เราตรวจโควิดกันวันละกี่เคส ?</h1>
 
   <Cards />
 
@@ -119,10 +120,21 @@
     <div class="row">
       <div class="col" />
       <div class="col-6 col-md-4">
-        <select id="getShowDate" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example" on:change={() => {onSelectChange()}} >
-          <option id="select3Days" value="3" selected={selectedList[0]} >3 วัน</option >
-          <option id="select7Days" value="7" selected={selectedList[1]} >7 วัน</option >
-          <option id="select30Days" value="30" selected={selectedList[2]} >30 วัน</option >
+        <select
+          id="getShowDate"
+          class="form-select form-select-lg mb-3"
+          aria-label=".form-select-lg example"
+          value={recordNumber}
+          on:change={(e) => onSelectChange(e)}
+          on:blur={(e) => onSelectChange(e)}
+        >
+          {#each options as option}
+            <option id="select3Days" value={option}>
+              <span>
+                {option} วัน
+              </span>
+            </option>
+          {/each}
         </select>
       </div>
       <div class="col" />
@@ -140,14 +152,18 @@
 </main>
 
 <style>
+  .site-title {
+    font-weight: 700;
+  }
+
   #chartWrapper {
     margin: 40px auto;
     width: 90vw;
     overflow-x: scroll;
     /* height: 80vh; */
   }
 
-  #chartInner{
+  #chartInner {
     width: 100%;
   }
 
@@ -206,20 +222,10 @@
     /* max-width: 14rem; */
   }
 
-  p {
-    /* max-width: 14rem; */
-    margin: 1rem auto;
-    line-height: 1.35;
-  }
-
   @media (min-width: 480px) {
     h1 {
       max-width: none;
       font-size: 6vh;
     }
-
-    p {
-      max-width: none;
-    }
   }
 </style>
diff --git a/src/Cards.svelte b/src/Cards.svelte
@@ -1,21 +1,23 @@
 <script>
   import { onMount } from "svelte"
   import dayjs from "dayjs"
-  import locale_th from 'dayjs/locale/th'
+  import locale_th from "dayjs/locale/th"
   import covtest from "./covtest.json"
-  import relativeTime from 'dayjs/plugin/relativeTime'
-  import timezone from 'dayjs/plugin/timezone'
-  import utc from 'dayjs/plugin/utc'
+  import relativeTime from "dayjs/plugin/relativeTime"
+  import timezone from "dayjs/plugin/timezone"
+  import utc from "dayjs/plugin/utc"
 
   dayjs.extend(utc)
   dayjs.extend(timezone)
   dayjs.tz.setDefault("Asia/Bangkok")
   dayjs.extend(relativeTime)
-  dayjs.locale('th')
-  
+  dayjs.locale("th")
+
   const latestTestRecord = covtest.result.records.slice(-1)[0]
   const latestTestRecordDate = dayjs(latestTestRecord.Date)
-  const numberFormatter = new Intl.NumberFormat("en-TH", { maximumFractionDigits: 3 })
+  const numberFormatter = new Intl.NumberFormat("en-TH", {
+    maximumFractionDigits: 3,
+  })
 
   let latestData = {}
   let latestDataDate
@@ -47,13 +49,17 @@
     <div class="card bg-pos">
       <div class="card-body">
         <h5 class="card-title">ตรวจ</h5>
-        <p class="card-text" id="tests">{numberFormatter.format(latestTestRecord.Total)}</p>
+        <p class="card-text" id="tests">
+          {numberFormatter.format(latestTestRecord.Total)}
+        </p>
       </div>
     </div>
     <div class="card bg-death">
       <div class="card-body">
         <h5 class="card-title">ติด</h5>
-        <p class="card-text" id="cases">{numberFormatter.format(latestTestRecord.Pos)}</p>
+        <p class="card-text" id="cases">
+          {numberFormatter.format(latestTestRecord.Pos)}
+        </p>
       </div>
     </div>
   </div>
@@ -72,9 +78,7 @@
       <div class="card-body">
         <h5 class="card-title">อัพเดตล่าสุด</h5>
         <p class="card-text" id="recs">
-          {latestDataDate
-            ? latestTestRecordDate.from(latestDataDate)
-            : "..."}
+          {latestDataDate ? latestTestRecordDate.from(latestDataDate) : "..."}
         </p>
       </div>
     </div>
@@ -98,15 +102,16 @@
     background: rgba(17, 173, 82, 0.85);
     border-radius: 0 0 15px 0;
   }
-  
+
   .card-stat {
     font-family: "Prompt", sans-serif;
     min-width: 60%;
     max-width: 90%;
     margin: 0 auto;
   }
   .card-stat .card-title {
-    font-size: 1em;
+    font-size: 1.25em;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
   }
   .card-stat .card-text {
     font-weight: bolder;