diff --git a/src/App.js b/src/App.js index d52bcf4..276e04a 100644 --- a/src/App.js +++ b/src/App.js @@ -41,7 +41,7 @@ const App = () => { }; return ( -
+
{ path="/:country" component={() =>

Country details page should go HERE

} /> - {/* Added for demonstration purposes */} - {/*

Search By Name

- Searching for Spain: {searchByName(countries, 'Spain')} -

Search By Name

- Searching for foo: {searchByName(countries, 'foo')} -

Countries

*/} - {/* -

{region}

*/} - {/* Added for demonstration purposes END*/} +
); }; diff --git a/src/components/CardBottom/CardBottom.js b/src/components/CardBottom/CardBottom.js new file mode 100644 index 0000000..3a2ed0e --- /dev/null +++ b/src/components/CardBottom/CardBottom.js @@ -0,0 +1,23 @@ +import React from "react"; + +import styles from "./CardBottom.module.scss"; + +const CardBottom = props => ( +
+

{props.name}

+ +
+) + + +export default CardBottom; \ No newline at end of file diff --git a/src/components/CardBottom/CardBottom.module.scss b/src/components/CardBottom/CardBottom.module.scss new file mode 100644 index 0000000..358c46f --- /dev/null +++ b/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; +} diff --git a/src/components/Country/Country.js b/src/components/Country/Country.js index 352f00b..1919de6 100644 --- a/src/components/Country/Country.js +++ b/src/components/Country/Country.js @@ -5,20 +5,30 @@ import Flag from "../Flag/Flag"; const Country = props => (
- - -

{props.name}

-
    + + + {props.name} +
    +

    {props.name}

    +
    • - Population: {props.population}
      + Population:  + {props.population} +
    • - Region: {props.region}
      + Region:  + {props.region} +
    • - Capital: {props.capital}
      + Capital:  + {props.capital} +
      • -
    +
+
+
) diff --git a/src/components/Country/Country.module.scss b/src/components/Country/Country.module.scss index 2acef06..2c3b4ee 100644 --- a/src/components/Country/Country.module.scss +++ b/src/components/Country/Country.module.scss @@ -1,19 +1,34 @@ @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; @@ -21,8 +36,7 @@ li { } .dark { - color: $white; - background-color: $dark-blue; + color: $white; box-shadow: $element-box-shadow-dark; } diff --git a/src/components/Flag/Flag.js b/src/components/Flag/Flag.js index 9bf26b3..b006d4d 100644 --- a/src/components/Flag/Flag.js +++ b/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 => ( - {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 ( + + {altText} + ) + +} + + export default Flag; \ No newline at end of file diff --git a/src/components/Flag/Flag.module.scss b/src/components/Flag/Flag.module.scss index 9121e5c..f480019 100644 --- a/src/components/Flag/Flag.module.scss +++ b/src/components/Flag/Flag.module.scss @@ -1,5 +1,10 @@ @import '../../global.styles.scss'; -.Flag { +.standard { width: 100%; + height: 100%; +} + +.resize { + object-fit: cover; } diff --git a/src/components/Grid/Grid.js b/src/components/Grid/Grid.js new file mode 100644 index 0000000..74b63c9 --- /dev/null +++ b/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 => ( +
+ {props.countries.map(country => ( + + ))} +
+) + + +export default Grid; \ No newline at end of file diff --git a/src/components/Grid/Grid.module.scss b/src/components/Grid/Grid.module.scss new file mode 100644 index 0000000..f26501c --- /dev/null +++ b/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; +} diff --git a/src/index.css b/src/index.css index 27697f9..696855c 100644 --- a/src/index.css +++ b/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; }