Countries list complete

src/App.js

@@ -5,7 +5,7 @@ import getCountries, { getBorders, getNestedData, searchByName } from './utils';
 
 import Header from './components/Header/Header';
 import Dropdown from './components/Dropdown/Dropdown.js';
-import Country from './components/Country/Country.js';
+import Grid from './components/Grid/Grid.js';
 
 import './App.scss';
 
@@ -27,7 +27,7 @@ const App = () => {
         setTheme(theme === 'light' ? 'dark' : 'light');
     };
     return (
-        <div className="App">
+        <div className={theme === 'light' ? 'App light' : 'App dark'}>
             <Header theme={theme} toggleTheme={toggleTheme} />
 
             {/* Added for demonstration purposes */}
@@ -48,36 +48,39 @@ const App = () => {
             <h1>{region}</h1>
             {/* Added for demonstration purposes */}
             {/* Added for demonstration purposes */}
-            <ul>
-                {countries.map(country => (
-                  <div style={{ padding: 20 }}>
-                  <Country 
-                    theme={theme} 
-                    flag={country.flag}
-                    name={country.name}
-                    population={country.population}
-                    region={country.region}
-                    capital={country.capital}
-                  />
-                        {/* <li key={country.alpha3Code}>
-                            {country.name} <br />/ native name:{' '}
-                            {country.nativeName} <br />/ population:{' '}
-                            {country.population} <br />/ region:{' '}
-                            {country.region} <br />/ subregion:{' '}
-                            {country.subregion} <br />/ capital:{' '}
-                            {country.capital} <br />/ top level domain:{' '}
-                            {country.topLevelDomain} <br />/ borders:{' '}
-                            {getBorders(country.borders)} <br />/ currencies:{' '}
-                            {getNestedData(country.currencies)} <br />/
-                            languages: {getNestedData(country.languages)}
-                        </li> */}
-                    </div>
-                ))}
-            </ul>
+            {/* <ul> */}
+
+            <Grid 
+              countries={countries}
+              theme={theme}
+            />
+                  {/* {countries.map(country => (
+                    <Country 
+                      theme={theme} 
+                      flag={country.flag}
+                      name={country.name}
+                      population={country.population}
+                      region={country.region}
+                      capital={country.capital}
+                    />     
+                  ))} */}
+            {/* </Grid> */}
+            {/* </ul> */}
             {/* Added for demonstration purposes */}
 
         </div>
     );
 };
-
+{/* <li key={country.alpha3Code}>
+{country.name} <br />/ native name:{' '}
+{country.nativeName} <br />/ population:{' '}
+{country.population} <br />/ region:{' '}
+{country.region} <br />/ subregion:{' '}
+{country.subregion} <br />/ capital:{' '}
+{country.capital} <br />/ top level domain:{' '}
+{country.topLevelDomain} <br />/ borders:{' '}
+{getBorders(country.borders)} <br />/ currencies:{' '}
+{getNestedData(country.currencies)} <br />/
+languages: {getNestedData(country.languages)}
+</li> */}
 export default App;

src/components/CardBottom/CardBottom.js

@@ -0,0 +1,23 @@
+import React from "react";
+
+import styles from "./CardBottom.module.scss";
+
+const CardBottom = props => (
+    <div className={styles.CardBottom}>
+     <h1>{props.name}</h1>
+        <ul>
+            <li  key={props.alpha3Code}> 
+                <strong>Population:&nbsp;</strong>{props.population}<br />
+            </li>
+            <li key={props.alpha3Code}>
+                <strong>Region:&nbsp;</strong>{props.region}<br />
+            </li>
+            <li key={props.alpha3Code}>
+                <strong>Capital:&nbsp;</strong>{props.capital}<br />
+            </li>
+        </ul> 
+    </div>
+)
+
+
+export default CardBottom;

src/components/CardBottom/CardBottom.module.scss

@@ -0,0 +1,9 @@
+.CardBottom {
+    padding-top: 3em;
+    padding-bottom: 4em;
+    padding-left: 2em;
+}
+
+ul {
+    list-style-type: none;
+}

src/components/Country/Country.js

@@ -5,20 +5,36 @@ import Flag from "../Flag/Flag";
 
 const Country = props => (
     <div className={`${styles.Country} ${props.theme === "light" ? styles.light : styles.dark}`}>
-
-        <Flag flag={props.flag} />
-        <h1>{props.name}</h1>
-        <ul>
+
+
+        {/* <Flag
+            flag={props.flag}
+            name={props.name}
+        /> */}
+
+
+    <img className={styles.Flag} src={props.flag} alt={props.name} />
+    <div className={styles.infoBlock}>
+      <h1>{props.name}</h1>
+      <ul>
         <li>
-            <strong>Population:&nbsp;</strong>{props.population}<br />
+          <strong>Population:&nbsp;</strong>
+          {props.population}
+          <br />
         </li>
         <li>
-            <strong>Region:&nbsp;</strong>{props.region}<br />
+          <strong>Region:&nbsp;</strong>
+          {props.region}
+          <br />
         </li>
         <li>
-            <strong>Capital:&nbsp;</strong>{props.capital}<br />
+          <strong>Capital:&nbsp;</strong>
+          {props.capital}
+          <br />
         </li>
-        </ul>
+      </ul>
+    </div>
+
     </div>
 )
 

src/components/Country/Country.module.scss

@@ -1,28 +1,42 @@
 @import '../../global.styles.scss';
 
 .Country {
-    margin: auto;
-    width: 80%;
-    padding-bottom: 20px;
+    display: grid;
+    border-radius: $border-radius;
+    box-shadow: $element-box-shadow-light;
+    overflow: hidden;
+    cursor: pointer;
+}
+img {
+    width: 100%;
+}
+.infoBlock {
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 }
 h1 {
-    margin-left: 20px;
+    font-size: 1.1rem;
 }
 ul {
     list-style-type: none;
+    margin-top: 0.5rem;
 }
 li {
+    font-size: 0.9rem;
     display: flex;
-    margin-left: 20px;
+}
+strong {
+    font-weight: $medium;
 }
 .light {
     background-color: $white;
     color: $very-dark-blue-text;
 }
 
 .dark {
-    color: $white;
-
     background-color: $dark-blue;
+    color: $white;
     box-shadow: $element-box-shadow-dark;
 }

src/components/Flag/Flag.js

@@ -1,9 +1,66 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 
 import styles from "./Flag.module.scss";
 
-const Flag = props => (
-   <img className={styles.Flag} src={props.flag} alt={props.name}/>
-)
+
+function idealAspectRatio({width, height}) {
+   const aspectRatio = width / height; 
+   if (aspectRatio > 1.5 && aspectRatio <= 1.8){
+      return false;
+   }
+   return true;
+}
+
+function getMeta(url){
+   return new Promise((resolve, reject) => {
+      let img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+      img.src = url;
+   });
+}
+
+async function getImage(url){
+   let img = await getMeta(url);
+   const dimensions = {
+      width: img.width,
+      height: img.height
+   }
+   return dimensions;
+}
+
+function Flag (props) {
+
+   const altText = `${props.name} flag`;
+   const [ratio, setRatio] = useState([]);
+
+   useEffect(() => {
+      getImage(props.flag).then(res => {
+         const response = res;
+         setRatio(response);
+      });
+      // stop the component from re-rendering since props.flag does not change 
+   },[props.flag]);
+
+
+   const ideal = (idealAspectRatio(ratio));
+   const classNameText = (ideal ? 'standard' : 'standard');
+   console.log(classNameText);
+
+
+
+   return (
+
+      <img 
+         className={ideal ? styles.standard : styles.standard} 
+         src={props.flag} 
+         alt={altText} 
+      />
+   )
+
+}
+
+
 
 export default Flag;

src/components/Flag/Flag.module.scss

@@ -1,5 +1,33 @@
 @import '../../global.styles.scss';
 
-.Flag {
+// .Flag {
+//     // float: left;
+//     background-size: cover;
+//     // width: 350px;
+//     // width: 100%;
+//     // width: auto;
+//     height: 150px;
+//     width: 350px;
+//     // height: auto;
+// }
+
+.standard {
+    // background-size: cover;
     width: 100%;
+    height: 100%;
+    // display: block;
+    // object-fit: cover;
+
+    // width: auto;
+    // justify-self: stretch;
+    // background-size: auto;
+}
+
+.resize {
+    // width: 120%;
+    // height: 90%;
+    object-fit: cover;
+    // width: 100%;
+    // height: 100%;
+    // background-color: red;
 }

src/components/Grid/Grid.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+import Country from "../Country/Country";
+
+
+import styles from "./Grid.module.scss";
+
+const Grid = props => (
+    <div className={styles.Grid}>
+        {props.countries.map(country => (
+            <Country
+                key={country.alpha3Code}
+                theme={props.theme}
+                flag={country.flag}
+                name={country.name}
+                population={country.population}
+                region={country.region}
+                capital={country.capital}
+            />
+        ))}
+    </div>
+)
+
+
+export default Grid;

src/components/Grid/Grid.module.scss

@@ -0,0 +1,16 @@
+@import '../../global.styles.scss';
+
+.Grid {
+    display: grid;
+    // grid: repeat(100px, 4) / auto-flow 120px;
+    // grid-template-columns: 300px 300px 300px 300px;
+    grid-gap: 3em;
+    grid-template-columns: repeat(4, 300px);
+    grid-auto-rows: 400px;
+    // grid-template-rows: initial;
+    // grid-template-rows: auto auto auto auto;
+    // height: calc(100vh - 10px);
+    // height: 100%;
+    // place-items: start stretch;
+    // align-content: end;
+}

src/global.styles.scss

@@ -41,3 +41,14 @@ $bold: 800; // Bold
 $border-radius: 0.3rem;
 $element-box-shadow-light: 0 5px 10px -5px #ccc, 0 -1px 10px -5px #eee;
 $element-box-shadow-dark: 0 5px 10px -5px #222, 0 -1px 10px -5px #222;
+
+body {
+    box-sizing: border-box;
+    margin: 20px;
+    width: 100%;
+    // height: 100vh;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}