@@ -83,6 +85,112 @@ class TechList extends React.Component {
}
}
+class PrintImages extends React.Component {
+
+
+ constructor(props) {
+ super(props)
+ }
+
+
+
+ state = {
+ country: {
+ imageLink: `https://countryflagsapi.netlify.app/flag/${countriesAppended[132].code}.svg`,
+ countryName: `${countriesAppended[132].name}`,
+ capital: `${countriesAppended[132].capital}`,
+ population: `${countriesAppended[132].population}`,
+ currency: `${countriesAppended[132].currency}`,
+ },
+ }
+
+
+
+
+ printCountries = () => {
+ // console.log('country ISO codes', countryIsoCode[0])
+
+ //console.log('countires appended', countriesAppended[0].code)
+ // console.log('random number', getRandomIntInclusive(0,140))
+ function getRandomIntInclusive(min, max) {
+ const minCeiled = Math.ceil(min);
+ const maxFloored = Math.floor(max);
+ return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
+ }
+ let randomNumberOne = getRandomIntInclusive(0,138)
+ let randomNumberTwo = getRandomIntInclusive(0,138)
+ let randomCountry = {
+ imageLink: `https://countryflagsapi.netlify.app/flag/${countriesAppended[132].code}.svg`,
+ countryName: `${countriesAppended[132].name}`,
+ capital: `${countriesAppended[132].capital}`,
+ population: `${countriesAppended[132].population}`,
+ currency: `${countriesAppended[132].currency}`,
+ }
+
+
+ console.log('random country',randomCountry)
+ let firstCountryObject = {
+ imageLink: `https://countryflagsapi.netlify.app/flag/${countriesAppended[randomNumberOne].code}.svg`,
+ countryName: `${countriesAppended[randomNumberOne].name}`,
+capital: `${countriesAppended[randomNumberOne].capital}`,
+population: `${countriesAppended[randomNumberOne].population}`,
+currency: `${countriesAppended[randomNumberOne].currency}`,
+}
+
+
+let secondCountryObject = {
+ imageLink: `https://countryflagsapi.netlify.app/flag/${countriesAppended[randomNumberTwo].code}.svg`,
+ countryName: `${countriesAppended[randomNumberTwo].name}`,
+capital: `${countriesAppended[randomNumberTwo].capital}`,
+population: `${countriesAppended[randomNumberTwo].population}`,
+currency: `${countriesAppended[randomNumberTwo].currency}`,
+}
+console.log('firstCountry object',firstCountryObject)
+ console.log('second country object', secondCountryObject)
+
+
+ // let firstCountry = `https://countryflagsapi.netlify.app/flag/${countriesAppended[randomNumberTwo].code}.svg`
+ //let secondCountry = `https://countryflagsapi.netlify.app/flag/${countriesAppended[randomNumberTwo].code}.svg`
+
+ //let imageLink = this.state.imageLink === firstCountry ? secondCountry :firstCountry
+ //let countryName = this.state.country.countryName
+ let country = this.state.country == firstCountryObject ? secondCountryObject: firstCountryObject
+ this.setState ({
+ country
+
+ })
+
+ //console.log(firstCountry )
+ // console.log(firstCountry)
+
+
+
+ }
+ //imageLink = this.printCountries()
+ render() {
+
+ return (
+ <>
+
+
+
+
+
+
+
Country Name:{this.state.country.countryName}
+
Capital:{this.state.country.capital}
+
Population:{this.state.country.population}
+
Currency:{this.state.country.currency}
+
+
+
+
+
+
+ )
+ }
+}
+
// Main Component
// Class Component
class Main extends React.Component {
@@ -96,6 +204,7 @@ class Main extends React.Component {
greetPeople,
handleTime,
changeBackground,
+ printCountries,
bgColor
} = this.props
@@ -103,20 +212,18 @@ class Main extends React.Component {
-
Prerequisite to get started react.js:
-
-
-
-
+
+
+
+
+
+
+
+
+
+