REACT - MEME GENERATOR

    // IMG
    

    // INDEX.JS
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App.js'

    ReactDOM.render( <App/>, document.getElementById('root'));

    // APP.JS
    //CONTAINER COMPONENT ARCHITECTURE
    import React from 'react'
    import Header from './components/Header'
    import MemeGenerator from './components/MemeGenerator'


    function App(){
    return(
        <div>
        <Header/>
        <MemeGenerator/>
        </div>
    )
    }

export default App;

    

    // HEADER.JS 
    import React from 'react';

    function Header(){
        return (
       <header>
           <img 
            src="http://i.imgflip.com/1bij.jpg"
            alt="Problem?"
            />
           <p>Meme Generator

       </header>
        )
    }

    export default Header
    

    // MEMEGENERATOR.JS

    import React, {Component} from 'react';

    class  MemeGenerator extends Component{
        constructor(){
            super()
            this.state = {
                topText: "",
                bottomText:"",
                randomImg: "http://i.imgflip.com/1bij.jpg",
                allMemeImgs: []
            }
    
            this.handleChange = this.handleChange.bind(this)
            this.handleSubmit = this.handleSubmit.bind(this)
        }
    
        componentDidMount(){
            fetch("https://api.imgflip.com/get_memes")
            .then(response => response.json())
            .then(response => {
                const {memes} = response.data
                console.log(memes[8])
                this.setState({allMemeImgs: memes})
            })
        }
    
        handleChange(event){
            console.log("Working")
            const {name, value} = event.target
            this.setState({[name]:value})
        }
    
        handleSubmit(event){
            event.preventDefault()
            const randNum = Math.floor(Math.random() * this.state.allMemeImgs.lengh)
            // console.log(randNum)
            const randMemeImg = this.state.allMemeImgs[randNum].url
            this.setState({randomImg: randMemeImg})
        }
    
        render(){
            return(
            <div>
                <form className="meme-form" onSubmit={this.handleSubmit}>
                    <input type="text" name="topText" placeholder="top Text" value={this.state.topText} onChange={this.handleChange}/>
                    <input type="text" name="bottomText" placeholder="bottom Text" value={this.state.bottomText} onChange={this.handleChange}/>
    
                    <button>Gen</button>
                </form>
                <div className="meme">
                    <img 
                    src={this.state.randomImg}
                    alt="Problem?"
                    />
                    <h2 className="top">{this.state.topText}</h2>
                    <h2 className="bottom">{this.state.bottomText}</h2>
                </div>
            </div>
            )
        
    }
    }
    
    export default MemeGenerator
    

    // INDEX.CSS
    header {
        height: 100px;
        display: flex;
        align-items: center;
        background: #6441a5;
        background: -webkit-linear-gradient(to right, #2a0845, #6441a5);
        background: linear-gradient(to right, #2a0845, #6441a5);
      }
      
      header > img {
        height: 80%;
        margin-left: 100px;
      }
      
      header > p {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: whitesmoke;
        font-size: 50px;
        margin-left: 60px;
      }
      
      .meme {
        position: relative;
        width: 90%;
        margin: auto;
      }
      
      .meme > img {
        width: 100%;
      }
      
      .meme > h2 {
        position: absolute;
      }
      
      form input,
      button {
        height: 30px;
      }
      
      button {
        border: none;
        background-color: #6441a5;
        color: white;
        font-size: 25px;
      }
      
      .top {
      }
      
      .bottom {
      }