diff --git a/src/App.css b/src/App.css index c43b70c..f8ca7b4 100644 --- a/src/App.css +++ b/src/App.css @@ -169,6 +169,10 @@ header > p { background: #6441A5; } +.meme-form > button:disabled { + background: #ddd; + } + .meme-form > input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-family: VT323, monospace; font-size: 25px; diff --git a/src/MemeGen/Form.js b/src/MemeGen/Form.js index 186fbc9..83ea28a 100644 --- a/src/MemeGen/Form.js +++ b/src/MemeGen/Form.js @@ -1,7 +1,8 @@ import React from "react" function Form(props) { - const { topText, bottomText, handleChange } = props + const { topText, bottomText, handleChange, memesListLength } = props + return (
) } diff --git a/src/MemeGen/MemeGenerator.js b/src/MemeGen/MemeGenerator.js index 5b619af..0381f7e 100644 --- a/src/MemeGen/MemeGenerator.js +++ b/src/MemeGen/MemeGenerator.js @@ -47,6 +47,7 @@ class MemeGenerator extends Component { handleChange = (event) => { const { name, value } = event.target + if (name === "searchQuote") { const filteredAMIs = this.state.allMemeImgs.filter(function (element) { @@ -66,13 +67,16 @@ class MemeGenerator extends Component { }) } - } else if ( name === "randomImg") { - const randomMeme = this.state.filteredMemes[Math.floor(Math.random() * Math.floor(this.state.filteredMemes.length))] + } else if ( name === "randomImg" && this.state.filteredMemes.length) { - this.setState({ - topText: randomMeme.name, - [name]: randomMeme.url - }) + const randomMeme = this.state.filteredMemes[Math.floor(Math.random() * Math.floor(this.state.filteredMemes.length))] + + this.setState({ + topText: randomMeme.name, + [name]: randomMeme.url + }) + + console.log(this.state.topText) } else if( name === "selectedImg") { const pickedImg = this.state.filteredMemes.find(element => element.url === value) @@ -89,15 +93,19 @@ class MemeGenerator extends Component { bottomText: value }) } + + + } render() { const { loading, topText, bottomText, randomImg, allMemeImgs, filteredMemes, searchQuote } = this.state + const filteredMemesLength = this.state.filteredMemes.length const pickImage = allMemeImgs.find(element => element.url === randomImg) return (