const form = document.querySelector('#memeForm');
const imageInput = document.querySelector('#imageURL');
const topText = document.querySelector('#textOnTop');
const bottomText = document.querySelector('#textOnBottom');
const results = document.querySelector('#results');
form.addEventListener('submit', function(e) {
e.preventDefault();
const meme = document.createElement('div');
const image = document.createElement('img');
const textTop = document.createElement('div');
const textBottom = document.createElement('div');
const removeBtn = document.createElement('button');
//allows file to be read by the DOM as an image?
image.src = imageInput.value;
textTop.classList.add('textTop');
textTop.innerHTML = topText.value;
textBottom.classList.add('textBottom');
textBottom.innerHTML = bottomText.value;
//allows the button created in line 16 and appended to the 'meme' div in line 40 to remove all contained within the parent 'meme' div
removeBtn.innerText = "Delete Meme";
removeBtn.addEventListener('click', function(e) {
e.target.parentElement.remove();
});
//Does classList.add allow the append methods that follow to be added to 'meme'?
meme.classList.add('meme');
meme.append(image);
meme.append(textTop);
meme.append(textBottom);
meme.append(removeBtn);
//appends ALL meme inputs to the specified location(section tag)?
results.append(meme);
//clears form's inputs once form is submitted
form.reset();
});
//cool and colorful mousemove feature!
document.addEventListener('mousemove', function(e) {
// console.log('e.pageX, e.pageY');
const r = Math.round(e.pageX * 255 / window.innerWidth);
const b = Math.round(e.pageY * 255 / window.innerHeight);
const color = `rgb(${r}, 0, ${b})`;
document.body.style.backgroundColor = color;
});h1 {
font-family: 'Montserrat', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
h4 {
font-family: 'Montserrat', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
label {
font-weight: bolder;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
.meme {
position: relative;
}
.textTop {
position: absolute;
top: 30px;
right: 200px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
z-index: 2;
font-size: 40px;
}
.textBottom {
position: absolute;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 40px;
z-index: 2;
bottom: 100px;
}
.meme image {
max-width: 100%;
z-index: 1;
}
input {
width: 50%;
box-sizing: border-box;
margin-bottom: 20px;
}
.submitBtn {
width: 12%;
float: right;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Generator</title>
<link rel="stylesheet" href="meme.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
</head>
<body>
<div>
<h1>Meme Generator</h1>
<h4>Fill out the form to start creating memes!</h4>
</div>
<form action="" id="memeForm">
<p>
<label for=""> Image URL
<input type="url" placeholder="What's the URL for your meme?" id="imageURL">
</label>
</p>
<p>
<label for=""> Text on Top
<input type="text" placeholder="(Optional) What text do you want at the top of your meme?" id="textOnTop">
</label>
</p>
<p>
<label for=""> Text on Bottom
<input type="text" placeholder="(Optional) What text do you want at the bottom of your meme?" id="textOnBottom">
</label>
</p>
<p>
<input type="submit" value="Create Meme!" ></input>
</p>
</form>
<!-- saw many people use canvas but when I tried to use that tag my image wouldn't load -->
<div id="results"></div>
<script src="meme.js"></script>
</body>
</html>First post here and a relatively new coder so bear with me.
I've been working on this meme generator and so far it can take an image URL and text and add those to the specified div that results in something that is on the verge of looking like a meme.
I have 2 main problems:
Once I fill in the inputs and press the "Create Meme!" button, the image and text are appended to their respective and elements contained within the "meme" div but I'm not able to create another meme until I delete the meme using the "Delete Meme" button I've created in my js file. Essentially, the "Create Meme!" button is not clickable once a meme has been generated. One of the goals of this project is for a user to add multiple memes to the page by submitting the form multiple times.
I can't figure out how to position the text that is shown on the top and bottom of the image correctly. I'm sure if I were to play with the positioning in CSS more it would look more like a standard meme but I'd rather have the text be automatically centered in the top and bottom of the image. For example, if I adjust the size of the page the image and text don't adjust along with it.
Please let me know if I can provide more clarity on my issue, I've been stuck here since last night and my googling efforts are becoming more and more futile.
CodePudding user response：
The clicking of the button problem is the fact your div overlays the button so when you click, you click on the div, not the button.
For the layout, there is many ways to tackle it. One way is just to use some relative and absolute positioning.
.wrapper {
position: relative;
width: 80%;
}
.wrapper p {
position: absolute;
left: 0;
text-align: center;
width: 100%;
font-size: 1.4em;
}
.wrapper img {
width: 100%;
}
.wrapper p.top {
top: 0;
}
.wrapper p.bottom {
bottom: 0;
}<div >
<p >Hello World</p>
<img src="http://placekitten.com/400/300" />
<p >Bacon Bacon Bacon Bacon Bacon Bacon Bacon Bacon</p>
</div>