├── API_Example.png ├── Instruction.txt ├── custom_api ├── custom.html ├── custom.js └── data.json ├── explain.png ├── intro_to_json ├── data.json └── index.js ├── json_placeholder ├── placeholder.html └── placeholder.js ├── kanye_rest ├── kanye.html └── kanye.js ├── meme_gallery ├── gallery.html └── gallery.js ├── random_user ├── random.html └── random.js ├── sports_db ├── img │ ├── female.jpg │ └── male.jpeg ├── soprtsdb.html └── sports.js ├── tailwind.config.js ├── test.js └── world_tour ├── worldtour.js └── worltour.html /API_Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xRokib/explore-api-and-apply-es6/f355dd2a7f03ee92190b75a2c44320fd7b50abf8/API_Example.png -------------------------------------------------------------------------------- /Instruction.txt: -------------------------------------------------------------------------------- 1 | API => Application Programming Interface. 2 | 3 | # Intro To JSON => All About JSON 4 | JSON 5 | => JavaScript Object Notation. 6 | =>A standard text based form 7 | => Human Readable, lightweight and Language independent 8 | => to store and exchange data between client and server 9 | i)Why JSON? 10 | ii)JSON Syntax 11 | iii) JSON Value Type // string,number,boolean,null,object,array 12 | iii) JS Object VS JSON 13 | 14 | // Choose any 4 API below. 15 | 16 | 1) Practice JSON placeholder-Done 17 | 3) Kanye Rest API 18 | 4) Meme API - Done 19 | 5) RANDOM USER GENERATOR 20 | 6) REST COUNTRIES API - Done 21 | 7) SportsDB API - Done 22 | 8) Our Own Made API Data 23 | => https://raw.githubusercontent.com/rokib97/json-api/main/public/data.json 24 | 25 | 26 | 27 | Bonus: Discussion About Callback, Asynchronous JS , Promise , Async Await 28 | 29 | Resources: 30 | API : https://medium.com/geekculture/a-beginners-guide-to-apis-9aa7b1b2e172 31 | JSON : video number (96-100) 32 | https://www.youtube.com/watch?v=xG3LtrIU-Z4&list=PLgH5QX0i9K3qzryglMjcyEktz4q7ySunX&index=96 33 | 34 | 35 | Advance Js Rersources: ***** 36 | 1) https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP 37 | 38 | 2)https://www.youtube.com/watch?v=KuhLGuNxF8U&list=PLHiZ4m8vCp9Nflbo9a0pZuLscG_Xc7DKq 39 | 40 | JS => 80-90% => Job 80% 41 | 42 | TODO : 43 | weekly - 3 videos - random time -------------------------------------------------------------------------------- /custom_api/custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pinaki Shoes Store 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /custom_api/custom.js: -------------------------------------------------------------------------------- 1 | console.log("custom api data coming soon..."); 2 | -------------------------------------------------------------------------------- /custom_api/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "abc", 4 | "name": "Cavalier", 5 | "color": "Black", 6 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Cavalier-Black-092121-3.4_672x672.jpg?v=1633034593", 7 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Cavalier-Black-LB2_672x672.jpg?v=1569069741", 8 | "price": 190, 9 | "quantity": 0 10 | }, 11 | { 12 | "id": "def", 13 | "name": "Cavalier", 14 | "color": "Sandstone", 15 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Cavalier-Sandstone-012422-3.4_672x672.jpg?v=1646426165", 16 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Cavalier-Sandstone-012422-Side_672x672.jpg?v=1646693841", 17 | "price": 190, 18 | "quantity": 0 19 | }, 20 | { 21 | "id": "ghi", 22 | "name": "Cavalier", 23 | "color": "Shadow Gray", 24 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Mens-Cavalier-Shadow-Grey-190225_672x672.jpg?v=1569110766", 25 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/GreyCavs__copy_672x672.jpg?v=1569076665", 26 | "price": 190, 27 | "quantity": 0 28 | }, 29 | { 30 | "id": "jkl", 31 | "name": "Legend", 32 | "color": "Dark Brown", 33 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Legend-BlackMatte-3.4_672x672.jpg?v=1600886623", 34 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Legend-BlackMatte-051421-Side_672x672.jpg?v=1623180476", 35 | "price": 199, 36 | "quantity": 0 37 | }, 38 | { 39 | "id": "mno", 40 | "name": "Duke", 41 | "color": "Black", 42 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Duke-Black-LB1_e8b33de3-6f50-4619-9899-f437c4af8d6c_672x672.jpg?v=1568725092", 43 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Duke-Black-LB2_672x672.jpg?v=1568725092", 44 | "price": 199, 45 | "quantity": 0 46 | }, 47 | { 48 | "id": "pqr", 49 | "name": "Rogue", 50 | "color": "Dark Olive", 51 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/3.4_Rogue_DarkOliveSuede_672x672.jpg?v=1569267592", 52 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/Side_Rogue_DarkOliveSuede_672x672.jpg?v=1569267596", 53 | "price": 190, 54 | "quantity": 0 55 | }, 56 | { 57 | "id": "stu", 58 | "name": "Harness", 59 | "color": "Gray", 60 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Harness-Grey-Suede-LB1_672x672.jpg?v=1571254162", 61 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Harness-Grey-Suede-LB2_672x672.jpg?v=1571254163", 62 | "price": 250, 63 | "quantity": 0 64 | }, 65 | { 66 | "id": "vwx", 67 | "name": "Harness", 68 | "color": "Dark Brown", 69 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Harness-Brown-LB1_672x672.jpg?v=1571254620", 70 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Harness-Brown-LB2_672x672.jpg?v=1571254625", 71 | "price": 250, 72 | "quantity": 0 73 | }, 74 | { 75 | "id": "yza", 76 | "name": "Captain", 77 | "color": "Black", 78 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Captain-Black-092121-3.4_672x672.jpg?v=1633036711", 79 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Captain-Black-092121-Side_672x672.jpg?v=1633036710", 80 | "price": 300, 81 | "quantity": 0 82 | }, 83 | { 84 | "id": "abcz", 85 | "name": "Captain", 86 | "color": "Black Matte", 87 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/3.4_Captain_BlackMatte_672x672.jpg?v=1569226836", 88 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/Side_Captain_BlackMatte_672x672.jpg?v=1569226836", 89 | "price": 300, 90 | "quantity": 0 91 | }, 92 | { 93 | "id": "befy", 94 | "name": "Scout", 95 | "color": "Midnight Blue", 96 | "pairImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Scout-Midnight-LB1_6102ba48-fb66-4207-8422-f3036feac1a9_672x672.jpg?v=1568826312", 97 | "sideImage": "https://cdn.shopify.com/s/files/1/0419/1525/products/1024x1024-Men-Scout-Midnight-LB2_672x672.jpg?v=1568826312", 98 | "price": 310, 99 | "quantity": 0 100 | } 101 | ] 102 | -------------------------------------------------------------------------------- /explain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xRokib/explore-api-and-apply-es6/f355dd2a7f03ee92190b75a2c44320fd7b50abf8/explain.png -------------------------------------------------------------------------------- /intro_to_json/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": 1, 3 | "name": "rokib", 4 | "job": "web instructor", 5 | "age": 22, 6 | "isSingle": true 7 | } 8 | -------------------------------------------------------------------------------- /intro_to_json/index.js: -------------------------------------------------------------------------------- 1 | const myobj = { 2 | id: 1, 3 | name: "rokib", 4 | job: "web instructor", 5 | age: 22, 6 | isSingle: true, 7 | }; 8 | 9 | const jsonData = JSON.stringify(myobj); 10 | 11 | const objFormate = JSON.parse(jsonData); 12 | 13 | console.log(objFormate.age); 14 | -------------------------------------------------------------------------------- /json_placeholder/placeholder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Explore Placeholder 8 | 9 | 14 | 15 | 16 | 17 |
18 |

19 | Welcome to JSON placeholder 20 |

21 |
22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /json_placeholder/placeholder.js: -------------------------------------------------------------------------------- 1 | // console.log("yeah its working"); 2 | 3 | const loadData = () => { 4 | fetch("https://jsonplaceholder.typicode.com/posts") 5 | .then((res) => res.json()) 6 | .then((data) => showData(data)) 7 | .catch((err) => { 8 | console.log(err); 9 | }); 10 | }; 11 | 12 | const showData = (data) => { 13 | // console.log(data.slice(0, 5)); 14 | for (let singleData of data.slice(0, 5)) { 15 | // console.log(singleData.title); 16 | const container = document.getElementById("post-info"); 17 | const div = document.createElement("div"); 18 | div.innerHTML = ` 19 |

${singleData.title}

20 | `; 21 | container.appendChild(div); 22 | } 23 | }; 24 | 25 | loadData(); 26 | -------------------------------------------------------------------------------- /kanye_rest/kanye.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Kanye West 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /kanye_rest/kanye.js: -------------------------------------------------------------------------------- 1 | console.log("connected"); 2 | -------------------------------------------------------------------------------- /meme_gallery/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Welcome To My Awesome Meme Store 8 | 13 | 14 | 15 | 16 |
17 |

18 | Welcome To MEME World 19 |

20 |
21 | 22 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /meme_gallery/gallery.js: -------------------------------------------------------------------------------- 1 | // console.log("meme js loading"); 2 | // load data fro mAPI 3 | const loadMeme = () => { 4 | const URL = "https://meme-api.com/gimme/25"; 5 | fetch(URL) 6 | .then((res) => res.json()) 7 | .then((data) => showMeme(data.memes)); 8 | }; 9 | 10 | // show data in UI 11 | const showMeme = (memes) => { 12 | memes.slice(0, 10).forEach((meme) => { 13 | console.log(meme.url); 14 | const memeConatainer = document.getElementById("section"); 15 | const div = document.createElement("div"); 16 | div.innerHTML = ` 17 |
18 |
car!
19 | 20 |
21 | `; 22 | memeConatainer.appendChild(div); 23 | }); 24 | }; 25 | 26 | loadMeme(); 27 | -------------------------------------------------------------------------------- /random_user/random.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random User Explore 8 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /random_user/random.js: -------------------------------------------------------------------------------- 1 | console.log("random user loading"); 2 | -------------------------------------------------------------------------------- /sports_db/img/female.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xRokib/explore-api-and-apply-es6/f355dd2a7f03ee92190b75a2c44320fd7b50abf8/sports_db/img/female.jpg -------------------------------------------------------------------------------- /sports_db/img/male.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0xRokib/explore-api-and-apply-es6/f355dd2a7f03ee92190b75a2c44320fd7b50abf8/sports_db/img/male.jpeg -------------------------------------------------------------------------------- /sports_db/soprtsdb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exploring SoprtsDB API 8 | 12 | 13 | 14 |
15 |

Welcome To SportsDB Official

16 |
17 | 18 |
19 |
20 |
21 |
22 |

left side

23 | 27 |
28 |
29 | Loading... 30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 |

right side

38 |
39 | 40 | 41 |
42 |
43 | 44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /sports_db/sports.js: -------------------------------------------------------------------------------- 1 | //get the data from API 2 | const serachAllData = (id) => { 3 | const inputElement = document.getElementById("search-value"); 4 | document.getElementById("single-player-details").innerHTML = ""; 5 | document.getElementById("male").classList.add("d-none"); 6 | document.getElementById("female").classList.add("d-none"); 7 | const inputValue = inputElement.value; 8 | document.getElementById("spinner").classList.remove("d-none"); 9 | const serchId = id || inputValue; 10 | const URL = `https://www.thesportsdb.com/api/v1/json/3/searchplayers.php?p=${serchId}`; 11 | console.log(URL); 12 | 13 | fetch(URL) 14 | .then((res) => res.json()) 15 | .then((data) => { 16 | document.getElementById("spinner").classList.add("d-none"); 17 | showPlayerData(data.player); 18 | }); 19 | }; 20 | 21 | //show the data to UI 22 | const showPlayerData = (players) => { 23 | document.getElementById("search-value").value = ""; 24 | const container = document.getElementById("player-info"); 25 | container.innerHTML = ""; 26 | players.forEach((player) => { 27 | // console.log(player); 28 | const { strThumb, strPlayer, strNationality, idPlayer } = player; 29 | const div = document.createElement("div"); 30 | div.classList.add("col"); 31 | div.innerHTML = ` 32 |
33 | ... 36 |
37 |
${strPlayer}
38 |

Nationality: ${strNationality}

39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | `; 47 | container.appendChild(div); 48 | }); 49 | }; 50 | 51 | // get single player data using dynamic URL and unique id 52 | const singlePlayer = (id) => { 53 | const URL = `https://www.thesportsdb.com/api/v1/json/3/lookupplayer.php?id=${id}`; 54 | fetch(URL) 55 | .then((res) => res.json()) 56 | .then((data) => showSinglePlayer(data.players[0])); 57 | }; 58 | 59 | // show single player data using dynamic URL and unique id 60 | const showSinglePlayer = (data) => { 61 | console.log(data); 62 | const { strThumb, strPlayer, strDescriptionEN, strGender } = data; 63 | const container = document.getElementById("single-player-details"); 64 | const div = document.createElement("div"); 65 | if (strGender === "Male") { 66 | document.getElementById("male").classList.remove("d-none"); 67 | } else { 68 | document.getElementById("female").classList.remove("d-none"); 69 | } 70 | container.innerHTML = ""; 71 | div.innerHTML = ` 72 |
73 |
74 |
75 | ... 76 |
77 |
78 |
79 |
${strPlayer}
80 |

${strDescriptionEN.slice(0, 100) + "...."}

81 |

Last updated 3 mins ago

82 |
83 |
84 |
85 |
86 | `; 87 | container.appendChild(div); 88 | }; 89 | 90 | serachAllData("messi"); 91 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ["./src/**/*.{html,js}"], 3 | theme: { 4 | extend: {}, 5 | }, 6 | plugins: [], 7 | }; 8 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | function gemsToDiamond(gems1, gems2, gems3) { 2 | if ( 3 | typeof gems1 !== "number" || 4 | typeof gems2 !== "number" || 5 | typeof gems3 !== "number" 6 | ) { 7 | return "Please provide a valid number..."; 8 | } 9 | const totalDiamond = gems1 * 21 + gems2 * 32 + gems3 * 43; 10 | return totalDiamond > 2000 ? totalDiamond - 2000 : totalDiamond; 11 | } 12 | -------------------------------------------------------------------------------- /world_tour/worldtour.js: -------------------------------------------------------------------------------- 1 | // console.log("touring"); 2 | 3 | // const getALLData = () => { 4 | // fetch("https://restcountries.com/v3.1/all") 5 | // .then((res) => res.json()) 6 | // .then((data) => showData(data)); 7 | // }; 8 | 9 | const loadAllData = async () => { 10 | const res = await fetch("https://restcountries.com/v3.1/all"); 11 | const data = await res.json(); 12 | showData(data.slice(0, 8)); 13 | }; 14 | 15 | const showAllData = async () => { 16 | const res = await fetch("https://restcountries.com/v3.1/all"); 17 | const data = await res.json(); 18 | showData(data); 19 | }; 20 | 21 | const showData = (data) => { 22 | const container = document.getElementById("country-info"); 23 | container.innerHTML = ""; 24 | data.forEach((country) => { 25 | // console.log(country.currencies); 26 | // console.log(Object.keys(country.currencies)[0]); 27 | 28 | const div = document.createElement("div"); 29 | div.innerHTML = ` 30 |
31 |
Shoes
34 |
35 |

36 | ${country.name.common} 37 |
${country.cca2}
38 |

39 |

Capital: ${country?.capital ? country?.capital[0] : "Not Found"}

40 |

Population: ${country.population}

41 |

Currency: ${ 42 | country.currencies ? Object.keys(country.currencies)[0] : "Not Found" 43 | }

44 |
45 | 48 |
49 |
50 |
51 | 52 | `; 53 | container.appendChild(div); 54 | }); 55 | }; 56 | 57 | const getDetailsData = (id) => { 58 | // console.log("called", id); 59 | const URL = `https://restcountries.com/v3.1/alpha/${id}`; 60 | fetch(URL) 61 | .then((res) => res.json()) 62 | .then((data) => showSingleData(data[0])); 63 | }; 64 | 65 | const container = document.getElementById("modal-info"); 66 | const showSingleData = (singleCountryData) => { 67 | console.log(singleCountryData); 68 | container.innerHTML = ""; 69 | const div = document.createElement("div"); 70 | div.classList.add("modal-box"); 71 | div.innerHTML = ` 72 | 73 |

74 | Name: ${singleCountryData.name.common} 75 |

76 |

77 | Population: ${singleCountryData.population} 78 |

79 |

Currency: ${ 80 | singleCountryData.currencies 81 | ? Object.keys(singleCountryData.currencies)[0] 82 | : "Not Found" 83 | }

84 | 87 | 88 | `; 89 | container.appendChild(div); 90 | }; 91 | 92 | // getALLData(); 93 | loadAllData(); 94 | -------------------------------------------------------------------------------- /world_tour/worltour.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Have A Cool Tour Together 8 | 13 | 14 | 15 | 16 |
17 |

18 | Welcome to World Tour 2023 19 |

20 |
21 |
25 |
26 | 27 | 28 |
29 |
30 |
31 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | --------------------------------------------------------------------------------