Develop Reference

<template> clone but with texts from user input

I am trying to create a comment section for my page, I used the template element to create the box and format for my user's pic and name but i'm having difficulties adding the text received from the user to get into the box. right now it creates the box and just puts the text outside/under it. How can I create a element to store inside the template?
function postComment() {
//Clone new box for comment
var temp = document.getElementsByTagName("template")[0];
var clone = temp.content.cloneNode(true);
var newComment = document.getElementById("new-comment");
newComment.appendChild(clone)
//Get comment
var userComment = document.getElementById("comment-box").value;
var text = document.createElement('p');
text.innerHTML = userComment;
newComment.appendChild(text)
//reset the comment box
document.getElementById("comment-box").value = "";
}
var post = document.getElementById("post");
post.addEventListener("click", function(e) {
e.preventDefault();
postComment()
})
.comment-box,
.post-comment .list {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 2px black;
}
.comment-section {
width: 100%;
height: auto;
margin: 0 auto;
}
.post-comment .list {
width: 100%;
margin-bottom: 12px;
}
.post-comment .list .user {
display: flex;
padding: 8px;
overflow: hidden;
}
.post-comment .list .user img {
height: 38px;
width: 38px;
margin-right: 10px;
border-radius: 50%;
}
.comment-section .name {
text-transform: uppercase;
}
.post-comment .list .day {
font-size: 12px;
}
.post-comment {
padding: 0 0 15px 58px
}
#comment-box {
border: none;
border-radius: 5px;
}
.comment-box .user {
display: flex;
width: min-content;
}
.comment-box .image img {
width: 24px;
height: 24px;
margin-right: 10px;
border-radius: 50%;
}
<div class="row">
<div class="comment-section">
<div class="post-comment">
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/ok.webp"></div>
<div class="user-name">
<div class="name">TOM</div>
<div class="day">100 days ago</div>
</div>
</div>
<div class="comment">LOREM IPSUN DABUN VUB</div>
</div>
<template>
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>
<div class="user-name">
<div class="name">Tom Nook</div>
<div class="day">1 second ago</div>
</div>
</div>
</div>
</template>
<div id="new-comment"></div>
<div class="comment-box">
<div class="user">
<div class="user-image"><img src="./images/OK.webp"></div>
<form>
<textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
<button id="post">Comment</button>
</form>
</div>
</div>
</div>
</div>
</div>

Try this and see if this suits your requirements:
function postComment() {
//Get comment
var userComment = document.getElementById("comment-box").value;
var html = '<div class="list">' +
'<div class="user">' +
'<div class="user-image"><img src="./images/Animal-Crossing-Tom-Nook-with-Money.jpg"></div>' +
'<div class="user-name">' +
'<div class="name">Tom Nook</div>' +
'<div class="day">1 second ago</div>' +
'</div>' +
'</div>' +
'<div id="new-comment">' + userComment + '</div>' +
'</div>';
var template = document.getElementsByTagName("template")[0];
template.insertAdjacentHTML("afterend", html);
//reset the comment box
document.getElementById("comment-box").value = "";
}
var post = document.getElementById("post");
post.addEventListener("click", function(e) {
e.preventDefault();
postComment()
})
.comment-box,
.post-comment .list {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 2px black;
}
.comment-section {
width: 100%;
height: auto;
margin: 0 auto;
}
.post-comment .list {
width: 100%;
margin-bottom: 12px;
}
.post-comment .list .user {
display: flex;
padding: 8px;
overflow: hidden;
}
.post-comment .list .user img {
height: 38px;
width: 38px;
margin-right: 10px;
border-radius: 50%;
}
.comment-section .name {
text-transform: uppercase;
}
<div class="row">
<div class="comment-section">
<div class="post-comment">
<div class="list">
<div class="user">
<div class="user-image"><img src="./images/ok.webp"></div>
<div class="user-name">
<div class="name">TOM</div>
<div class="day">100 days ago</div>
</div>
</div>
<div class="comment">LOREM IPSUN DABUN VUB</div>
</div>
<template></template>
<div class="comment-box">
<div class="user">
<div class="user-image"><img src="./images/OK.webp"></div>
<form>
<textarea name="comment" placeholder="YOUR MESSAGE" id="comment-box"></textarea>
<button id="post">Comment</button>
</form>
</div>
</div>
</div>
</div>
</div>

Display the preview image before uploading it to the database

I have a button called to add more images so that the user can add multiple images.
Now, what I am doing, I have to display the preview image before uploading it to the database but it's not working as expected.
I referred to this link Preview images before upload
$(document).ready(function() {
var max_fields = 5;
var wrapper = $(".input_fields_wrap .row");
var add_button = $(".add_field_button");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div class="col-lg-4 mb-3"><div class="customfileWrap"><div class=" upload_file"><input type="file" name="slider[]" class="fileupload" multiple><span class="excel_upload_icon"></span><p id="file-name"></p><span class="upload_text"> Click here to upload file </span> <div class="gallery"></div></div> ✖ </div></div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').parent('div').remove();
x--;
})
});
$(function() {
// Multiple images preview in browser
var imagesPreview = function(input, placeToInsertImagePreview) {
if (input.files) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$('.fileupload').on('change', function() {
imagesPreview(this, 'div.gallery');
});
});
.upload_file {
border: 3px dashed #042954;
position: relative;
text-align: center;
padding: 20px;
border-radius: 3px;
background: #f9f9f9;
height: 120px;
}
.upload_file input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
outline: none;
opacity: 0;
cursor: pointer;
}
.remove_field {
position: absolute;
top: -10px;
right: -10px;
color: #fff;
background-color: red;
width: 22px;
height: 22px;
text-align: center;
border-radius: 20px;
}
.upload_file img {
width: 100px;
}
.customfileWrap {
position: relative;
}
.remove_field {
position: absolute;
top: -10px;
right: -10px;
color: #fff;
background-color: red;
width: 22px;
height: 22px;
text-align: center;
border-radius: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<section>
<div class="container">
<div class="input_fields_wrap">
<button class="add_field_button mb-3">Add More Images</button>
<div class="row">
<div class="col-lg-4 mb-3">
<div class="customfileWrap">
<div class=" upload_file">
<input type="file" name="slider[]" class="fileupload" multiple>
<span class="excel_upload_icon"></span>
<p id="file-name"></p>
<span class="upload_text"> Click here to upload file </span>
<!-- <img id="previewimg1" src="#" alt="" class="previewimg" /> -->
<div class="gallery"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The problem is that you haven't delegated the event handlers for dynamically generated file uploads:
$wrapper.on('change', '.fileupload', function() {
imagesPreview(this, 'div.gallery');
});
const max_fields = 5;
const template = '<div class="col-lg-4 mb-3"><div class="customfileWrap"><div class=" upload_file"><input type="file" name="slider[]" class="fileupload" multiple><span class="excel_upload_icon"></span><p id="file-name"></p><span class="upload_text"> Click here to upload file </span> <div class="gallery"></div></div> ✖ </div></div>';
// Multiple images preview in browser
const imagesPreview = function() {
const input = this;
const $placeToInsertImagePreview = $(this).parent().find('div.gallery');
if (input.files) {
var filesAmount = input.files.length;
for (let i = 0; i < filesAmount; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo($placeToInsertImagePreview);
}
reader.readAsDataURL(input.files[i]);
}
}
};
$(function() {
const $wrapper = $(".input_fields_wrap .row");
const $add_button = $(".add_field_button");
let fileUploadCount = 1;
$add_button.click(e => {
e.preventDefault();
if (fileUploadCount < max_fields) {
fileUploadCount++;
$wrapper.append(template);
}
});
$wrapper.on('click', '.remove_field', function(e) {
e.preventDefault();
$(this).closest('.customfileWrap').remove();
fileUploadCount--;
})
$wrapper.on('change', '.fileupload', imagesPreview);
});
.upload_file {
border: 3px dashed #042954;
position: relative;
text-align: center;
padding: 20px;
border-radius: 3px;
background: #f9f9f9;
height: 120px;
}
.upload_file input {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
outline: none;
opacity: 0;
cursor: pointer;
}
.remove_field {
position: absolute;
top: -10px;
right: -10px;
color: #fff;
background-color: red;
width: 22px;
height: 22px;
text-align: center;
border-radius: 20px;
}
.upload_file img {
width: 100px;
}
.customfileWrap {
position: relative;
}
.remove_field {
position: absolute;
top: -10px;
right: -10px;
color: #fff;
background-color: red;
width: 22px;
height: 22px;
text-align: center;
border-radius: 20px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<section>
<div class="container">
<div class="input_fields_wrap">
<button class="add_field_button mb-3">Add More Images</button>
<div class="row">
<div class="col-lg-4 mb-3">
<div class="customfileWrap">
<div class=" upload_file">
<input type="file" name="slider[]" class="fileupload" multiple>
<span class="excel_upload_icon"></span>
<p id="file-name"></p>
<span class="upload_text"> Click here to upload file </span>
<!-- <img id="previewimg1" src="#" alt="" class="previewimg" /> -->
<div class="gallery"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

How to get img src for image clicked on

I am attempting to get the img src for the specific image being clicked on. I am using the this function in my attempt, so I am unsure what I am doing wrong.
Does anyone see the issue?
HTML:
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<a class="sharePopClose" data-popup-close="pop2" href="#"><img src="/icon_close.png" alt="Close Project Image" class="xClose">
</a>
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>
//Project Container Zoom
$('#projectGallery').on('click', '.projectCont', function (event) {
event.stopPropagation();
$('#zoomPop').fadeIn(350);
$('body').css('overflow', 'hidden');
var currentImg = $(this).attr('src');
console.log(currentImg);
});
#zoomPop {
width: 100%;
height: 100%;
color: #FFF;
position: fixed;
z-index: 999999;
margin: 0;
padding: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
display: none;
}
#zoomPop {
background: rgba(0,0,0,.7);
}
#zoomInner {
position: relative;
padding: 60px 0;
margin: 0 auto;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectGallery">
<div class="projectCont">
<img src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Pic">
</div>
<div class="projectCont">
<img src="https://geology.com/google-earth/google-earth.jpg" alt="Pic">
</div>
</div>
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>

your this refer to DOM Node <div class="projectCont">
Use a
console.log($(this).find('img').attr('src'));
or change selector for event handler to
$('#projectGallery').on('click', '.projectCont img', function (event) {

//Project Container Zoom
$('#projectGallery').on('click', '.projectCont img', function (event) {
event.stopPropagation();
$('#zoomPop').fadeIn(350);
$('body').css('overflow', 'hidden');
var currentImg = $(this).attr('src');
console.log(currentImg);
$('#zoomInner img').attr('src', currentImg);
});
#zoomPop {
width: 100%;
height: 100%;
color: #FFF;
position: fixed;
z-index: 999999;
margin: 0;
padding: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
display: none;
}
#zoomPop {
background: rgba(0,0,0,.7);
}
#zoomInner {
position: relative;
padding: 60px 0;
margin: 0 auto;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectGallery">
<div class="projectCont">
<img src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Pic">
</div>
<div class="projectCont">
<img src="https://geology.com/google-earth/google-earth.jpg" alt="Pic">
</div>
</div>
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>

Coin Flip HTML / Javascript | (Help)

I've tried to make my code work with the example below but after multiple hours of trying I'm giving up... Could someone please help me put this all together so it will work fine?
var result,userchoice;
function resetAll(){
var resetHTML = '<div class="tail"><img src="coin_F.png" /></div><div class="head"><img src="coin_G.png" /></div>';
setTimeout(function(){
$('.coinBox').fadeOut('slow',function(){
$(this).html(resetHTML)
}).fadeIn('slow',function(){
$('#btnFlip').removeAttr('disabled');
});
},2500);
}
// Checking User Input
$(document).on('change','#userChoice', function(){
userchoice = $(this).val();
if(userchoice == "") {
$(this).parent('p').prepend("<span class='text text-danger'>Please select a coin side to play the game</span>")
$('#btnFlip').attr('disabled','disabled');
} else {
/**/
$('#btnFlip').removeAttr('disabled');
$(this).siblings('span').empty();
}
return userchoice;
});
// Final result declaration
function finalResult(result,userchoice){
var resFormat = '<h3>';
resFormat += '<span class="text text-primary">You choose : <u>'+userchoice+'</u></span> |';
resFormat += '<span class="text text-danger"> Result : <u>'+result+'</u></span>';
resFormat += '</h3>';
var winr = '<h2 class="text text-success" style="color: #49DF3E;">You Won!!</h2>';
var losr = '<h2 class="text text-danger" style="color: #c34f4f;">You Lost...</h2>';
if(result == userchoice){
$('.coinBox').append(resFormat+winr)
} else{
$('.coinBox').append(resFormat+losr)
}
}
// Button Click Actions
$(document).on('click','#btnFlip',function() {
if($('#userChoice').val() == "") return;
var flipr = $('.coinBox>div').addClass('flip');
var number = Math.floor(Math.random()*2);
$(this).attr('disabled','disabled');
setTimeout(function() {
flipr.removeClass('flip');
//result time
if(number) {
result = 'Global';
//alert('Head = '+number);
$('.coinBox').html('<img src="coin_G.png" /><h3 class="text-primary">Global</h3>');
finalResult(result,userchoice);
resetAll();
} else {
result = 'Fortune';
//alert('Tail = '+number);
$('.coinBox').html('<img src="coin_F.png" /><h3 class="text-primary">Fortune</h3>');
finalResult(result,userchoice);
resetAll();
}
},2000);
return false;
});
#wrapper
{
width: 100%;
height: auto;
min-height: 500px;
}
.btn
{
width: 12%;
background-color: #c34f4f;
color: white;
padding: 14px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 22px;
}
.btn:hover
{
background-color: #A64242;
}
input[type=submit]:hover {
background-color: #A64242;
}
.container
{
padding: 50px 0;
text-align: center;
}
h1
{
margin-bottom: 100px;
}
.head
{
margin-top: -205px;
}
.flip img{animation: flipIt 0.5s linear infinite;}
.head img
{
animation-delay: 0.25s;
}
#keyframes flipIt
{
0%{width: 0px;
height: 200px;}
25%{width: 200px;
height: 200px;}
50%{width: 0px;
height: 200px;}
100%{width: 0px;
height: 200px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Coin Flip | <span>Global or Fortune</span></h1>
</div>
<div class="col-lg-12">
<!--blank-->
<div class="col-lg-4"></div>
<!--coin-->
<div class="col-lg-4">
<div class="coinBox">
<div class="tail">
<img src="coin_F.png" />
</div>
<div class="head">
<img src="coin_G.png" />
</div>
</div>
</div>
<!--user form elements-->
<div class="col-lg-4 text-left">
<p>
<div class="form-control">
<button name="Global" id="userChoice">Global</button>
<button name="Fortune" id="userChoice">Fortune</button>
</div>
<p>
<button class="btn btn-lg btn-primary" id="btnFlip" disabled>Flip It</button>
</p>
</div>
</div>
</div>
</div>
</div>
I tried to use this example but couldn't get it to work: https://jsfiddle.net/8jw1ogLd/

I have changed your fiddle:
https://jsfiddle.net/8jw1ogLd/6/
The only change is this:
$(this).addClass("disabled");
on 25-th line. Is this answer solves your problem?
Edit:
This is the fixed jsfiddle with your code:
https://jsfiddle.net/45t3th0n/34/

Jquery Slide Down show div with loop

I have multiple complex divs with nested divs including text and images. When the page loads I am displaying 4 of the div's. A button is shown below with the option to show more. Each time the user press the show more button im using Jquery to slide down and show the next 2 divs. There are a total of 28 divs so it will be 14 rows. Once all the divs are visible the button will change to "show less" and the rest of the divs will slide up or become hidden (havnt got to this part yet)
for some reason the JsFiddle is not even working properly :(, im not the best at JavaScript. Below is the code and Jsfiddle Link. I have made simple divs in the example.
JsFiddle
Link To Js Fiddle
HTML
<div class="leaders">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-2">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-3">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;" href="#">SEE MORE</a></span></center>
JS
var count = 0;
$(".leaders-hidden").addClass('hide');
$(".leaders-hidden-2").addClass('hide');
$(".leaders-hidden-3").addClass('hide');
$("#showmoreleaders").click(function() {
count++;
});
if (count == 1) {
$(".leaders-hidden").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 2) {
$(".leaders-hidden-2").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 3) {
$(".leaders-hidden-3").slideDown("slow", function() {
// Animation complete.
});
}
CSS
.read_btw {
border: 1px solid #017dc5;
margin-top: 10px;
padding: 15px;
display: inline-block;
}
.hide {
display: none;
}
.colum-left {
float: left;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.colum-right {
float: right;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
JsFiddle
Link To Js Fiddle

here you go.
you had your if's outside the function so thats why it didn't work, also updated so you can hide them after they are all shown.
also i removed the href from the a tag because it was causing the page to go all the way up. if you don't have a link to go to, you shouldn't put hrefs to a tags
HTML
<div class="leaders">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-2">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<div class="leaders-hidden-3">
<div class="colum-left">
</div>
<div class="colum-right">
</div>
</div>
<center><span style="font-size: 18pt; color: #017dc5;"><a id="showmoreleaders" class="read_btw" style="color: #017dc5;">SEE MORE</a></span></center>
CSS
.read_btw {
border: 1px solid #017dc5;
margin-top: 10px;
padding: 15px;
display: inline-block;
}
.colum-left {
float: left;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.colum-right {
float: right;
width: 48%;
border: 1px solid #d9dada;
margin: 0px;
border-radius: 6px;
margin-right: 7.5px;
margin-bottom: 20px;
height: 200px;
}
.hide{
display: none;
}
#showmoreleaders{
cursor: pointer;
}
JS
var count = 0;
$("#showmoreleaders").click(function() {
count++;
if (count == 1) {
$(".leaders-hidden").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 2) {
$(".leaders-hidden-2").slideDown("slow", function() {
// Animation complete.
});
}
if (count == 3) {
$(".leaders-hidden-3").slideDown("slow", function() {
// Animation complete.
});
$('#showmoreleaders').html('SEE LESS');
}
if (count == 4) {
$(".leaders-hidden-3").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 5) {
$(".leaders-hidden-2").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 6) {
$(".leaders-hidden").slideUp("slow", function() {
// Animation complete.
});
}
if (count == 7) {
$('#showmoreleaders').html('SEE MORE');
count = 0;
}
});
$(".leaders-hidden").addClass('hide');
$(".leaders-hidden-2").addClass('hide');
$(".leaders-hidden-3").addClass('hide');