From 92514bf60a0cab9643c5be9e8735145d7dea8d89 Mon Sep 17 00:00:00 2001
From: i-Bex <i-Bex@users.noreply.github.com>
Date: Mon, 6 May 2024 02:33:52 +0800
Subject: [PATCH] Added another region into the region list

- add another region called all regions to show all the region
- add the container that is going to show all the countries info
- style the region list when it gets a focus
---
 index.html | 25 +++++++++++++++----------
 style.css  | 29 ++++++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 9102b4a..cc9174c 100644
--- a/index.html
+++ b/index.html
@@ -31,38 +31,43 @@ <h1 class="header__app-title">Where in the world?</h1>
             </div>
 
             <div class="country-filter-region" role="combobox" aria-expanded="false" aria-owns="region-options" aria-controls="region-options"> 
-                <button class="country-filter-region__button">
+                <button class="country-filter-region__button" data-state="close" id="filter-by-region-btn">
                     <span class="country-filter-region__button__current-item">Filter by Region</span>
                     <i class="fa-solid fa-angle-down country-filter-region__button__down-icon"></i>
                 </button>
                 <ul id="region-options" role="listbox" tabindex="-1" class="region-list" hidden>
                     <li role="option" aria-selected="false" class="region-list__option">
                         <input type="radio" name="region-name" id="africa" class="region-list__option__radio">
-                        <label for="africa">africa</label>
+                        <label for="africa" class="region-list__option__label">africa</label>
                     </li>
                     <li role="option" aria-selected="false" class="region-list__option">
-                        <input type="radio" name="region-name" id="america" class="region-list__option__radio">
-                        <label for="america">america</label>
+                        <input type="radio" name="region-name" id="americas" class="region-list__option__radio">
+                        <label for="americas" class="region-list__option__label">america</label>
                     </li>
                     <li role="option" aria-selected="false" class="region-list__option">
                         <input type="radio" name="region-name" id="asia" class="region-list__option__radio">
-                        <label for="asia">asia</label>
+                        <label for="asia" class="region-list__option__label">asia</label>
                     </li>
                     <li role="option" aria-selected="false" class="region-list__option">
                         <input type="radio" name="region-name" id="europe" class="region-list__option__radio">
-                        <label for="europe">europe</label>
+                        <label for="europe" class="region-list__option__label">europe</label>
                     </li>
                     <li role="option" aria-selected="false" class="region-list__option">
                         <input type="radio" name="region-name" id="oceania" class="region-list__option__radio">
-                        <label for="oceania">oceania</label>
+                        <label for="oceania" class="region-list__option__label">oceania</label>
+                    </li>
+                    <li role="option" aria-selected="false" class="region-list__option">
+                        <input type="radio" name="region-name" id="all-regions" class="region-list__option__radio" checked>
+                        <label for="all-regions" class="region-list__option__label">all regions</label>
                     </li>
                 </ul>
             </div>
         </header>
 
-        <section>
-
+        <section class="main__countries">
+            <ul class="countries__list" id="country-list-element">
+            </ul> 
         </section>
-    </main>     
+    </main> 
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 4a856ca..a85cad6 100644
--- a/style.css
+++ b/style.css
@@ -145,7 +145,7 @@ body {
 
 .region-list {
     min-width:100%;
-    padding:1rem;
+    padding:1rem 0rem;
     color:var(--Element-text-clr);
     /* display:flex; */
     flex-direction:column;
@@ -160,23 +160,42 @@ body {
 }
 
 .region-list__option {
+    padding:0rem 1rem;
     font-size:0.875rem;
     font-family: var(--Main-font);
     font-weight:600;
     text-transform:capitalize;
+    border:2px dotted transparent;
+}
+
+.region-list__option:has(.region-list__option__radio:checked){
+    color:white;
+    background-color:rgb(41, 101, 221);
+}
+
+.region-list__option:has(.region-list__option__radio:focus-visible){
+    border:2px dotted white;
 }
 
 .region-list__option__radio {
-    -webkit-appearance:none;
-    appearance:none;
+    height:1px;
+    width:1px;
+    border:none;
+    overflow:hidden;
+    opacity:0;
 }
 
-.main__countries {
+/* .main__countries {
+
+} */
+
+.countries__list {
     padding:1rem 3rem;
     display:grid;
     grid-template-columns:1fr;
     grid-template-rows:auto;
-    justify-items:center;    
+    list-style-type:none;
+    gap:2rem;
 }
 
 .countries__info {