Countries list complete

src/App.js

@@ -41,7 +41,7 @@ const App = () => {
     };
 
     return (
-        <div className="App">
+        <div className={theme === 'light' ? 'App light' : 'App dark'}>
             <Header theme={theme} toggleTheme={toggleTheme} />
             <Route
                 exact
@@ -63,21 +63,7 @@ const App = () => {
                 path="/:country"
                 component={() => <h1>Country details page should go HERE</h1>}
             />
-            {/* Added for demonstration purposes */}
-            {/* <h1>Search By Name</h1>
-            Searching for Spain: {searchByName(countries, 'Spain')}
-            <h1>Search By Name</h1>
-            Searching for foo: {searchByName(countries, 'foo')}
-            <h1>Countries</h1> */}
-            {/* <Dropdown
-                buttonText="Filter by Region"
-                list={[]}
-                selectedItem={region}
-                onSelect={setRegion}
-                theme={theme}
-            />
-            <h1>{region}</h1> */}
-            {/* Added for demonstration purposes END*/}
+
         </div>
     );
 };

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,30 @@ 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>
+
+
+    <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%;
+    }
+    h1 {
+        font-size: 1.1rem;
+    }
+    ul {
+        list-style-type: none;
+        margin-top: 0.5rem;
+    }
+    li {
+        font-size: 0.9rem;
+        display: flex;
+    }
+    strong {
+        font-weight: $medium;
+    }
 }
-h1 {
-    margin-left: 20px;
-}
-ul {
-    list-style-type: none;
-}
-li {
+.infoBlock {
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
     display: flex;
-    margin-left: 20px;
+    flex-direction: column;
+    justify-content: space-around;
 }
 .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,10 @@
 @import '../../global.styles.scss';
 
-.Flag {
+.standard {
     width: 100%;
+    height: 100%;
+}
+
+.resize {
+    object-fit: cover;
 }

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,8 @@
+@import '../../global.styles.scss';
+
+.Grid {
+    display: grid;
+    grid-gap: 3em;
+    grid-template-columns: repeat(4, 300px);
+    grid-auto-rows: 400px;
+}

src/index.css

@@ -1,20 +1,25 @@
 /* css reset */
 * {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  max-width: 100%;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    max-width: 100%;
 }
 
 body {
-  margin: 0;
-  /* Global Font Family Set to Project Specified */
-  font-family: 'Nunito Sans', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    /* Global Font Family Set to Project Specified */
+    font-family: 'Nunito Sans', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    box-sizing: border-box;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+        monospace;
 }