<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);
});
};
This Pen doesn't use any external JavaScript resources.