Skip to content

Idanbarhom #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IdanBarhom wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Idanbarhom #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d266475
rendered all the countries, filter to a specific region and search in…
IdanBarhom Dec 15, 2024
6ac04d2
somthing
IdanBarhom Dec 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
29 changes: 29 additions & 0 deletions CountriesData.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,174 +1,203 @@
[
{
"name": "Åland Islands",
"flag": "https://flagcdn.com/w320/ax.png",
"population": 21225,
"region": "Europe",
"capital": "Mariehamn"
},
{
"name": "Afghanistan",
"flag": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_the_Taliban.svg/320px-Flag_of_the_Taliban.svg.png",
"population": 27657145,
"region": "Asia",
"capital": "Kabul"
},
{
"name": "Albania",
"flag": "https://flagcdn.com/w320/al.png",
"population": 2886026,
"region": "Europe",
"capital": "Tirana"
},
{
"name": "Algeria",
"flag": "https://flagcdn.com/w320/dz.png",
"population": 40400000,
"region": "Africa",
"capital": "Algiers"
},
{
"name": "American Samoa",
"flag": "https://flagcdn.com/w320/as.png",
"population": 57100,
"region": "Oceania",
"capital": "Pago Pago"
},
{
"name": "Andorra",
"flag": "https://flagcdn.com/w320/ad.png",
"population": 78014,
"region": "Europe",
"capital": "Andorra la Vella"
},
{
"name": "Angola",
"flag": "https://flagcdn.com/w320/ao.png",
"population": 25868000,
"region": "Africa",
"capital": "Luanda"
},
{
"name": "Anguilla",
"flag": "https://flagcdn.com/w320/ai.png",
"population": 13452,
"region": "Americas",
"capital": "The Valley"
},
{
"name": "Antarctica",
"flag": "https://flagcdn.com/w320/aq.png",
"population": 1000,
"region": "Polar",
"capital": ""
},
{
"name": "Israel",
"flag": "https://flagcdn.com/w320/il.png",
"population": 8527400,
"region": "Asia",
"capital": "Jerusalem"
},
{
"name": "Italy",
"flag": "https://flagcdn.com/w320/it.png",
"population": 60665551,
"region": "Europe",
"capital": "Rome"
},
{
"name": "Jamaica",
"flag": "https://flagcdn.com/w320/jm.png",
"population": 2723246,
"region": "Americas",
"capital": "Kingston"
},
{
"name": "Japan",
"flag": "https://flagcdn.com/w320/jp.png",
"population": 126960000,
"region": "Asia",
"capital": "Tokyo"
},
{
"name": "Jersey",
"flag": "https://flagcdn.com/w320/je.png",
"population": 100800,
"region": "Europe",
"capital": "Saint Helier"
},
{
"name": "Jordan",
"flag": "https://flagcdn.com/w320/jo.png",
"population": 9531712,
"region": "Asia",
"capital": "Amman"
},
{
"name": "Kazakhstan",
"flag": "https://flagcdn.com/w320/kz.png",
"population": 17753200,
"region": "Asia",
"capital": "Astana"
},
{
"name": "Kenya",
"flag": "https://flagcdn.com/w320/ke.png",
"population": 47251000,
"region": "Africa",
"capital": "Nairobi"
},
{
"name": "Kiribati",
"flag": "https://flagcdn.com/w320/ki.png",
"population": 113400,
"region": "Oceania",
"capital": "South Tarawa"
},
{
"name": "Kuwait",
"flag": "https://flagcdn.com/w320/kw.png",
"population": 4183658,
"region": "Asia",
"capital": "Kuwait City"
},
{
"name": "Kyrgyzstan",
"flag": "https://flagcdn.com/w320/kg.png",
"population": 6047800,
"region": "Asia",
"capital": "Bishkek"
},
{
"name": "Laos",
"flag": "https://flagcdn.com/w320/la.png",
"population": 6492400,
"region": "Asia",
"capital": "Vientiane"
},
{
"name": "Latvia",
"flag": "https://flagcdn.com/w320/lv.png",
"population": 1961600,
"region": "Europe",
"capital": "Riga"
},
{
"name": "Lebanon",
"flag": "https://flagcdn.com/w320/lb.png",
"population": 5988000,
"region": "Asia",
"capital": "Beirut"
},
{
"name": "Lesotho",
"flag": "https://flagcdn.com/w320/ls.png",
"population": 1894194,
"region": "Africa",
"capital": "Maseru"
},
{
"name": "Liberia",
"flag": "https://flagcdn.com/w320/lr.png",
"population": 4615000,
"region": "Africa",
"capital": "Monrovia"
},
{
"name": "Libya",
"flag": "https://flagcdn.com/w320/ly.png",
"population": 6385000,
"region": "Africa",
"capital": "Tripoli"
},
{
"name": "Liechtenstein",
"flag": "https://flagcdn.com/w320/li.png",
"population": 37623,
"region": "Europe",
"capital": "Vaduz"
},
{
"name": "Lithuania",
"flag": "https://flagcdn.com/w320/lt.png",
"population": 2872294,
"region": "Europe",
"capital": "Vilnius"
},
{
"name": "Luxembourg",
"flag": "https://flagcdn.com/w320/lu.png",
"population": 576200,
"region": "Europe",
"capital": "Luxembourg"
Expand Down
85 changes: 13 additions & 72 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,24 +61,25 @@ <h1>Where in the world?</h1>
<div class="search-wrapper">
<i class="fa-regular fa-magnifying-glass search-icon"></i>
<input
data-search
type="text"
class="search-input"
placeholder="Search for a country..."
/>
</div>
<div class="dropdown-wrapper">
<div class="dropdown-wrapper" onclick="toggleFilterRegionMenu()">
<div class="dropdown-header flex flex-jc-sb flex-ai-c">
<span>Filter by Region</span>
<i class="fa-regular fa-chevron-down icon"></i>
</div>
<div class="dropdown-body">
<div class="dropdown-body" id="dropdown-body" >
<ul>
<li data-region="all">All</li>
<li data-region="africa">Africa</li>
<li data-region="americas">America</li>
<li data-region="asia">Asia</li>
<li data-region="europe">Europe</li>
<li data-region="oceania">Oceania</li>
<li data-region="all" onclick="filterRegion(this)">All</li>
<li data-region="africa" onclick="filterRegion(this)" >Africa</li>
Copy link
Member

@Tamir198 Tamir198 Dec 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you tell me what this refers to ?

<li data-region="americas" onclick="filterRegion(this)">America</li>
<li data-region="asia" onclick="filterRegion(this)">Asia</li>
<li data-region="europe" onclick="filterRegion(this)">Europe</li>
<li data-region="oceania" onclick="filterRegion(this)">Oceania</li>
</ul>
</div>
</div>
Expand All @@ -87,72 +88,12 @@ <h1>Where in the world?</h1>
<!-- Countries -->
<main class="main">
<div class="container">
<section class="countries-grid">
<a
href="#"
class="country scale-effect"
data-country-name="Afghanistan"
>
<div class="country-flag">
<img
src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_the_Taliban.svg"
alt="Afghanistan FLag"
/>
</div>
<div class="country-info">
<h2 class="country-title">Afghanistan</h2>
<ul class="country-brief">
<li><strong>population: </strong>40218234</li>
<li><strong>Region: </strong>Asia</li>
<li><strong>capital: </strong>Kabul</li>
</ul>
</div>
</a>
<a
href="#"
class="country scale-effect"
data-country-name="Åland Islands"
>
<div class="country-flag">
<img src="https://flagcdn.com/ax.svg" alt="Åland Islands FLag" />
</div>
<div class="country-info">
<h2 class="country-title">Åland Islands</h2>
<ul class="country-brief">
<li><strong>population: </strong>28875</li>
<li><strong>Region: </strong>Europe</li>
<li><strong>capital: </strong>Mariehamn</li>
</ul>
</div>
</a>
<a href="#" class="country scale-effect" data-country-name="Aruba">
<div class="country-flag">
<img src="https://flagcdn.com/aw.svg" alt="Aruba FLag" />
</div>
<div class="country-info">
<h2 class="country-title">Aruba</h2>
<ul class="country-brief">
<li><strong>population: </strong>106766</li>
<li><strong>Region: </strong>Americas</li>
<li><strong>capital: </strong>Oranjestad</li>
</ul>
</div>
</a>
<a href="#" class="country scale-effect" data-country-name="Belize">
<div class="country-flag">
<img src="https://flagcdn.com/bz.svg" alt="Belize FLag" />
</div>
<div class="country-info">
<h2 class="country-title">Belize</h2>
<ul class="country-brief">
<li><strong>population: </strong>397621</li>
<li><strong>Region: </strong>Americas</li>
<li><strong>capital: </strong>Belmopan</li>
</ul>
</div>
</a>
<section id="countries-grid" class="countries-grid">

Copy link
Member

@Tamir198 Tamir198 Dec 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you have both class and id and why both of them are with the same name ?

</section>
</div>
</main>

<script src="index.js"></script>
</body>
</html>
Loading