Patch 0.1.3.1 (#371)

Author: SchoolyB

client/assets/jsonBtn.png

@@ -40,23 +40,22 @@ export default function CountryWeather(props: Props) {
     <div className='genInfoLocationAndWeather metaDataSection'>
       <div className='capital'>
         <h6>Capital</h6>
-        <u>{props.capital}</u>
+        {props.capital}
       </div>
       <br />
       {/* start of location information */}
       <div className='location'>
         <h6>Location of Capital</h6>
-        Latitude:<u>{weather.lat}</u> Longitude: <u>{weather.lon}</u>
+        Latitude:{weather.lat} Longitude: {weather.lon}
       </div>
       <br />
       {/* start of weather information */}
       <div className='weather'>
-        <h6>Current Weather {props.capital}</h6>
-        {/* {weather.main} */}
-        {/* <br /> */}
-        Currently <u>{weather.temp}°F</u>
+        <h6>Current Weather In {props.capital}</h6>
+        
+        Currently {weather.temp}°F
         <br />
-        Feels like <u>{weather.feels_like}°F</u>
+        Feels like {weather.feels_like}°F
       </div>
     </div>
   )

client/src/components/CountryWeather.tsx

@@ -7,6 +7,7 @@ import getCountryTopic from '../../includes/countryTopicImports/countryTopics'
 import MarkdownIt from 'markdown-it'
 import PageNotFound from '../[...pathname]'
 import download from '../../../assets/downloadBtn.png'
+import jsonBtn from '../../../assets/jsonBtn.png'
 
 // USING VITE'S GLOB METHOD TO STORE IMAGES FROM FOLDERS INTO VARIABLES
 const simpleCountryMaps = import.meta.glob('../../../assets/simpleMaps/*.png', {
@@ -129,12 +130,6 @@ export default function countryPage(
   // set 'alt' attribute for each flag
   const flagAltValue = `The Flag of ${state.name}`
 
-  // DOWNLOAD BUTTON STUFF
-  const downloadBtn = document.getElementById('downloadBtn') // targets download button
-  downloadBtn?.addEventListener('click', () => {
-    print() // opens browser print dialog
-  })
-
   // if there is an error when trying to go to load
   // data for a country  that does not exist,
   // return the PageNotFound component
@@ -171,34 +166,34 @@ export default function countryPage(
         {/* region & sub region information */}
         <div className='genInfoRegionAndSubregion metaDataSection'>
           <div className='region'>
-            <h6>Region</h6> <u>{state.region}</u>
+            <h6>Region</h6> {state.region}
           </div>
           <div className='subregion'>
-            <h6>Subregion</h6> <u>{state.subregion}</u>
+            <h6>Subregion</h6> {state.subregion}
           </div>
         </div>
 
         {/* population information */}
         <div className='genInfoPopulation metaDataSection'>
           <h6>Population</h6>
-          Approx.<u>{state.population}</u>
+          Approx.{state.population}
         </div>
 
         {/* demonym information */}
         <div className='genInfoDemonym metaDataSection'>
           <h6>Demonym</h6>
-          <u>{state.demonym}</u>
+          {state.demonym}
         </div>
 
         {/* iso code information */}
         <div className='genInfoISOCodes metaDataSection'>
           <div className='alpha2Code'>
             <h6>ISO 2 Code</h6>
-            <u>{state.alpha2Code}</u>
+            {state.alpha2Code}
           </div>
           <div className='alpha3Code'>
             <h6>ISO 3 Code</h6>
-            <u>{state.alpha3Code}</u>
+            {state.alpha3Code}
           </div>
         </div>
 
@@ -210,15 +205,15 @@ export default function countryPage(
         <div className='genInfoCurrency metaDataSection'>
           <div className='currencyName'>
             <h6>Currency Name</h6>
-            <u>{currencyInfo?.name}</u>
+            {currencyInfo?.name}
           </div>
           <div className='currencySymbol'>
             <h6>Currency Symbol</h6>
-            <u>{currencyInfo?.symbol}</u>
+            {currencyInfo?.symbol}
           </div>
           <div className='currencyCode'>
             <h6>Currency Code</h6>
-            <u>{currencyInfo?.code}</u>
+            {currencyInfo?.code}
           </div>
         </div>
 
@@ -242,9 +237,14 @@ export default function countryPage(
 
         <div className='downloadBtnContainer'>
           <a>
-            <img id='downloadBtn' src={download} alt='Download Button' />
+	    {/* onClick event handler opens browser print dialog */}
+            <img onClick={print} className='downloadBtn' src={download} alt='Download Button' />
           </a>
+          <a href = {`https://schoolyb.github.io/v1/data/country/${id}.json`}>
+          <img src={jsonBtn} alt='JSON Button' className='jsonBtn' />
+        </a>
         </div>
+        
       </div>
 
       {/* END OF META DATA CONTAINER TEXT */}

client/src/pages/Country/[id].tsx

@@ -1,18 +1,24 @@
+#countryEnglishName {
+  margin-top: .6em;
+  // margin-bottom: 1em;
+  letter-spacing: .04em;
+  font-size: 5em;
+}
+
 .countryInfo {
   text-align: center;
   color: black;
-  background-color: #89939E;
+  margin-bottom: 2.5em;
   border-top: .2em solid black;
-  border-bottom: .2em solid black;
 
 }
 
-.countryInfo>h1 {
-  font-size: 3.5em;
-}
+
 
 #countryInfoFlag {
-  border-radius: 20px;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  
 }
 
 .topic {
@@ -22,9 +28,11 @@
   padding-bottom: 2px;
   word-wrap: break-word;
   margin-top: 2em;
+
 }
 .topic>h3 {
-  font-size: 40px;
+  font-size: 3.5em;
+  margin-bottom: .5em;
 
 }
 
@@ -41,10 +49,12 @@ color: black;
   display: flex;
   background-color: #89939E;
   flex-direction: column;
-  width: 25.5%;
+  width: 20%;
   float: right;
   border-radius: 25px;
   margin-right: .5em;
+  border: .5em solid black;
+  
 }
 
 .overallCountryInfoContainer {
@@ -85,11 +95,12 @@ border-bottom: .2em solid black;
 
 @media only screen and (max-width: 1000px) {
   .metaDataContainer {
-    width: 100%;
+    width: 25%;
     margin-right: 0;
   }
   .countryInfo {
     width: 100%;
+    font-size: .8em;
   }
   .countryFlagsAndMaps{
     width: 100%;
@@ -99,6 +110,23 @@ border-bottom: .2em solid black;
   }
 }
 
+
+@media only screen and (max-width: 600px) {
+  .metaDataContainer {
+    width: 100%;
+    margin-right: 0;
+  }
+  .countryInfo {
+    width: 100%;
+    font-size: .8em;
+  }
+  .countryFlagsAndMaps{
+    width: 100%;
+  }
+  .topic{
+    width: 100%;
+  }
+}
 .downloadBtnContainer{
   text-align: center;
   margin: auto;
@@ -107,19 +135,30 @@ border-bottom: .2em solid black;
   margin: auto;
 }
 
-#downloadBtn{
+.downloadBtn{
   cursor: pointer;
   width: 5%;
   height:auto;
   margin: auto;
   margin-top: 1em;
   margin-bottom: 1em;
-  
-  animation: downloadBtnShakeAnimation 1s infinite;
+  margin-right: 1em;
+  animation: downloadAndJsonAnimation 1s infinite;
 
 }
+.jsonBtn{
+  cursor: pointer;
+  width: 7%;
+  height:auto;
+  margin: auto;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  
+  animation: downloadAndJsonAnimation 1s infinite;
+}
+
 
-@keyframes downloadBtnShakeAnimation {
+@keyframes downloadAndJsonAnimation {
   0% {
     transform: translateX(0)
   }

client/src/styles/_countryPages.scss

@@ -40,6 +40,7 @@
   grid-template-columns: 1fr;
   place-items: center;
   width: 100%;
+
 }
 
 #nav a {
@@ -50,3 +51,12 @@
   font-weight: 300;
 }
 
+.rs-icon:hover{
+  cursor: pointer;
+  
+}
+
+.rs-navbar-brand{
+  // color: #89939e;
+
+}

client/src/styles/_header.scss

@@ -18,7 +18,6 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  // min-height: 100vh;
   overflow-x: hidden;
 
 }