Random Meme Generator

This example will generate random meme's every time user click on Generate button. This example uses Imgflip Api to fetch image and return get data in JSON format. Users entered text will display above the image and entered number will increase the font size dynamically.

Demo

Prepare Project for Random Meme Generator

To create the example project for this example, open command prompt, navigate to a convenient location, and run the command as shown below :

create-react-app example14

src\App.js

import React from "react";
import MemeGenerator from "./MemeGenerator";
import "./App.css";

class App extends React.Component {
  render() {
    return <MemeGenerator />
  }
}

export default App;

src\MemeGenerator.js

import React, { Component } from "react";

class MemeGenerator extends Component {
  constructor() {
    super();
    this.state = {
      font_size: "22",
      topText: "",
      bottomText: "",
      randomImg: "http://i.imgflip.com/1bij.jpg",
      allMemeImgs: []
    };
  }
  handleChange = event => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  };
  handleClick = () => {
    let randomNumber = Math.floor(
      Math.random() * this.state.allMemeImgs.length
    );
    this.setState({ randomImg: this.state.allMemeImgs[randomNumber].url });
  };
  increaseFont = () => {};
  componentDidMount() {
    fetch("https://api.imgflip.com/get_memes")
      .then(data => data.json())
      .then(response => {
        const { memes } = response.data;
        this.setState({ allMemeImgs: memes });
      });
  }
  render() {
    console.log(this.state.font_size);
    return (
      <div>
        <div className="meme-form">
          <input
            type="text"
            name="topText"
            placeholder="top text"
            onChange={this.handleChange}
            value={this.state.topText}
          />
          <br />
          <input
            type="text"
            name="bottomText"
            placeholder="bottom text"
            onChange={this.handleChange}
            value={this.state.bottomText}
          />
          <br />
          <input
            type="number"
            name="font_size"
            placeholder="font size"
            onChange={this.handleChange}
            value={this.state.font_size}
          />
          <button onClick={this.handleClick}>Generate!</button>
        </div>
        <div className="meme">
          <h2
            style={{ fontSize: Number(this.state.font_size) }}
            className="top"
          >
            {this.state.topText}
          </h2>
          <img src={this.state.randomImg} alt="" />
          <h2
            style={{ fontSize: Number(this.state.font_size) }}
            className="bottom"
          >
            {this.state.bottomText}
          </h2>
        </div>
      </div>
    );
  }
}

export default MemeGenerator;

src\App.css

Replace the placeholder content of App.css with given below content :

body {
  margin: 0;
}

.meme {
  position: relative;
  width: 100%;
  margin-top: 1.2em;
  text-align: center;
}

.meme > img {
  width: 95%;
  max-width: 40em;
  max-height: 40em;
  margin-bottom: 1.5em;
  background: cover;
  background-repeat: no-repeat;
}

.meme > h2 {
  position: absolute;
  max-width: 36em;
  text-align: center;
  left: 49%;
  transform: translateX(-50%);
  margin: 0.3em 0;
  padding: 0 0px;
  font-family: impact, sans-serif;
  text-transform: uppercase;
  color: white;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000,
    -2px 2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000,
    2px 2px 5px #000;
}

.meme > .bottom {
  bottom: 0.9em;
}

.meme > .top {
  top: 0.1em;
}

.meme-form {
  width: 90%;
  margin: 1.4em 0em 1em 1.4em;
  display: inline-block;
  justify-content: space-between;
}

.meme-form > input {
  border: 1.5px solid;
  border-radius: 5px;
  margin: 0.4em;
  display: block;
  width: 40%;
  min-width: 20em;
  height: 3em;
}

.meme-form > button {
  height: 2.1em;
  width: 8em;
  margin-top: 1em;
  margin-left: 0.1em;
  border: 3px rgb(221, 210, 210) solid;
  font-family: VT323, monospace;
  font-size: 20px;
  letter-spacing: 1.5px;
  color: white;
  background: rgb(138, 32, 32);
}
.meme-form > button:hover {
  background: rgba(138, 32, 32, 0.8);
}
.meme-form > input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-family: VT323, monospace;
  font-size: 1.3em;
  text-align: left;
  padding-left: 5px;
}
.meme-form > input::-moz-placeholder {
  /* Firefox 19+ */
  font-family: VT323, monospace;
  font-size: 25px;
  text-align: left;
}
.meme-form > input:-ms-input-placeholder {
  /* IE 10+ */
  font-family: VT323, monospace;
  font-size: 25px;
  text-align: left;
}
.meme-form > input:-moz-placeholder {
  /* Firefox 18- */
  font-family: VT323, monospace;
  font-size: 25px;
  text-align: left;
}

Demo

Most Helpful This Week

Voting System Google Map Compass Clock Data Table Arrange Game Bill and Discount Calculator Tic Tac Toe Random Quote Generator Calculator Search and Filter List Records Carousel Weather Finder Form Validation Memory Game Dice Game Search Autocomplete Form Container

Golang Tutorial

Golang Reference

Beego Framework

Random Meme Generator

Most Helpful This Week

Most Helpful This Week