<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400" rel="stylesheet">
<body>
  <section class="top">
    <header>
      <h1>😂</h1><h1>MEME GENERATOR</h1><h1>😂</h1>
    </header>
    <hr>
    <form action="#" id="meme-form">
      <h4>Fill out the form to design your meme</h4>
      <div>
        <label for="img-url">Image URL: </label>
        <input type="text" id="img-url" placeholder="What is the URL for your image?">
      </div>
      <div>
        <label for="top-text">Top Text: </label>
        <input type="text" id="top-text" placeholder="[Optional] What text do you want at the top of your meme?">
      </div>
      <div>
        <label for="bottom-text">Bottom Text: </label>
        <input type="text" id="bottom-text" placeholder="[Optional] What text do you want at the bottom of your meme?">
      </div>
      <button type="submit">Make your meme!</button>
    </form>
  </section>

  <section id="memes-section">
  </section>
  <footer class="text-center"> Coded and designed con mucho amor <i class="far fa-hand-spock"></i> by <a href="https://goyanespaula.github.io/" target="a_blank">Paula Goyanes</a> 2018 <i class="far fa-copyright"></i>
  </footer>
</body>
/* GENERAL STYLES */
body {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-size: 14px;
  font-weight: 300;
}

a, button {
  cursor: pointer;
}

a:link, a:visited {
  color: inherit;
}

header {
  display: flex;
  justify-content: center;
  text-align: center;
}

h1 {
  font-family: Impact, Charcoal, sans-serif;
  font-size: 40px;
  padding: 20px 10px 5px;
  text-shadow: 2px 2px 5px #444;
  margin: 0;
}

h4 {
  font-size: 14px;
  font-weight: 300;
  margin: 0;
  padding: 15px 0 8px;
}

hr {
  margin: 0;
  color: rgba(250, 250, 250, .5);
  border: .5px solid;

}

.top {
  background: linear-gradient(to right, rgba(52, 148, 230, 1), rgba(236, 110, 173, 1));
  padding: 0px 40px 20px;
  color: white;
}

/* FORM STYLES */

input {
  display: block;
  margin: 5px 0 10px;
  width: 100%;
  padding: 5px;
  font-family: Raleway, sans-serif;
  font-size: 13px;
  font-weight: 300;
  border: none;
  border-radius: 3px;
}

input:focus {
  outline-color: #999;
  outline-width: 2px;
}

form button {
  color: white;
  font: Raleway, sans-serif;
  font-size: 14px;
  font-weight: 200;
  background-color: rgba(0, 0, 0, .4);
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: 5px;
}

form button:hover {
  background-color: rgba(0, 0, 0, .2);
}

/* MEME STYLES */
.meme-block {
  display: inline-block;
  margin: 5px 8px;
  position: relative;
}

.remove-button {
  color: #444;
  margin-right: 8px;
}

.download-link {
  color: #444;
  margin-right: 8px;
}

.remove-button:hover {
  color: #ED1C24;
}

.download-link:hover {
  color: #3755D3;
}

.new-meme {
  color: white;
  text-shadow:
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000;
  font-family: Impact, Charcoal, sans-serif;
  font-size: 28px;
  margin: 2px 0 0;
}

.top-caption, .bottom-caption {
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  left: 0;
  right: 0;
  margin: 30px 5px 10px;
  z-index: 9000;
  line-height: 30px;
}

.top-caption {
  top: 0;
}

.bottom-caption {
  bottom: 0;
}

/* Bring images closer together */

#memes-section {
  line-height: 0;
  column-count: 3;
  column-gap: 0px; 
  margin: 15px 8px;
  padding-bottom: 35px;
}

#memes-section img {
  width: 100%;
  height: auto;
}

  @media (max-width: 1200px) {
    #memes-section {
    column-count: 3;
    }
  }
  @media (max-width: 1000px) {
    #memes-section {
    column-count: 2;
    }
  }
  @media (max-width: 800px) {
    #memes-section {
    column-count: 1;
    }
  }

/*FOOTER STYLES */

footer {
  color: white;
  background: linear-gradient(to right, rgba(52, 148, 230, .8), rgba(236, 110, 173, .8));
  font-size: 13px;
  padding: 10px;
  position: fixed;
  width: 100%;
  bottom: 0;
  text-align: center;
  z-index: 9001;
}

footer a:hover {
  color: #555;
}
function setupRemoveButton(removeButton, removeIcon) {
  removeButton.setAttribute("class", "remove-button");
  removeIcon.setAttribute("class", "fas fa-trash-alt");
  removeButton.appendChild(removeIcon);
}

function setupDownloadButton(downloadLink, downloadIcon) {
  downloadLink.setAttribute("class", "download-link");
  downloadLink.setAttribute("download", "meme");
  downloadIcon.setAttribute("class", "fas fa-download");
  downloadLink.appendChild(downloadIcon);
}

function createMeme(memeImg, topCaption, bottomCaption, imgUrl) {
  topCaption.innerText = document.getElementById("top-text").value;
  topCaption.setAttribute("class", "top-caption");
  memeImg.setAttribute("src", imgUrl);
  bottomCaption.innerText = document.getElementById("bottom-text").value;
  bottomCaption.setAttribute("class", "bottom-caption");
}

function renderMeme(newMeme, memeImg, topCaption, bottomCaption) {
  newMeme.appendChild(topCaption);
  newMeme.appendChild(memeImg);
  newMeme.appendChild(bottomCaption);
  newMeme.setAttribute("class", "new-meme");
}

function submitForm(event, memeForm) {
  event.preventDefault();

  var memesSection = document.getElementById("memes-section");

  var memeBlock = document.createElement("div");
  var newMeme = document.createElement("figure");
  var removeIcon = document.createElement("i");
  var downloadIcon = document.createElement("i");
  var removeButton = document.createElement("a");
  var downloadLink = document.createElement("a");
  var topCaption = document.createElement("figcaption");
  var bottomCaption = document.createElement("figcaption");
  var memeImg = document.createElement("img");
  var imgUrl = document.getElementById("img-url").value;

  setupRemoveButton(removeButton, removeIcon);
  setupDownloadButton(downloadLink, downloadIcon);
  createMeme(memeImg, topCaption, bottomCaption, imgUrl);
  renderMeme(newMeme, memeImg, topCaption, bottomCaption);
  
  memeBlock.setAttribute("class", "meme-block");
  memeBlock.appendChild(removeButton);
  memeBlock.appendChild(downloadLink);
  memeBlock.appendChild(newMeme);

  memesSection.appendChild(memeBlock);

  memesSection.addEventListener("click", function(event) {
    if (event.path[2].className === "remove-button") {
      event.path[2].parentNode.remove();
    }
  });

  memeForm.reset();

  html2canvas(newMeme, {
    onrendered: function(canvas) {
      canvas.className = "html2canvas";
      var image = canvas.toDataURL("image/jpeg");
      downloadLink.href = image;
    },
    useCORS: true
  });
}

window.onload = function() {
  var memeForm = document.getElementById("meme-form");

  memeForm.addEventListener("submit", function(event) { 
    submitForm(event, memeForm); 
  });
};

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/1051565/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.