This is the used for upload,crop,cut then display image,
but I want to display cropped image and (x1,y1,), (x2,y2) coordinates of cropped image.
<!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, shrink-to-fit=no">
<title>Cropper.js</title>
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css
">
<style>
.page {
margin: 1em auto;
max-width: 768px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.box {
padding: 0.5em;
width: 100%;
margin:0.5em;
}
.box-2 {
padding: 0.5em;
width: calc(100%/2 - 1em);
}
.options label,
.options input{
width:4em;
padding:0.5em 1em;
}
.btn{
background:white;
color:black;
border:1px solid black;
padding: 0.5em 1em;
text-decoration:none;
margin:0.8em 0.3em;
display:inline-block;
cursor:pointer;
}
.hide {
display: none;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Cropper with a range of aspect ratio</h1>
<div>
<main class="page">
<h2>Upload ,Crop and save.</h2>
<!-- input file -->
<div class="box">
<input type="file" id="file-input">
</div>
<!-- leftbox -->
<div class="box-2">
<div class="result" id="image"></div>
</div>
<!--rightbox-->
<div class="box-2 img-result hide">
<form><img alt="" class="cropped" src=""></form>
</div>
<!-- input file -->
<div class="box">
<div class="options hide">
<label> Width</label>
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<!-- save btn -->
<button class="btn save hide" >Save</button>
<!-- download btn -->
</div>
</main>
</div>
</div><br><br><br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js
"></script>
<script>
// vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', (e) => {
if (e.target.files.length) {
// start file reader
const reader = new FileReader();
reader.onload = (e)=> {
if(e.target.result){
// create new image
let img = document.createElement('img');
img.id = 'image';
img.src = e.target.result
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// show save btn and options
save.classList.remove('hide');
options.classList.remove('hide');
// init cropper
cropper = new Cropper(img);
// cropped value
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click',(e)=>{
e.preventDefault();
// get result to data uri
let imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
// remove hide class of img
cropped.classList.remove('hide');
img_result.classList.remove('hide');
// show image cropped
cropped.src = imgSrc;
dwn.classList.remove('hide');
dwn.download = 'imagename.png';
dwn.setAttribute('value',imgSrc);
});
</script>
</body>
</html>
Please can anyone help me? How do I find (x1,y1,), (x2,y2) coordinates of cropped image? I have some idea about that: First find (x1,y1,) and width and height of cropped image then x2=x1+width , y2=y1+width, but I don't know how to apply. Please help me with how apply this to Javascript or jQuery.
Working example with both: absolute canvas coordinates and relative image coordinates:
// vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', (e) => {
if (e.target.files.length) {
// start file reader
const reader = new FileReader();
reader.onload = (e) => {
if (e.target.result) {
// create new image
let img = document.createElement('img');
img.id = 'image';
img.src = e.target.result
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// show save btn and options
save.classList.remove('hide');
options.classList.remove('hide');
// init cropper
cropper = new Cropper(img);
// cropped value
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', (e) => {
let cropLeft = cropper.cropBoxData.left;
let cropTop = cropper.cropBoxData.top;
let cropRight = cropLeft + cropper.cropBoxData.width;
let cropBottom = cropTop + cropper.cropBoxData.height;
let info = "Crop region (absolute canvas coordinates):\n" +
"(x1, y1) = (" + cropLeft + ", " + cropTop + ")\n" +
"(x2, y2) = (" + cropRight + ", " + cropBottom + ")\n";
let zoom = cropper.image.offsetHeight / cropper.image.naturalHeight;
let naturalWidth = (cropRight - cropLeft) / zoom;
let naturalHeight = (cropBottom - cropTop) / zoom;
let relativeLeft = (cropper.cropBoxData.left - cropper.canvasData.left);
let relativeTop = (cropper.cropBoxData.top - cropper.canvasData.top);
let naturalLeft = relativeLeft / zoom;
let naturalTop = relativeTop / zoom;
let naturalRight = naturalLeft + naturalWidth;
let naturalBottom = naturalTop + naturalHeight;
info += "\nCrop region (image coordinates):\n" +
"(x1, y1) = (" + naturalLeft + ", " + naturalTop + ")\n" +
"(x2, y2) = (" + naturalRight + ", " + naturalBottom + ")\n";
alert(info);
e.preventDefault();
// get result to data uri
let croppedImg = cropper.getCroppedCanvas({
width: img_w.value // input value
});
let imgSrc = croppedImg.toDataURL();
// remove hide class of img
cropped.classList.remove('hide');
img_result.classList.remove('hide');
// show image cropped
cropped.src = imgSrc;
});
.page {
margin: 1em auto;
max-width: 768px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.box {
padding: 0.5em;
width: 100%;
margin: 0.5em;
}
.box-2 {
padding: 0.5em;
width: calc(100%/2 - 1em);
}
.options label,
.options input {
width: 4em;
padding: 0.5em 1em;
}
.btn {
background: white;
color: black;
border: 1px solid black;
padding: 0.5em 1em;
text-decoration: none;
margin: 0.8em 0.3em;
display: inline-block;
cursor: pointer;
}
.hide {
display: none;
}
img {
max-width: 100%;
}
<!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, shrink-to-fit=no">
<title>Cropper.js</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css
">
</head>
<body>
<div class="container">
<h1>Cropper with a range of aspect ratio</h1>
<div>
<main class="page">
<h2>Upload ,Crop and save.</h2>
<!-- input file -->
<div class="box">
<input type="file" id="file-input">
</div>
<!-- leftbox -->
<div class="box-2">
<div class="result" id="image"></div>
</div>
<!--rightbox-->
<div class="box-2 img-result hide">
<form><img alt="" class="cropped" src=""></form>
</div>
<!-- input file -->
<div class="box">
<div class="options hide">
<label> Width</label>
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<!-- save btn -->
<button class="btn save hide">Save</button>
<!-- download btn -->
</div>
</main>
</div>
</div><br><br><br><br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js
"></script>
</body>
</html>
Related
Sorry if this is a duplicate I'm new to JS and HTML and I can't figure out what else to do.
I am trying to make (mostly from JS) a way to upload images onto any background you like, then saving them as one image. For now, I am experimenting by putting an image of the scream onto a canvas and then trying to upload an image of my choosing. Currently when I press save image, it saves ONLY the background. Also the background and uploaded image both overflow out of the card, but removing position:absolute in css stops them from overlaying. I've tried stuff with MarvinJ or even just trying to not use canvas, but can't get it to work.
Sorry for the big question, how do I merge an uploaded image and an image of my choosing onto a card and save them as one file?
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = "text/css" href="blank.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title> Petra image </title>
</head>
<body>
<div class = "wrap">
<div class = "card-container">
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" class = "Card_Image" alt="Image preview...">
</div>
<div class="card_main">
<div id="picHolder">
<img src="" id = "pic" class = "test" height="300" alt="Image preview2" object-fit: cover;>
<img id="scream" class = "scream" width="300" height="480" src="img_the_scream.jpg" alt="The Scream" object-fit: cover;>
</div>
</div>
</div>
</div>
<script src="blank.js"></script>
</body>
CSS:
html, body {
margin: 0;
width:100%;
padding:0;
}
.wrap {
display: flex;
flex-direction: column;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.card_main {
width: 300px;
height: 420px;
margin: 12px;
background-color: rgb(0, 0, 0);
padding: 10px;
overflow: hidden;
}
.scream{
position: absolute;
opacity: 0.2;
border: 1px solid #000000;
z-index: 1;
}
Javascript:
function previewFile() {
var preview = document.querySelector('img');
var preview2 = document.querySelector('.test')
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
preview2.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("pic");
var img2 = document.getElementById("scream2");
ctx.drawImage(img, 10, 10);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 10, 10);
}
I am making a thing where when you click on the hidden image it appears. Every time that I do it, though, the image just stays hidden. I know that I am actually clicking the image because I made it so that it follows under my cursor. It also works in reverse. If the image is visible and I click on it it turns invisible.
Here is my HTML:
document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
function animation(){
var boom = document.getElementById("boom");
boom.style.display = "none";
document.getElementById("boom").src = "file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png";
}
body {
background-color: #000000;
}
header {
background: grey;
padding: 10px;
margin: 0px;
font-size: 13px
}
#boom{
display: block;
position: absolute;
transform: translate(-50%,-50%);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Boom! Salamon</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<h2 style="color: white; text-align: center">Boom! Salamon.<br>Click in the area below to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Boom!.png' height="250" width="250"></img>
<script src="app.js"></script>
</body>
</html>
What's happening?
yes as #Abin mentioned you have not added any code to unhide it I have modified your
html and js file to add this functionality like when you click on text it will be visible again.
Note: i have added that visible condition on click of header text but you can define it anywhere.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Styles.css">
<title>Boom! Salamon</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<h2 id='clickme' style="color: white; text-align: center">Boom! Salamon.<br>Click here to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Boom!.png' height="250" width="250"></img>
<script src="app.js"></script>
</body>
</html>
app.js
document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
function animation(){
var boom = document.getElementById("boom");
boom.style.visibility = 'hidden';
document.getElementById("boom").src = 'file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png';
}
document.getElementById("clickme").onclick = function() {
boom.style.visibility = 'visible';
}
in above i have used pure js.
There was nothing in the code you have provided to unhide the image, I have added a sample code that works as per your req. Click on the text, and the image will appear on the bottom.
/* document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
*/
var clickEl = document.getElementById('click-el')
clickEl.addEventListener('click', function(){
var imgEl = document.getElementById('boom');
imgEl.style.display = 'block';
})
/*
function animation(){
var boom = document.getElementById("boom");
boom.style.display = "none";
document.getElementById("boom").src = "file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png";
} */
body {
background-color: #000000;
}
header {
background: grey;
padding: 10px;
margin: 0px;
font-size: 13px
}
#boom{
display: none;
}
<header>
<h2 id='click-el' style="color: white; text-align: center">Boom! Salamon.<br>Click here to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg' height="250" width="250"/>
I am beginner to web development
I have a problem with my lightbox, i need to use ev.target.nextElementSibling and ev.target.prevElementSibling to go to the next/previous image by clicking at the next arrow.png (img)/ prev arrow.png(img), i have tried everything but i don't know how. When i'm clicking at the image it's zoom in (that's ok) but when i click on the arrow the image is hidding but i want to go to the next/prev image.
const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');
for (let index = 0; index < imgs.length; index++) {
const img = imgs[index];
img.addEventListener('click', showLightbox);
}
function showLightbox(ev) {
const prevEl = ev.target.prevElementSibling;
const nextEl = ev.target.nextElementSibling;
console.log(ev)
const lightbox = document.querySelector('.lightbox');
const img = document.querySelector('.lightbox img');
const imgUrl = ev.target.src;
img.src = imgUrl;
lightbox.classList.add('visible');
}
lightbox.addEventListener('click', hideLightbox);
function hideLightbox() {
lightbox.classList.remove('visible');
}
arrowNext.addEventListener('click', nextPhoto);
function nextPhoto(ev) {
const arrowNext = document.querySelector('.arrowNext');
const img = document.querySelector('.arrowNext img');
const imgUrl = ev.target.src;
img.src = imgUrl;
const next = ev.target.nextElementSibling;
}
body {
background: #eee;
}
.lightbox {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
justify-content: center;
align-items: center;
display: flex;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
transform: scale(0);
}
.visible {
transform: scale(1);
}
.lightbox img {
max-width: 80%;
max-height: 80%;
}
.arrowNext {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="gallery">
<img src="/img/img1.jpg" alt="photo1">
<img src="/img/img2.jpg" alt="photo2">
<img src="/img/img3.jpg" alt="photo3">
<img src="/img/img4.jpg" alt="photo4">
</section>
<div class="lightbox">
<div class="arrowPrev">
<img src="/img/prev arrow.png" alt="">
</div>
<img src="/img/img5.jp" alt="">
<div class="arrowNext">
<img src="/img/next arrow.png" alt="">
</div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
Be aware that ev.target is the the element the mouse clicks on, in your case the arrow. You're looking to get the next image, not the next arrow.
I'd advise using an index variable to get which image is presented and then doing document.querySelectorAll('img')[index+1] to get the next image.
With what your code could give:
(Be aware that ev.stopPropagation() is needed to prevent closing the lightbox when the arrow is clicked.)
const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');
var index = 0;
for (let index = 0; index < imgs.length; index++) {
const img = imgs[index];
img.addEventListener('click', (e) => {showLightbox(e, index)});
}
function showLightbox(ev, i) {
const prevEl = ev.target.prevElementSibling;
const nextEl = ev.target.nextElementSibling;
const lightbox = document.querySelector('.lightbox');
const img = document.querySelector('.lightbox img');
const imgUrl = ev.target.src;
img.src = imgUrl;
index = i;
lightbox.classList.add('visible');
}
lightbox.addEventListener('click', hideLightbox);
function hideLightbox() {
lightbox.classList.remove('visible');
}
arrowNext.addEventListener('click', nextPhoto);
function nextPhoto(ev) {
ev.stopPropagation();
index++;
const arrowNext = document.querySelector('.arrowNext');
const img = document.querySelector('.arrowNext img');
const imgUrl = imgs[index].src;
img.src = imgUrl;
}
body {
background: #eee;
}
.lightbox {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
justify-content: center;
align-items: center;
display: flex;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
transform: scale(0);
}
.visible {
transform: scale(1);
}
.lightbox img {
max-width: 80%;
max-height: 80%;
}
.arrowNext {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="gallery">
<img src="/img/img1.jpg" alt="photo1">
<img src="/img/img2.jpg" alt="photo2">
<img src="/img/img3.jpg" alt="photo3">
<img src="/img/img4.jpg" alt="photo4">
</section>
<div class="lightbox">
<div class="arrowPrev">
<img src="/img/prev arrow.png" alt="">
</div>
<img src="/img/img5.jp" alt="">
<div class="arrowNext">
<img src="/img/next arrow.png" alt="" style="background:red;padding:20px">
</div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
The program I am creating is a meme generator. I have a div container set up with display:grid with a few tags inside of that which act as the top and bottom text for the meme. I'm trying to dynamically set the background image for the grid cell using plain vanilla JS. When I attach the link inside the CSS file it works perfectly, but using JS the background-image is never set when i check inside the browser. I put a big arrow so you can see where I am attempting to set the image
const imageLink = document.querySelector('#imageLink');
const topText = document.querySelector('#topText');
const bottomText = document.querySelector('#bottomText');
const memeDiv = document.querySelector('#meme');
//listener for submit
document.addEventListener("submit", function(e) {
e.preventDefault();
//if the user doesn't enter an image, or if they don't enter any text, don't generate the meme when they submit.
if (imageLink.value === "") {
return;
} else if (topText === "" && bottomText === "") {
return;
}
console.log(imageLink.value);
//create elements
var div = document.createElement("div");
//set attribute for div containing our memes
div.setAttribute("id", "meme");
//When the page loads apply the users photo to the background of the grid
window.addEventListener('DOMContentLoaded', function() {
memeDiv.style.backgroundImage = `url(${imageLink.value})`; // < -- -- -
});
//create text and remove button for the memes
const top = document.createElement("p"); //for top text
const bottom = document.createElement("p"); //for bottom text
const removeBtn = document.createElement("input");
//remove button attributes
removeBtn.setAttribute("id", "remove");
removeBtn.setAttribute("type", "image");
removeBtn.setAttribute("height", "200px");
removeBtn.setAttribute("width", "200px");
removeBtn.setAttribute(
"src",
"https://www.freeiconspng.com/uploads/x-png-33.png"
);
//set attributes for text
top.setAttribute("id", "top");
top.innerText = topText.value;
bottom.setAttribute("id", "bottom");
bottom.innerText = bottomText.value;
//put the top and bottom text with the remove button together with the same div
div.appendChild(top);
div.appendChild(bottom);
div.appendChild(removeBtn);
//append to the div
document.querySelector("#memeContainer").appendChild(div);
//reset
imageLink.value = "";
topText.value = "";
bottomText.value = "";
})
document.addEventListener("click", function(e) {
if (e.target.id === "remove") {
e.target.parentElement.remove();
} else {
return;
}
})
* {
margin: 0px;
}
#formContainer {
background-color: blue;
margin-bottom: 5px;
text-align: center;
}
h1 {
text-align: center;
background-color: blue;
margin: 0px;
}
#memeContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 300px);
grid-gap: 5px;
}
#top,
#bottom,
#remove {
position: relative;
display: inline;
}
#top {
left: 225px;
z-index: 1;
font-family: Impact;
font-size: 40px;
/* color:white; */
}
#bottom {
top: 300px;
left: 225px;
z-index: 2;
font-family: Impact;
font-size: 40px;
/* color:white; */
}
#remove {
top: -150px;
left: 180px;
z-index: 3;
/* filter: opacity(1%); */
}
#remove:hover {
z-index: 3;
filter: opacity(25%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Generator</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>MEME GENERATOR</h1>
<div id="formContainer">
<form>
<input id="imageLink" type="text" placeholder="please link to an image">
<input id="topText" type="text" placeholder="TOP TEXT">
<input id="bottomText" type="text" placeholder="BOTTOM TEXT">
<button type="submit">submit</button>
</form>
</div>
<div id="memeContainer"></div>
<script src="app.js"></script>
</body>
</html>
The DOMContentLoaded event is only called once whenever all HTML have been loaded. So you are only adding an event listener which never fires and thus nothing happens.
window.addEventListener('DOMContentLoaded', function() {
memeDiv.style.backgroundImage = `url(${imageLink.value})`;
});
Remove the event listener and correct the memeDiv variable name to div and your code will run.
div.style.backgroundImage = `url(${imageLink.value})`;
const imageLink = document.querySelector('#imageLink');
const topText = document.querySelector('#topText');
const bottomText = document.querySelector('#bottomText');
const memeDiv = document.querySelector('#meme');
//listener for submit
document.addEventListener("submit", function(e) {
e.preventDefault();
//if the user doesn't enter an image, or if they don't enter any text, don't generate the meme when they submit.
if (imageLink.value === "") {
return;
} else if (topText.value === "" && bottomText.value === "") {
return;
}
console.log(imageLink.value);
//create elements
var div = document.createElement("div");
//set attribute for div containing our memes
div.setAttribute("id", "meme");
//When the page loads apply the users photo to the background of the grid
div.style.backgroundImage = `url(${imageLink.value})`; // < -- -- -
//create text and remove button for the memes
const top = document.createElement("p"); //for top text
const bottom = document.createElement("p"); //for bottom text
const removeBtn = document.createElement("input");
//remove button attributes
removeBtn.setAttribute("id", "remove");
removeBtn.setAttribute("type", "image");
removeBtn.setAttribute("height", "200px");
removeBtn.setAttribute("width", "200px");
removeBtn.setAttribute(
"src",
"https://www.freeiconspng.com/uploads/x-png-33.png"
);
//set attributes for text
top.setAttribute("id", "top");
top.innerText = topText.value;
bottom.setAttribute("id", "bottom");
bottom.innerText = bottomText.value;
//put the top and bottom text with the remove button together with the same div
div.appendChild(top);
div.appendChild(bottom);
div.appendChild(removeBtn);
//append to the div
document.querySelector("#memeContainer").appendChild(div);
//reset
imageLink.value = "";
topText.value = "";
bottomText.value = "";
})
document.addEventListener("click", function(e) {
if (e.target.id === "remove") {
e.target.parentElement.remove();
} else {
return;
}
})
* {
margin: 0px;
}
#formContainer {
background-color: blue;
margin-bottom: 5px;
text-align: center;
}
h1 {
text-align: center;
background-color: blue;
margin: 0px;
}
#memeContainer {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 300px);
grid-gap: 5px;
}
#top,
#bottom,
#remove {
position: relative;
display: inline;
}
#top {
left: 225px;
z-index: 1;
font-family: Impact;
font-size: 40px;
/* color:white; */
}
#bottom {
top: 300px;
left: 225px;
z-index: 2;
font-family: Impact;
font-size: 40px;
/* color:white; */
}
#remove {
top: -150px;
left: 180px;
z-index: 3;
/* filter: opacity(1%); */
}
#remove:hover {
z-index: 3;
filter: opacity(25%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meme Generator</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>MEME GENERATOR</h1>
<div id="formContainer">
<form>
<input id="imageLink" type="text" placeholder="please link to an image">
<input id="topText" type="text" placeholder="TOP TEXT">
<input id="bottomText" type="text" placeholder="BOTTOM TEXT">
<button type="submit">submit</button>
</form>
</div>
<div id="memeContainer"></div>
<script src="app.js"></script>
</body>
</html>
I have created a marquee using javascript. It will move from right to left of the screen displaying a number of images. The images don't move smoothly like in a marquee but jerks as if in an automated slide slow.
const slideContainer = document.querySelector('.container');
const slide = document.querySelector('.slides');
const interval = 1000;
let slides = document.querySelectorAll('.slide');
let index = 1;
const firstClone = slides[0].cloneNode(true);
const lastClone = slides[slides.length-1].cloneNode(true);
firstClone.id = 'first-clone';
lastClone.id = 'last-clone';
slide.append(firstClone);
slide.prepend(lastClone);
const slidewidth = slides[index].clientWidth;
slide.style.transform = `translateX(${-slidewidth * index}px, 0)`;
slide.style.transition = `.7s`;
const startSlide = ()=>{
setInterval(() => {
index++;
slide.style.transform = `translateX(${-slidewidth * index}px)`;
slide.style.transition = `.7s`;
}, interval);
};
slide.addEventListener('transitionend', ()=>{
slides = document.querySelectorAll('.slide');
console.log(index);
if (slides[index].id===firstClone.id) {
slide.style.transition = `none`;
index = 1;
slide.style.transform = `translateX(${-slidewidth * index}px)`;
}
});
startSlide();
.{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
margin: 0 auto;
width:40vw;
height: 85vh;
border: 2px solid #8e6c5e;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.container.hide{
display: none;
}
.slides{
display: flex;
height: 100%;
}
.slide{
/*object-fit: contain;*/
min-width: 100%
}
.slide img{
width: 100%;
height: 100%;
display: flex;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>cards of fate</title>
</head>
<body>
<div class="container">
<div class="slides">
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2015/05/09/07/31/virgin-759376_960_720.jpg" alt="">
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2015/05/09/07/32/bull-759381_960_720.jpg" alt="">
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2015/05/09/07/30/twins-759375_960_720.jpg" alt="">
</div>
<div class="slide">
<img src="https://cdn.pixabay.com/photo/2015/05/09/07/30/lion-759374_960_720.jpg" alt="">
</div>
</div>
</div>
<script src="main_v1.js"></script>
</body>
</html>
I tried playing around the transition interval and speed but to no avail. I am little new around this so please help me out