I've been working on a project to create a meme generator without using canvas, as part of my DOM manipulation practice in vanilla JavaScript. I'm facing challenges in adding text to the user-submitted pictures and need some guidance in achieving this.
Despite trying methods like innerText, innerHTML, and appendChild, I seem to encounter issues with either replacing the image or getting errors. My intuition tells me that I might have to use JavaScript to add the picture and CSS to style it, possibly by adding a class with classList.
console.log('Currentfile: memegenerator');
let img = document.getElementsByTagName('img');
addEventListener('submit', function(e) {
e.preventDefault();
let UIurl = document.getElementById('picurl');
let memeToBe = UIurl.value;
let img = document.createElement('img');
img.setAttribute('src', memeToBe);
img.setAttribute('class', 'meme');
// Rest of the JavaScript code for handling image and text addition
// CSS styles for the meme generator interface
h1 {
color: navy;
}
/* Remainder of CSS styles */
.container {
position: relative;
text-align: center;
}
<main class="main">
<h1 class="center">MEME GENERATOR!</h1>
<hr class="rounded" />
<form action="#" class="form">
<label for="text_top">Text Upper:</label>
<input type="text" name="text_top" id="text_top" /><br />
<label for="text_lower">Text Lower:</label>
<input type="text" name="text_lower" id="text_lower" /><br />
<label for="picturl">Picture:</label>
<input type="url" name="picurl" id="picurl" /><br /><br /><br />
<input class="button " type="submit" value="Add Meme:" /><br />
<hr />
</form>
<div id="location"></div>
<hr class="border_lower" />
<p class="center"><small>Thanks for visiting!</small></p>
</main>