Create your HTML le. Please create your HTML le, name it as meme.html. Please re
ID: 3851410 • Letter: C
Question
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. • <html></html> • head & title • <body></body>
1.2 Create a <div id=“meme1”></div> section
In the <div id=“meme1”> section, there are three elements: • A <img id=“img1”> element to display the image • A <h1 id=“top-caption”></h1> to display top caption. • A <h1 id=“bottom-caption”></h1> to display bottom caption.
1
1.3 Create a <div id=“meme2”></div> section
In the <div id=“meme2”> section, there are three <input> elements: • When text is entered into the <input id= “image-url”>. The src of <img id=“img1”> updates. • When text is entered into the <input id= “top-text”>. The text of <h1 id=“topcaption”></h1> updates. • When text is entered into the <input id= “bottom-text”>. The text of <h1 id=“bottomcaption”></h1> 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.
Explanation / Answer
<html>
<head>
<title>Basic HTML</title>
</head>
<script>
function myFunction(){
var topText = document.getElementById('top-text');
var bottomText = document.getElementById('bottom-text');
var topCap = document.getElementById('top-caption');
var bottomCap = document.getElementById('bottom-caption');
topCap.innerHTML = topText.value;
bottomCap.innerHTML = bottomText.value;
}
function loadImg(url){
var img1 = document.getElementById('img1');
var imageUrl = document.getElementById('image-url');
img1.src=imageUrl.value;
}
</script>
<body>
<h2>Welcome to my meme Generator!</h2>
<div id="meme1">
<img id="img1" src=""/>
<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>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.