Skip to content

Commit 0e7fb88

Browse files
AdarshTiwari04AdarshTiwari04
committed
Practice_5
1 parent cbe7a66 commit 0e7fb88

File tree

7 files changed

+421
-28
lines changed

7 files changed

+421
-28
lines changed

‎Concept_Practicing/Asynchronous_Programming.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const orderSoup = () => console.log(" Soup is Ready ");
2+
3+
console.log(" You start the convo with your girlfriend 👧"); // Here, This line of code runs first !!
4+
setTimeout(() => orderSoup(), 2000); // 1000 ms is 1s in real world. // And Finally this line of code runs!!
5+
console.log(" Still speaking "); //Then, This line of code runs in Second !!
6+
7+
// Here It is shown that you can start a request before and your response is ready at some point of time Later.

‎Concept_Practicing/Promise_Practice.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
//? Rules for using the async / await
2+
3+
//? 1. You must create a function to use async functions
4+
//? 2. You must use the word "async" to use async functions
5+
//? 3. You must use the word "await" for all the promises
6+
7+
const promise = new Promise((resolve, reject) => {
8+
setTimeout(() => {
9+
isReady = [true, false][Math.floor(Math.random() * 2)];
10+
isReady
11+
? resolve(" The Soup is Ready !! ")
12+
: reject(" No Soup Today !! ");
13+
}, 2000);
14+
});
15+
16+
//! Old Way of writing promises or api calls with .then() method.
17+
18+
// // console.log(promise); // it only shows Promise {} but to get the data inside the promise you have to use .then() instead.
19+
// promise.then((data) => console.log(data)).catch((err) => console.log(err));
20+
21+
// // Here we have to use both .then() and .catch() because otherwise the promise will only get the resovle data and not the reject data if something gets wrong.
22+
23+
//$ New ES6 way of writing promises or api calls with async and await methods
24+
25+
// const fetchData = async () => {
26+
// try {
27+
// // const url = "https://jsonplaceholder.typicode.com/users/1";
28+
// const response = await promise; // or await fetch(url)
29+
// console.log(response);
30+
// } catch (err) {
31+
// console.log(err);
32+
// }
33+
// };
34+
35+
// fetchData(); // calling the function to fetch data.
36+
37+
//@ Advanced or Different way of writing async and await methods
38+
39+
//@ Note: In this code, we are using async/await to handle promises. It makes the code cleaner and easier to read. But keep in mind that async/await can only be used in async functions, not regular functions.
40+
41+
// async function fetchData() {
42+
// try {
43+
// const response = await promise; // or await fetch(url)
44+
// console.log(response);
45+
// } catch (err) {
46+
// console.log(err);
47+
// }
48+
// }
49+
50+
// fetchData(); // calling the function to fetch data.
51+
52+
//! How to get data from a async function
53+
54+
let data = {
55+
rating: undefined,
56+
tip: undefined,
57+
pay: undefined,
58+
review: undefined,
59+
};
60+
61+
const fetchData = async () => {
62+
try {
63+
const response = await promise;
64+
console.log(response);
65+
data.rating = 5;
66+
data.tip = 0.2;
67+
data.pay = 10;
68+
data.review = 5;
69+
return data; // return the data after setting it in the object.
70+
} catch (err) {
71+
console.log(err);
72+
data.rating = 1;
73+
data.tip = 0;
74+
data.pay = 0;
75+
data.review = 1;
76+
return data; // return the data after setting it in the object.
77+
}
78+
};
79+
80+
// Here, fetchData() function is a promise and you can only retrieve data from a promise using two methods : 1. .then() and 2.Async/await() function .
81+
// You cannot console.log fetchData() directly thinking it as a normal function and cannot use await because to use await , you have to first have a async function outside.
82+
83+
// fetchData().then((value) => console.log(value)); // calling the function to fetch data.
84+
85+
const display = async () => {
86+
const data = await fetchData();
87+
console.log(data);
88+
};
89+
90+
display(); // calling the function to fetch data and display it.

‎Weather_App/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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+
<title>Weather App</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
10+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
11+
crossorigin="anonymous"
12+
/>
13+
<link rel="stylesheet" type="text/css" href="style.css" />
14+
<script src="script.js"></script>
15+
</head>
16+
<body class="text-center">
17+
<main>
18+
<h1 class="banner p-3">Weather</h1>
19+
<div class="form-group">
20+
<input
21+
id="city-input"
22+
class="form-control form-control-lg"
23+
type="text"
24+
placeholder="Search city"
25+
/>
26+
</div>
27+
<button type="button" onclick="searchCity()" class="btn btn-lg btn-dark">
28+
Search
29+
</button>
30+
<div id="weather-output" class="mt-3">
31+
<div class="card-deck mb-3 text-center">
32+
<div class="card mb-4 shadow-sm">
33+
<div class="card-header">
34+
<h4 id="city-name" class="my-0 font-weight-normal">----</h4>
35+
</div>
36+
<div class="card-body">
37+
<h1 id="weather-type" class="card-title">----</h1>
38+
<ul class="list-unstyled mt-3 mb-4">
39+
<li>Temp: <span id="temp">--</span>°</li>
40+
<li>Min Temp: <span id="min-temp">--</span>°</li>
41+
<li>Max Temp: <span id="max-temp">--</span>°</li>
42+
</ul>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</main>
48+
</body>
49+
</html>

‎Weather_App/script.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// * Weather App
2+
// * TODO: Complete getWeatherData() to return json response Promise
3+
// * TODO: Complete searchCity() to get user input and get data using getWeatherData()
4+
// * TODO: Complete showWeatherData() to set the data in the the html file from response
5+
6+
/**
7+
* Retrieve weather data from openweathermap
8+
* HINT: Use fetch()
9+
* HINT: URL should look like this:
10+
* https://api.openweathermap.org/data/2.5/weather?q=detroit&appid=a8e71c9932b20c4ceb0aed183e6a83bb&units=imperial
11+
*/
12+
13+
getWeatherData = async (city) => {
14+
const url = `https://open-weather13.p.rapidapi.com/city/${city}/EN`;
15+
const options = {
16+
method: "GET",
17+
headers: {
18+
"x-rapidapi-key": "491f34b095msh708f1a2b5352c05p122af4jsna8ef901ffe0e",
19+
"x-rapidapi-host": "open-weather13.p.rapidapi.com",
20+
},
21+
};
22+
23+
try {
24+
const response = await fetch(url, options);
25+
const data = await response.json();
26+
return data;
27+
} catch (error) {
28+
console.error("Error fetching weather data:", error);
29+
return error;
30+
}
31+
};
32+
33+
//* Retrieve city input and get the weather data
34+
//* HINT: Use the promise returned from getWeatherData()
35+
36+
searchCity = async () => {
37+
const city = document.getElementById("city-input").value;
38+
try {
39+
const data = await getWeatherData(city);
40+
console.log(data);
41+
showWeatherData(data);
42+
} catch (error) {
43+
console.error("Error fetching the weather data", error);
44+
}
45+
};
46+
47+
//* Show the weather data in HTML
48+
//* HINT: make sure to console log the weatherData to see how the data looks like
49+
50+
showWeatherData = (weatherData) => {
51+
document.getElementById("city-name").innerText = weatherData.name;
52+
document.getElementById("weather-type").innerText =
53+
weatherData.weather[0].main;
54+
document.getElementById("temp").innerText = weatherData.main.temp;
55+
document.getElementById("min-temp").innerText = weatherData.main.temp_min;
56+
document.getElementById("max-temp").innerText = weatherData.main.temp_max;
57+
};

‎Weather_App/style.css

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#city-input,
2+
#weather-output {
3+
max-width: 400px;
4+
margin: 0 auto;
5+
}
6+
7+
.banner {
8+
color: #ffd23f;
9+
font-family: sans-serif;
10+
}

‎projects/weather-app/exercise/index.html

+42-28
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,49 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
46
<title>Weather App</title>
5-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
6-
<link rel="stylesheet" type="text/css" href="style.css">
7+
<link
8+
rel="stylesheet"
9+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
10+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
11+
crossorigin="anonymous"
12+
/>
13+
<link rel="stylesheet" type="text/css" href="style.css" />
714
<script src="script.js"></script>
8-
</head>
9-
<body class="text-center">
15+
</head>
16+
<body class="text-center">
1017
<main>
11-
<h1 class="banner p-3">Weather</h1>
12-
<div class="form-group">
13-
<input id="city-input" class="form-control form-control-lg" type="text" placeholder="Search city">
14-
</div>
15-
<button type="button" onclick="searchCity()" class="btn btn-lg btn-dark">Search</button>
16-
<div id="weather-output" class="mt-3">
17-
<div class="card-deck mb-3 text-center">
18-
<div class="card mb-4 shadow-sm">
19-
<div class="card-header">
20-
<h4 id="city-name" class="my-0 font-weight-normal">----</h4>
21-
</div>
22-
<div class="card-body">
23-
<h1 id="weather-type" class="card-title">----</h1>
24-
<ul class="list-unstyled mt-3 mb-4">
25-
<li>Temp: <span id="temp">--</span>°</li>
26-
<li>Min Temp: <span id="min-temp">--</span>°</li>
27-
<li>Max Temp: <span id="max-temp">--</span>°</li>
28-
</ul>
29-
</div>
30-
</div>
18+
<h1 class="banner p-3">Weather</h1>
19+
<div class="form-group">
20+
<input
21+
id="city-input"
22+
class="form-control form-control-lg"
23+
type="text"
24+
placeholder="Search city"
25+
/>
26+
</div>
27+
<button type="button" onclick="searchCity()" class="btn btn-lg btn-dark">
28+
Search
29+
</button>
30+
<div id="weather-output" class="mt-3">
31+
<div class="card-deck mb-3 text-center">
32+
<div class="card mb-4 shadow-sm">
33+
<div class="card-header">
34+
<h4 id="city-name" class="my-0 font-weight-normal">----</h4>
35+
</div>
36+
<div class="card-body">
37+
<h1 id="weather-type" class="card-title">----</h1>
38+
<ul class="list-unstyled mt-3 mb-4">
39+
<li>Temp: <span id="temp">--</span>°</li>
40+
<li>Min Temp: <span id="min-temp">--</span>°</li>
41+
<li>Max Temp: <span id="max-temp">--</span>°</li>
42+
</ul>
43+
</div>
3144
</div>
3245
</div>
46+
</div>
3347
</main>
34-
</body>
35-
</html>
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)