country-finder/index.html at main · edwinirungu/country-finder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Find a country</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"
      integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body
    class="body"
    style="background-color: wheat; font-family: 'Google Sans', sans-serif"
  >
    <button id="togglecolor">Change color</button>
    <div>
      <h3>Search any country instantly.</h3>
    </div>
    <div id="root"></div>
    <script type="text/babel">
      function Profile() {
        const [country, setCountry] = React.useState(null);
        const [loading, setLoading] = React.useState(false);
        const [error, setError] = React.useState(null);

        const countryRef = React.useRef("");

        async function fetchData(e) {
          e.preventDefault();
          setLoading(true);
          setError(null);
          try {
            const data = await fetch(
              `https://restcountries.com/v3.1/name/${countryRef.current.value}`
            )
              .then((data) => data.json())
              .then((data) => {
                setCountry(data);
                setLoading(false);
                console.log(data);
              });
          } catch (error) {
            setError(error);
          } finally {
            setLoading(false);
          }
        }

        return (
          <>
            <form onSubmit={fetchData}>
              <label htmlFor="country"> Country Name </label>
              <input ref={countryRef} type="text" name="country"></input>
              <button disabled={loading}>Search</button>
              {loading ? <p>Searching...</p> : ""}
            </form>
            {error && <div>{error}</div>}
            {country?.map((c) => (
              <div key={c.cca2}>
                <h4 title={c.flags.alt}>
                  {c.flag} {c.altSpellings.join(" / ")}
                </h4>
                <img
                  src={c.coatOfArms.png}
                  style={{ height: "50px", width: "50px", marginLeft: "10px" }}
                />
                <span>Capital city: {c.capital?.join(" / ")}</span>
                <br />
                <span>Region: {c.region}</span>
                <br />
                <span>Sub Region: {c.subregion}</span>
                <br />
                <span>
                  {" "}
                  <button
                    onClick={() =>
                      window.open(
                        c.maps.googleMaps,
                        c.altSpellings[0],
                        "width=1000,height=500,resizable=yes,scrollbars=yes"
                      )
                    }
                  >
                    View Map
                  </button>
                </span>

                <br />
                <span>Population: {c.population.toLocaleString()}</span>
                <br />
                <span>
                  Currency:{" "}
                  {Object.values(c.currencies)
                    .map((cur) => `${cur.name} (${cur.symbol})`)
                    .join(", ")}
                </span>
                <br />
                <span>Languages: {Object.values(c.languages).join(", ")}</span>
                <br />
              </div>
            ))}
          </>
        );
      }
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<Profile />);
    </script>
    <script>
      const colors = ["#f0ead2", "#dde5b6", "#a98467", "#adc178", "#6c584c"];

      $("#togglecolor").click(() => {
        const randomcolor = colors[Math.floor(Math.random() * colors.length)];
        $(".body").css("background-color", randomcolor);
      });
    </script>
  </body>
</html>