JQuery Projects | DIY Meme

Well, the title says it allll. The project I’m about to present to you will give you the power to create…. Memes!!! 

Let’s begin…

Make your folder in which you will be placing all the HTML, CSS and others. Are you done? 

When you finish, make 3 different files. Name one of the files: index.html, style.css, and app.js. I’m using Sublime Text for this. 

On the index.html file, you can copy the code below:

Notice the numbering to prevent confusion.

For the style.css file, copy the following:

---

---

---

html, body {
margin: 0;
padding: 0;
font-family: “Open Sans”, sans-serif;
}

.header {
background: #ffe780;
margin-bottom: 40px;
padding: 10px 0;
}

.header img {
width: 90px;
margin: -10px 10px 0 0;
}

.header h1 {
margin: 0;
display: inline-block;
}

.meme {
position: relative;
}

.top-caption,
.bottom-caption {
font-family: Impact, sans-serif;
color: #fff;
text-shadow: #000 0px 0px 6px;
text-transform: uppercase;
text-align: center;
font-size: 50px;
}

.top-caption {
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
}

.bottom-caption {
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
}

.tool h2 {
margin-top: 0;
margin-bottom: 20px;
font-size: 25px;
}

.tool form label {
margin-bottom: 10px;

}

.tool input {
border-radius: 0;
border: 0;
border-bottom: 5px solid #ff7171;
box-shadow: none;
}

input[type=”text”]:focus {
border: 0;
border-bottom: 5px solid #ff7171;
outline: 0;
box-shadow: none;
}

 

---

---

---

 

Lastly, for the app.js file, copy the following code:

---

---

---

var main = function() {

$(‘#top-text’).keyup(function() {
var top = $(this).val();
$(‘.top-caption’).text(top);
});

$(‘#bottom-text’).keyup(function() {
var bottom = $(this).val();
$(‘.bottom-caption’).text(bottom);
});

$(‘#image-url’).keyup(function() {
var image = $(this).val();
$(‘#meme’).attr(‘src’, image);
});

};

$(document).ready(main);

 

---

---

---

 

Now, save your project. Open your folder which you’ve placed all these files and double click on the HTML file. This will open up and you will get something like this…..

If you will notice, there is this (cute) dog(gie) up there on the screenshot with some text. What you have to do is search for a photo that you want, right click to copy photo address and paste it on the Image Url. Add some text. Experiment! Try changing the colors in the style.css to change colours and placing!

Yours truly,

L.O.A.S.H