Skip to content

Commit a86548a

Browse files
HAZberiHAZberi
committed
simple async await
1 parent 35aba21 commit a86548a

File tree

7 files changed

+257
-0
lines changed

7 files changed

+257
-0
lines changed

‎async-await/.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"arrowParens": "avoid"
4+
}

‎async-await/img/img-1.jpg‎

677 KB
Loading

‎async-await/img/img-2.jpg‎

473 KB
Loading

‎async-await/img/img-3.jpg‎

509 KB
Loading

‎async-await/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<script defer src="script.js"></script>
9+
<title>Asynchronous JavaScript</title>
10+
</head>
11+
<body>
12+
<main class="container">
13+
<div class="countries">
14+
<!--
15+
<article class="country">
16+
<img class="country__img" src="" />
17+
<div class="country__data">
18+
<h3 class="country__name">COUNTRY</h3>
19+
<h4 class="country__region">REGION</h4>
20+
<p class="country__row"><span>👫</span>POP people</p>
21+
<p class="country__row"><span>🗣️</span>LANG</p>
22+
<p class="country__row"><span>💰</span>CUR</p>
23+
</div>
24+
</article>
25+
-->
26+
</div>
27+
<button class="btn-country">Where am I?</button>
28+
<div class="images"></div>
29+
</main>
30+
</body>
31+
</html>

‎async-await/script.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
'use strict';
2+
3+
const btn = document.querySelector('.btn-country');
4+
const countriesContainer = document.querySelector('.countries');
5+
6+
const displayCountries = function (data, className = '') {
7+
const html = `
8+
<article class="country ${className}">
9+
<img class="country__img" src="${data.flag}" />
10+
<div class="country__data">
11+
<h3 class="country__name">${data.name}</h3>
12+
<h4 class="country__region">${data.region}</h4>
13+
<p class="country__row"><span>👫</span>${(
14+
data.population / 1000000
15+
).toFixed(2)}M</p>
16+
<p class="country__row"><span>🗣️</span>${data.languages[0].name}</p>
17+
<p class="country__row"><span>💰</span>${
18+
data.currencies[0].name
19+
}</p>
20+
</div>
21+
</article>
22+
`;
23+
countriesContainer.insertAdjacentHTML('beforeend', html);
24+
countriesContainer.style.opacity = 1
25+
};
26+
/*
27+
const handlErr = function (err) {
28+
console.log(err);
29+
return `Something went wrong. ${err.message} Shitt Mannn 😲😲😲`;
30+
};
31+
32+
//Promisifying Geolocation API and plug real-time device coordinates
33+
34+
const getPosition = function () {
35+
return new Promise((resolve, reject) => {
36+
navigator.geolocation.getCurrentPosition(resolve, reject);
37+
});
38+
};
39+
40+
//Plugging real coordinates
41+
42+
const whereAmI = function () {
43+
getPosition()
44+
.then(pos => {
45+
const { latitude, longitude } = pos.coords;
46+
console.log(latitude, longitude);
47+
return fetch(`https://geocode.xyz/${latitude},${longitude}?geoit=json`);
48+
})
49+
.then(response => {
50+
if (!response.ok)
51+
throw new Error(
52+
`Location Data Throttled ${response.status} Please Refresh Again after 5 seconds`
53+
);
54+
return response.json();
55+
})
56+
.then(data => {
57+
console.log(`Your are in ${data.city}, ${data.country}`);
58+
return fetch(`https://restcountries.eu/rest/v2/name/${data.country}`);
59+
})
60+
.then(response => {
61+
if (!response.ok) throw new Error(`Country Not Found ${response.status}`);
62+
return response.json();
63+
})
64+
.then(([data]) => displayCountries(data))
65+
.catch(err =>
66+
countriesContainer.insertAdjacentText('beforeend', handlErr(err))
67+
)
68+
.finally(() => (countriesContainer.style.opacity = 1));
69+
};
70+
71+
btn.addEventListener('click', e => whereAmI()); */
72+
73+
//challenge completed but can be made better
74+
75+
const getPosition = function(){
76+
return new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject));
77+
}
78+
79+
const whereAmI = async function () {
80+
//Getting position from a geolocation api
81+
const pos = await getPosition();
82+
const {latitude, longitude} = pos.coords;
83+
//Reverse Geocoding
84+
const resGeo = await fetch(`https://geocode.xyz/${latitude},${longitude}?geoit=json`);
85+
const dataGeo = await resGeo.json();
86+
console.log(dataGeo);
87+
//Getting the country
88+
const res = await fetch(`https://restcountries.eu/rest/v2/name/${dataGeo.country}`);
89+
const [data] = await res.json();
90+
console.log(data.population);
91+
displayCountries(data);
92+
};
93+
btn.addEventListener('click', () => whereAmI());

‎async-await/style.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: inherit;
5+
}
6+
7+
html {
8+
font-size: 62.5%;
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
font-family: system-ui;
14+
color: #555;
15+
background-color: #f7f7f7;
16+
min-height: 100vh;
17+
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
}
22+
23+
.container {
24+
display: flex;
25+
flex-flow: column;
26+
align-items: flex-start;
27+
overflow-x: scroll;
28+
}
29+
30+
.countries {
31+
/* margin-bottom: 8rem; */
32+
display: flex;
33+
font-size: 2rem;
34+
opacity: 0;
35+
transition: opacity 1s;
36+
}
37+
38+
.country {
39+
background-color: #fff;
40+
box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
41+
font-size: 1.8rem;
42+
width: 30rem;
43+
border-radius: 0.7rem;
44+
margin: 0 3rem;
45+
/* overflow: scroll; */
46+
}
47+
48+
.neighbour::before {
49+
content: 'Neighbour country';
50+
width: 100%;
51+
position: absolute;
52+
top: -4rem;
53+
54+
text-align: center;
55+
font-size: 1.8rem;
56+
font-weight: 600;
57+
text-transform: uppercase;
58+
color: #888;
59+
}
60+
61+
.neighbour {
62+
transform: scale(0.8) translateY(1rem);
63+
margin-left: 0;
64+
}
65+
66+
.country__img {
67+
width: 30rem;
68+
height: 17rem;
69+
object-fit: cover;
70+
background-color: #eee;
71+
border-top-left-radius: 0.7rem;
72+
border-top-right-radius: 0.7rem;
73+
}
74+
75+
.country__data {
76+
padding: 2.5rem 3.75rem 3rem 3.75rem;
77+
}
78+
79+
.country__name {
80+
font-size: 2.7rem;
81+
margin-bottom: 0.7rem;
82+
}
83+
84+
.country__region {
85+
font-size: 1.4rem;
86+
margin-bottom: 2.5rem;
87+
text-transform: uppercase;
88+
color: #888;
89+
}
90+
91+
.country__row:not(:last-child) {
92+
margin-bottom: 1rem;
93+
}
94+
95+
.country__row span {
96+
display: inline-block;
97+
margin-right: 2rem;
98+
font-size: 2.4rem;
99+
}
100+
101+
.btn-country {
102+
border: none;
103+
font-size: 2rem;
104+
padding: 2rem 5rem;
105+
border-radius: 0.7rem;
106+
color: white;
107+
background-color: orangered;
108+
cursor: pointer;
109+
align-self: center;
110+
margin-bottom: 5rem;
111+
margin-top: 5rem;
112+
}
113+
114+
.images {
115+
display: flex;
116+
}
117+
118+
.images img {
119+
display: block;
120+
width: 80rem;
121+
margin: 4rem;
122+
}
123+
124+
.images img.parallel {
125+
width: 40rem;
126+
margin: 2rem;
127+
border: 3rem solid white;
128+
box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
129+
}

0 commit comments

Comments
 (0)