Skip to content

Commit

Permalink
Added another region into the region list
Browse files Browse the repository at this point in the history
- 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
i-Bex authored and i-Bex committed May 5, 2024
1 parent 394ad75 commit 92514bf
Showing 2 changed files with 39 additions and 15 deletions.
25 changes: 15 additions & 10 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
29 changes: 24 additions & 5 deletions style.css
Original file line number Diff line number Diff line change
@@ -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 {

0 comments on commit 92514bf

Please sign in to comment.