day 8 finished state in react. 🚀

08_Day_States/08_states_boilerplate/src/country.js

@@ -0,0 +1,87 @@
+import React from "react";
+import countriesData from "./data/countries";
+
+const styles = {
+    wrapper : {
+        width : 500,
+        height : 500,
+        backgroundColor: 'red',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column'
+    },
+    buttonStyle : {
+        backgroundColor: 'rebeccapurple',
+        padding: '1rem',
+        color: 'white',
+        borderRadius: 12,
+        border: 'none',
+        cursor:'pointer'
+    }
+}
+
+
+
+export class Country extends React.Component {
+    state = {
+        count: 0,
+        styles: {
+            backgroundColor: 'black',
+            color: 'white',
+        },
+        random: 0
+    }
+
+    changeBackground = () => {
+        let styles = {...this.state.styles};
+
+        if( this.state.styles.backgroundColor === 'black' && this.state.styles.color === 'white' ){
+            styles.backgroundColor = 'white'
+            styles.color = 'black'
+            this.setState({ styles });
+        } else {
+            styles.backgroundColor = 'black'
+            styles.color = 'white'
+            this.setState({ styles });
+        }
+    }
+
+    changeCountry = () => {
+        const randomNumber = Math.floor(Math.random() * countriesData.length);
+        this.setState({ random: randomNumber})
+    }
+
+    render() {
+        return(
+        <div
+            style={{
+                backgroundColor:this.state.styles.backgroundColor,
+                color:this.state.styles.color,
+                display:'flex',
+                alignItems:'center',
+                flexDirection: 'column'
+            }}>
+                leleley
+                <button onClick={ () => this.changeBackground() }>farmalolo</button>
+                <div style={ styles.wrapper }>
+                    {
+                        countriesData.map( (country, index ) => {
+                            if( index === this.state.random ) {
+                                return (
+                                    <div>
+                                        <img src={ country.flag } alt={'seks'} width='100'/>
+                                        <div>
+                                            leblebleb : <span>{country.capital}</span>
+                                        </div>
+                                    </div>
+                                );
+                            }
+                        })
+                    }
+                    <button style={ styles.buttonStyle } onClick={ () => this.changeCountry() } >Choose a country</button>
+                </div>
+            </div>
+        )
+    }
+}

08_Day_States/08_states_boilerplate/src/data/countries.js

@@ -1,10 +1,11 @@
-export const countriesData = [
+
+const countriesData = [
   {
     name: 'Afghanistan',
     capital: 'Kabul',
     languages: ['Pashto', 'Uzbek', 'Turkmen'],
     population: 27657145,
-    flag: 'https://restcountries.eu/data/afg.svg',
+    flag: 'https://st.myideasoft.com/idea/gj/33/myassets/products/150/tuzsuz-leblebi.jpg?revision=1598520160',
     currency: 'Afghan afghani',
   },
   {
@@ -2011,3 +2012,5 @@ export const countriesData = [
     currency: 'Botswana pula',
   },
 ]
+
+export default countriesData

08_Day_States/08_states_boilerplate/src/index.js

@@ -3,6 +3,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import Mine from './mine'
 import asabenehImage from './images/asabeneh.jpg'
+import {Country} from "./country";
 
 // Fuction to show month date year
 
@@ -210,25 +211,14 @@ class App extends React.Component {
   minusOne = () => {
     this.setState({ count: this.state.count - 1 })
   }
+
   handleTime = () => {
     alert(this.showDate(new Date()))
   }
+
   greetPeople = () => {
     alert('Welcome to 30 Days Of React Challenge, 2020')
   }
-  changeBackground = () => {
-    let styles = {...this.state.styles};
-
-      if( this.state.styles.backgroundColor === 'black' && this.state.styles.color === 'white' ){
-        styles.backgroundColor = 'white'
-        styles.color = 'black'
-        this.setState({ styles });
-      } else {
-        styles.backgroundColor = 'black'
-        styles.color = 'white'
-        this.setState({ styles });
-      }
-  }
 
   render() {
     const data = {
@@ -247,19 +237,8 @@ class App extends React.Component {
     const user = { ...data.author, image: asabenehImage }
 
     return (
-      <div className='app' style={{backgroundColor:this.state.styles.backgroundColor,color:this.state.styles.color}}>
-        <Header data={data} />
-        <Main
-          user={user}
-          techs={techs}
-          handleTime={this.handleTime}
-          greetPeople={this.greetPeople}
-          changeBackground={this.changeBackground}
-          addOne={this.addOne}
-          minusOne={this.minusOne}
-          count={this.state.count}
-        />
-        <Mine/>
+      <div className='app'>
+        <Country/>
       </div>
     )
   }

08_Day_States/08_states_boilerplate/src/mine.js

@@ -6,6 +6,12 @@ const cat = 'https://www.smithsstationah.com/imagebank/eVetSites/Feline/01.jpg';
 
 export default class Mine extends React.Component {
 
+    // declaring state
+    state = {
+        count: 0,
+        imgLink: cat
+    }
+
     changeUrl = () => {
         if( this.state.imgLink === dog ){
             this.setState({ imgLink : cat })
@@ -14,14 +20,10 @@ export default class Mine extends React.Component {
         } 
     }
 
-  // declaring state
-  state = {
-    count: 0,
-    imgLink: cat
-  }
   render() {
     // accessing the state value
     const count = this.state.count
+
     return (
       <div className='App'>
         <img src={ this.state.imgLink } alt='cat' />