Skip to content

Commit 5fb56b1

Browse files
nilajcodernilajcoder
committed
Fetch API in JS
1 parent efe93c5 commit 5fb56b1

7 files changed

Lines changed: 419 additions & 0 deletions

File tree

‎Fetch API in JS.docx‎

660 KB
Binary file not shown.

‎Fetch-API JS/app.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/*
2+
Fetch API
3+
----------
4+
API- Application Programming Interface
5+
6+
The Fetch API provides an interface for fetching(Sending/receiving)
7+
resources.
8+
It uses Request and Response objects.
9+
The fetch() method is used to fetch a resource(data)
10+
11+
let promise=fetch(url,[option]);
12+
13+
*/
14+
15+
/*
16+
Terms
17+
---------
18+
AJAX is Asynchronous JS & XML
19+
JSON is JavaScript Object Notation
20+
json() method :returns a second promise that resolves with the result of parsing the response body text as JSON.
21+
*/
22+
23+
const URL="https://cat-fact.herokuapp.com/facts";// It is an readymade API URL
24+
const factPara=document.querySelector("#fact");
25+
const btn=document.querySelector("#btn");
26+
27+
const getFacts=async()=>{
28+
console.log("Getting data ...");
29+
let respose=await fetch(URL);
30+
console.log(respose);
31+
console.log(respose.status);//status of the api
32+
let data=await respose.json();//JSON FORMAT
33+
console.log(data);
34+
console.log(data[0].text);
35+
factPara.innerText=data[0].text;
36+
};
37+
//promise chaining
38+
function GetFacts(){
39+
fetch(URL).then((response)=>{
40+
return response.json();
41+
}).then((data)=>{
42+
console.log(data);
43+
factPara.innerText=data[2].text;
44+
});
45+
}
46+
47+
48+
btn.addEventListener("click",getFacts);
49+
btn.addEventListener("click",GetFacts);
50+
51+
52+
/*
53+
54+
HTTP Verbs :Hyper Text Transfer Protocol
55+
Response Status Code
56+
*/

‎Fetch-API JS/app1.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
const BASE_URL =
2+
"https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies";
3+
4+
const dropdowns = document.querySelectorAll(".dropdown select");
5+
const btn = document.querySelector("form button");
6+
const fromCurr = document.querySelector(".from select");
7+
const toCurr = document.querySelector(".to select");
8+
const msg = document.querySelector(".msg");
9+
10+
for (let select of dropdowns) {
11+
for (currCode in countryList) {
12+
let newOption = document.createElement("option");
13+
newOption.innerText = currCode;
14+
newOption.value = currCode;
15+
if (select.name === "from" && currCode === "USD") {
16+
newOption.selected = "selected";
17+
} else if (select.name === "to" && currCode === "INR") {
18+
newOption.selected = "selected";
19+
}
20+
select.append(newOption);
21+
}
22+
23+
select.addEventListener("change", (evt) => {
24+
updateFlag(evt.target);
25+
});
26+
}
27+
28+
const updateExchangeRate = async () => {
29+
let amount = document.querySelector(".amount input");
30+
let amtVal = amount.value;
31+
if (amtVal === "" || amtVal < 1) {
32+
amtVal = 1;
33+
amount.value = "1";
34+
}
35+
const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`;
36+
let response = await fetch(URL);
37+
let data = await response.json();
38+
let rate = data[toCurr.value.toLowerCase()];
39+
40+
let finalAmount = amtVal * rate;
41+
msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
42+
};
43+
44+
const updateFlag = (element) => {
45+
let currCode = element.value;
46+
let countryCode = countryList[currCode];
47+
let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`;
48+
let img = element.parentElement.querySelector("img");
49+
img.src = newSrc;
50+
};
51+
52+
btn.addEventListener("click", (evt) => {
53+
evt.preventDefault();
54+
updateExchangeRate();
55+
});
56+
57+
window.addEventListener("load", () => {
58+
updateExchangeRate();
59+
});

‎Fetch-API JS/codes.js‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
const countryList = {
2+
AED: "AE",
3+
AFN: "AF",
4+
XCD: "AG",
5+
ALL: "AL",
6+
AMD: "AM",
7+
ANG: "AN",
8+
AOA: "AO",
9+
AQD: "AQ",
10+
ARS: "AR",
11+
AUD: "AU",
12+
AZN: "AZ",
13+
BAM: "BA",
14+
BBD: "BB",
15+
BDT: "BD",
16+
XOF: "BE",
17+
BGN: "BG",
18+
BHD: "BH",
19+
BIF: "BI",
20+
BMD: "BM",
21+
BND: "BN",
22+
BOB: "BO",
23+
BRL: "BR",
24+
BSD: "BS",
25+
NOK: "BV",
26+
BWP: "BW",
27+
BYR: "BY",
28+
BZD: "BZ",
29+
CAD: "CA",
30+
CDF: "CD",
31+
XAF: "CF",
32+
CHF: "CH",
33+
CLP: "CL",
34+
CNY: "CN",
35+
COP: "CO",
36+
CRC: "CR",
37+
CUP: "CU",
38+
CVE: "CV",
39+
CYP: "CY",
40+
CZK: "CZ",
41+
DJF: "DJ",
42+
DKK: "DK",
43+
DOP: "DO",
44+
DZD: "DZ",
45+
ECS: "EC",
46+
EEK: "EE",
47+
EGP: "EG",
48+
ETB: "ET",
49+
EUR: "FR",
50+
FJD: "FJ",
51+
FKP: "FK",
52+
GBP: "GB",
53+
GEL: "GE",
54+
GGP: "GG",
55+
GHS: "GH",
56+
GIP: "GI",
57+
GMD: "GM",
58+
GNF: "GN",
59+
GTQ: "GT",
60+
GYD: "GY",
61+
HKD: "HK",
62+
HNL: "HN",
63+
HRK: "HR",
64+
HTG: "HT",
65+
HUF: "HU",
66+
IDR: "ID",
67+
ILS: "IL",
68+
INR: "IN",
69+
IQD: "IQ",
70+
IRR: "IR",
71+
ISK: "IS",
72+
JMD: "JM",
73+
JOD: "JO",
74+
JPY: "JP",
75+
KES: "KE",
76+
KGS: "KG",
77+
KHR: "KH",
78+
KMF: "KM",
79+
KPW: "KP",
80+
KRW: "KR",
81+
KWD: "KW",
82+
KYD: "KY",
83+
KZT: "KZ",
84+
LAK: "LA",
85+
LBP: "LB",
86+
LKR: "LK",
87+
LRD: "LR",
88+
LSL: "LS",
89+
LTL: "LT",
90+
LVL: "LV",
91+
LYD: "LY",
92+
MAD: "MA",
93+
MDL: "MD",
94+
MGA: "MG",
95+
MKD: "MK",
96+
MMK: "MM",
97+
MNT: "MN",
98+
MOP: "MO",
99+
MRO: "MR",
100+
MTL: "MT",
101+
MUR: "MU",
102+
MVR: "MV",
103+
MWK: "MW",
104+
MXN: "MX",
105+
MYR: "MY",
106+
MZN: "MZ",
107+
NAD: "NA",
108+
XPF: "NC",
109+
NGN: "NG",
110+
NIO: "NI",
111+
NPR: "NP",
112+
NZD: "NZ",
113+
OMR: "OM",
114+
PAB: "PA",
115+
PEN: "PE",
116+
PGK: "PG",
117+
PHP: "PH",
118+
PKR: "PK",
119+
PLN: "PL",
120+
PYG: "PY",
121+
QAR: "QA",
122+
RON: "RO",
123+
RSD: "RS",
124+
RUB: "RU",
125+
RWF: "RW",
126+
SAR: "SA",
127+
SBD: "SB",
128+
SCR: "SC",
129+
SDG: "SD",
130+
SEK: "SE",
131+
SGD: "SG",
132+
SKK: "SK",
133+
SLL: "SL",
134+
SOS: "SO",
135+
SRD: "SR",
136+
STD: "ST",
137+
SVC: "SV",
138+
SYP: "SY",
139+
SZL: "SZ",
140+
THB: "TH",
141+
TJS: "TJ",
142+
TMT: "TM",
143+
TND: "TN",
144+
TOP: "TO",
145+
TRY: "TR",
146+
TTD: "TT",
147+
TWD: "TW",
148+
TZS: "TZ",
149+
UAH: "UA",
150+
UGX: "UG",
151+
USD: "US",
152+
UYU: "UY",
153+
UZS: "UZ",
154+
VEF: "VE",
155+
VND: "VN",
156+
VUV: "VU",
157+
YER: "YE",
158+
ZAR: "ZA",
159+
ZMK: "ZM",
160+
ZWD: "ZW",
161+
};

‎Fetch-API JS/currency.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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>Currency Converter</title>
7+
<link href="style.css" rel="stylesheet" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
11+
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
12+
crossorigin="anonymous"
13+
referrerpolicy="no-referrer"
14+
/>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<h2>Currency Converter</h2>
19+
<form>
20+
<div class="amount">
21+
<p>Enter Amount</p>
22+
<input value="1" type="text" />
23+
</div>
24+
<div class="dropdown">
25+
<div class="from">
26+
<p>From</p>
27+
<div class="select-container">
28+
<img src="https://flagsapi.com/US/flat/64.png" />
29+
<select name="from"></select>
30+
</div>
31+
</div>
32+
<i class="fa-solid fa-arrow-right-arrow-left"></i>
33+
<div class="to">
34+
<p>To</p>
35+
<div class="select-container">
36+
<img src="https://flagsapi.com/IN/flat/64.png" />
37+
<select name="to"></select>
38+
</div>
39+
</div>
40+
</div>
41+
<div class="msg">1USD = 80INR</div>
42+
<button>Get Exchange Rate</button>
43+
</form>
44+
</div>
45+
<script src="codes.js"></script>
46+
<script src="app1.js"></script>
47+
</body>
48+
</html>

‎Fetch-API JS/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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>Fetch API</title>
7+
</head>
8+
<body>
9+
<button id="btn">Get a Fact</button>
10+
<p id="fact"></p>
11+
<script src="app.js"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)