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 |
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 |
85 |
86 |
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 |
29 |
30 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
40 | 
41 |