Added world map

.firebase/hosting.YnVpbGQ.cache

@@ -4,24 +4,24 @@ logo192.png,499162500000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872
 logo512.png,499162500000,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
 manifest.json,499162500000,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 robots.txt,499162500000,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
-asset-manifest.json,1599006087424,1a338f1cea1d3071646f199d47f2eb787d13b0fe8bb4a9a039e7060c0d5a84aa
-index.html,1599006087424,c033d8e18cc46f7132a2832e4bb6b821a6f22992eebe642499df594ce3a341c2
-precache-manifest.08ad9d30bf8273ea3625237b533df83f.js,1599006087424,17766588522451e5f0748083e7d9eabc8bc512632a827b98c44d98058e2e72ad
-service-worker.js,1599006087424,ec68faecb358ab3d4596bd67e86c3f4e2c6087751557e407c32b9f0c7ddf12f3
-static/js/2.738019b3.chunk.js.LICENSE.txt,1599006087420,6e35c90a08889838097fac293adfe2716dd320ffd6ce18953bfbbb9f80852f3f
-static/css/main.86157d60.chunk.css,1599006087417,123f504ef83481755cc2d70b4adaaef0662b1e37d9589902ff4392af8da59b40
-static/css/main.86157d60.chunk.css.map,1599006087419,d5572a131d2ecce8ede8f36a37c58db7e2415887b7c15688e380335e8b17314a
-static/js/runtime-main.d4304d1c.js,1599006087420,26f0303296f02225d1157ea161c2a2b0288df5281d303c1030b6945240554cdf
-static/js/runtime-main.d4304d1c.js.map,1599006087424,1cc22d56b1fa9e0824e48491e56c4c1b83632c0aea3b4a1d9f5d497b50f929f4
-static/js/main.2f9f4178.chunk.js.map,1599006087405,bda14ea5bac0ea55d159cdcb770228fed7a19743e38b6c6062ec9f0bfbe9f7d7
-static/media/submit.c38e5de0.png,1599006087418,90007cbbe1c48d8fdac5c71751bbe2dc94875a97373abccdd50662556aedcf05
-static/media/next.58deaa2e.png,1599006087418,afbf52107b0fa672c0eaf9ba0be87867cc936ec011fb870dec45542389f869c7
-static/media/c3f2.13a6e59e.png,1599006087418,5bc58b9030fc4ea7b59ea279f55ec5b7728f06d130fb03e7052ef9a9ddad0bf0
-static/media/hard.cbee090e.png,1599006087419,92bd941efd998893b1e8322e73c7ecc91db82edc2ad7a18bfee54bd8290c5379
-static/media/previous.1ffd449d.png,1599006087418,acc2c5e7630a4957ebba81b3cd26c3c6d5b7582e951e8f4df7b50c712906b999
-static/media/quiz.e20965ee.png,1599006087406,aa8157058bf7f6a8c12f4cf436255ab38fa8224caad3e42875da080045f608d7
-static/media/easy.f31b98c1.png,1599006087419,c30cbfc3f20971906574e1b5666fc0e2fbc57406234e4f57b82901725c31d7ae
-static/media/medium.0700d452.png,1599006087419,648a0c54ec1c62621a8a71be172a7f2bdc628a454661c0128f1fd2c00f0b1eb6
-static/js/2.738019b3.chunk.js,1599006087420,fc77c5a96a59015f12d48da0f2b4a367db14f2234afcbe5e47b028269edda306
-static/js/main.2f9f4178.chunk.js,1599006087420,b339076f3b939373a6214aad70884ae8073d41f8a6216dcf6b6b03438ba4a762
-static/js/2.738019b3.chunk.js.map,1599006087425,80953a044595a6d5ee1650b7d3bf295e8cc33c857bfd0625ac24266091d79d2d
+asset-manifest.json,1599013156627,f8007ec30f427c9f8cafa7045606b26424357fee6d6aa98906d63cd1de2cad39
+index.html,1599013156622,33fdfee74b6a2dd8ffc8a39fcfea4c89a39bc134bd9e802bf7a3021ae163f28d
+precache-manifest.a6590eceb6d3786e7bbda92e91d418ee.js,1599013156622,eaa5e7c119efb9d7d78b61efa94e82ec90be5bf8bb8ec29f5371d4b805dce4ec
+service-worker.js,1599013156622,1c1f6ebc56e36745279161a404ae28e999808f404ea184d876d9de5198d2bba9
+static/css/main.fc72d903.chunk.css,1599013156620,f76767596f8b21652e29cf28948fb8e9df27d3655ede1dc0310efaafd1d9d380
+static/js/2.738019b3.chunk.js.LICENSE.txt,1599013156620,6e35c90a08889838097fac293adfe2716dd320ffd6ce18953bfbbb9f80852f3f
+static/css/main.fc72d903.chunk.css.map,1599013156621,d4df586f0edd8383a6cd420d441cf968db7700fe6e69ea86d98c8fd012b902f9
+static/js/runtime-main.d4304d1c.js,1599013156620,26f0303296f02225d1157ea161c2a2b0288df5281d303c1030b6945240554cdf
+static/js/main.11c25ff4.chunk.js.map,1599013156621,ddb738ad600d6718a8c0bfe46f22b7d01c955abd32274290a393fd4330d7d25a
+static/js/runtime-main.d4304d1c.js.map,1599013156627,1cc22d56b1fa9e0824e48491e56c4c1b83632c0aea3b4a1d9f5d497b50f929f4
+static/media/submit.c38e5de0.png,1599013156620,90007cbbe1c48d8fdac5c71751bbe2dc94875a97373abccdd50662556aedcf05
+static/media/next.58deaa2e.png,1599013156620,afbf52107b0fa672c0eaf9ba0be87867cc936ec011fb870dec45542389f869c7
+static/media/c3f2.13a6e59e.png,1599013156619,5bc58b9030fc4ea7b59ea279f55ec5b7728f06d130fb03e7052ef9a9ddad0bf0
+static/media/quiz.e20965ee.png,1599013156620,aa8157058bf7f6a8c12f4cf436255ab38fa8224caad3e42875da080045f608d7
+static/media/hard.cbee090e.png,1599013156620,92bd941efd998893b1e8322e73c7ecc91db82edc2ad7a18bfee54bd8290c5379
+static/media/previous.1ffd449d.png,1599013156620,acc2c5e7630a4957ebba81b3cd26c3c6d5b7582e951e8f4df7b50c712906b999
+static/media/easy.f31b98c1.png,1599013156620,c30cbfc3f20971906574e1b5666fc0e2fbc57406234e4f57b82901725c31d7ae
+static/media/medium.0700d452.png,1599013156620,648a0c54ec1c62621a8a71be172a7f2bdc628a454661c0128f1fd2c00f0b1eb6
+static/js/2.738019b3.chunk.js,1599013156620,fc77c5a96a59015f12d48da0f2b4a367db14f2234afcbe5e47b028269edda306
+static/js/main.11c25ff4.chunk.js,1599013156620,a9bd53a763b23c75298cfaae1d26819c085d3e70f0a244d1adbd271da9c50415
+static/js/2.738019b3.chunk.js.map,1599013156627,80953a044595a6d5ee1650b7d3bf295e8cc33c857bfd0625ac24266091d79d2d

package.json

@@ -8,10 +8,14 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "axios": "^0.20.0",
+    "cheerio": "^1.0.0-rc.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-simple-maps": "^2.1.2",
+    "react-tooltip": "^4.2.9"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Countries.js

@@ -24,12 +24,13 @@ function Countries() {
         //   ))}
         // </ul>
         <div className="countries__list">
-          {countrydata.map(country => (
+          {countrydata.map((country) => (
             <Country
               key={country.alpha2Code}
               name={country.name}
               flag={country.flag}
               capital={country.capital}
+              alpha3Code={country.alpha3Code}
               currency={
                 country.currencies[0].name +
                 " - " +

src/components/Country.js

@@ -1,13 +1,95 @@
 import React from "react";
 import "../stylesheets/Country.css";
+import { withStyles } from "@material-ui/core/styles";
+import Dialog from "@material-ui/core/Dialog";
+import MuiDialogTitle from "@material-ui/core/DialogTitle";
+import MuiDialogContent from "@material-ui/core/DialogContent";
+import MuiDialogActions from "@material-ui/core/DialogActions";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import Typography from "@material-ui/core/Typography";
+import CountryDetails from "./CountryDetails";
+
+const styles = (theme) => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing(2),
+  },
+  closeButton: {
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+});
+
+const DialogTitle = withStyles(styles)((props) => {
+  const { children, classes, onClose, ...other } = props;
+  return (
+    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+      <Typography variant="h6">{children}</Typography>
+      {onClose ? (
+        <IconButton
+          aria-label="close"
+          className={classes.closeButton}
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </MuiDialogTitle>
+  );
+});
+
+const DialogContent = withStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))(MuiDialogContent);
+
+const DialogActions = withStyles((theme) => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing(1),
+  },
+}))(MuiDialogActions);
 
 function Country(props) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleModalOpen = () => {
+    setOpen(true);
+  };
+
   return (
     <div className="country">
-      <img className="country__flag" src={props.flag} alt={props.name} />
+      <img
+        className="country__flag"
+        src={props.flag}
+        alt={props.name}
+        onClick={handleModalOpen}
+      />
       <h1 className="country__name">{props.name}</h1>
       <h1 className="country__capital">{props.capital}</h1>
       <h1 className="country__currency">{props.currency}</h1>
+
+      <Dialog
+        onClose={handleClose}
+        aria-labelledby="customized-dialog-title"
+        open={open}
+      >
+        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
+          {props.name}
+        </DialogTitle>
+        <DialogContent dividers>
+          {/* <Typography gutterBottom>Country specific data</Typography> */}
+          <CountryDetails alpha3code={props.alpha3Code} />
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }