Your boss wants you to make a meme generator. Enter an image URL, and captions t
ID: 3851433 • Letter: Y
Question
Your boss wants you to make a meme generator. Enter an image URL, and captions to go on the top and bottom. Please nish all steps by following instructions.
1 Create your HTML le.
Please create your HTML le, name it as meme.html. Please remember the extension should be .html. And then add the following parts to your HTML le.
1.1 Create a basic structure
HTML • Declaration line. • • head & title •
1.2 Create a section In the section, there are three elements:
• A element to display the image
• A to display top caption.
• A to display bottom caption.
1 1.3 Create a section In the section, there are three elements:
• When text is entered into the . The src of updates.
• When text is entered into the . The text of updates.
• When text is entered into the . The text of updates.
• Please add a text label above or in front of each input element to indicate what is it. (image URL, top text, bottom text)
1.4 You can add a heading title at the top of your page, eg: “Welcome to my meme Generator!”
1.5 The above sections are required, besides these, you can add additional sections for your webpage based on your design.
2 Create your jQuery le. Please create your jQuery le, name it as meme.js. Please remember the extension should be .js. And then add the following parts to your jQuery le.
2.1 Create a $(document).ready(function(){}); $(document).ready(function(){ });
2.2 Create a keyup event handler for #top-text element inside the function of $document. • attach a keyup() event handler to the #top-text input so that it can respond to when a user types a key. • Inside the keyup event handler, get the text entered into the #top-text input using .val(). • Then set it as the text of using .text().
2 2.3 Create a keyup event handler for #bottom-text element inside the function of $document. • attach a keyup() event handler to the #bottom-text input so that it can respond to when a user types a key. • Inside the keyup event handler, get the text entered into the #bottom-text input using .val(). • Then set it as the text of using .text().
2.4 Create a keyup event handler for #image-url element inside the function of $document. • attach a keyup() event handler to the #image-url input so that it can respond to when a user types a key. • Inside the keyup event handler, get the text entered into the #image-url input using .val(). • Then set it as the src attribute of the element using .attr().
2.5 Create a fadeTo action for element inside the function of $document. • attach a hover() event handler to the image. • Inside the hover event handler, please add two functions as the input arguments. • The rst function fade the image slowly to opacity 0.2 when the mouse hover over the image. • The second function fade the image slowly back to opacity 1 when the mouse hover away from the image.
2.6 Link JavaScript le to HTML le by using .
3 Create your CSS le. Please create your CSS le, name it as meme.css. Please remember the extension should be .css. And then add the following parts to your css le.
3 3.1 Style your webpage by using following properties, these are optional choice. • width: • height: • background-color: • border-radius: • positon • border • font-family
3.2 Style your webpage by using following selectors, these are optional choice. • element selector • id selector • class selector
3.3 Link your CSS le to HTML le by using
Explanation / Answer
memu.html
<html>
<head>
<title>Basic HTML</title>
<link rel="stylesheet" href="meme.css">
</head>
<script src="meme.js"></script>
<body>
<h2>Welcome to my meme Generator!</h2>
<div id="meme1">
<img id="img1"/>
<h1 id="top-caption"></h1>
<h1 id="bottom-caption"></h1>
</div>
<div id="meme2">
ImageURL
<input id="image-url"/>
top text
<input id="top-text"/>
bottom text
<input id="bottom-text"/>
</div>
</body>
</html>
memu.js:
$(document).ready(function(){
$("top-text").keyup(function(){
$('#top-caption').text($('#top-text').val());
});
$("bottom-text").keyup(function(){
$('#bottom-caption').text($('#bottom-text').val());
});
$("image-url").keyup(function(){
$('#img1').attr("src",$('#image-url').val());
});
$( "#img1" ).hover(function() {
$(this).mouseenter(function(){
$("#img1").fadeTo("slow",0.2);
});
$(this).mouseleave(function(){
$("#img1").fadeTo("slow",1);
});
});
});
memu.css:
#img1{
width:400px;
height:400px;
background-color:#fff;
border-radius:3px;
position:relative;
border:1px solid #ccc;
font-family: "Times New Roman", Georgia, Serif;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.