We Keep Coding

Pass the Message project problem with setTimeout or setInterval

I'm making beginner javascript pass the message project I'm having a problem with this: If no input is submitted, an alert should show (using the ‘show' class in the CSS file) in the “Last Message Delivered” section and then disappear after 2 second. I don't know setTimeout and setInterval methods really good and how to break them but if someone could help.
const adder = document.getElementById('message-form')
const cont = document.querySelector('.boxer')
const feeder = document.querySelector('.feedback')
let counter = 0;
adder.addEventListener('submit', e => {
e.preventDefault();
let texto = adder.oop.value
if (texto.length) {
html = `
<div class="boxerr">
<h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
<h4 class="text-capitalize my-3">last message delivered</h4>
<h4 class="message-content text-uppercase">${texto}</h4>
</div>
`
cont.innerHTML += html
adder.reset()
} else {
let timer = setTimeout(() => {
counter++
feeder.classList.toggle('show')
if (counter === 2) {
clearTimeout(timer)
}
}, 100);
}
});
:root {
--lightBlue: #95b8d1;
--mainwhite: #f5f5f5;
--mainBlack: #333333;
}
.max-height {
min-height: 100vh;
}
body {
background: var(--lightBlue);
}
.message-container {
background: var(--mainwhite);
}
.message-content {
color: var(--lightBlue);
}
#submitBtn {
background: var(--lightBlue);
color: var(--mainwhite);
}
#submitBtn:hover {
color: var(--lightBlue);
color: var(--mainBlack);
}
.feedback {
display: none;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row max-height align-items-center">
<div class="col-10 mx-auto col-md-8 message-container text-center p-3">
<h4 class="text-capitalize">A messge you would like to pass</h4>
<form id="message-form">
<input type="text" name="oop" id="message" class="w-100 my-3 p-2">
<input type="submit" id="submitBtn" class="btn btn-lg">
</form>
<div class="boxer">
<div class="boxerr">
<h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
<h4 class="text-capitalize my-3">last message delivered</h4>
<h4 class="message-content text-uppercase">hello world</h4>
</div>
</div>
</div>
</div>
</div>

You can do something like this in the else block:
feeder.classList.add("show");
setTimeout(() => feeder.classList.remove("show"), 2000);
This code will add the show class to the .feedback element and after 2000 milliseconds (i.e. 2 seconds as 1000ms = 1s) the show class will be removed from the .feedback element.
Complete Code:
const adder = document.getElementById('message-form')
const cont = document.querySelector('.boxer')
const feeder = document.querySelector('.feedback')
let counter = 0;
adder.addEventListener('submit', e => {
e.preventDefault();
let texto = adder.oop.value
if (texto.length) {
html = `
<div class="boxerr">
<h4 class="text-capitalize my-3">last message delivered</h4>
<h4 class="message-content text-uppercase">${texto}</h4>
</div>
`
cont.innerHTML += html
adder.reset()
} else {
feeder.classList.add("show");
setTimeout(() => feeder.classList.remove("show"), 2000);
}
});
:root {
--lightBlue: #95b8d1;
--mainwhite: #f5f5f5;
--mainBlack: #333333;
}
.max-height {
min-height: 100vh;
}
body {
background: var(--lightBlue);
}
.message-container {
background: var(--mainwhite);
}
.message-content {
color: var(--lightBlue);
}
#submitBtn {
background: var(--lightBlue);
color: var(--mainwhite);
}
#submitBtn:hover {
color: var(--lightBlue);
color: var(--mainBlack);
}
.feedback {
display: none;
}
.show {
display: block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row max-height align-items-center">
<div class="col-10 mx-auto col-md-8 message-container text-center p-3">
<h4 class="text-capitalize">A messge you would like to pass</h4>
<form id="message-form">
<input type="text" name="oop" id="message" class="w-100 my-3 p-2">
<input type="submit" id="submitBtn" class="btn btn-lg">
</form>
<h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
<div class="boxer">
<div class="boxerr">
<h4 class="text-capitalize my-3">last message delivered</h4>
<h4 class="message-content text-uppercase">hello world</h4>
</div>
</div>
</div>
</div>
</div>

how do i open modal with javascript. without using jquery

How do I make a modal visible with javascript? I don't want to do it using jquery. i just want it with javascript. And I don't want it to open when I click a button. I want it to be opened as a result of some operations in javascript. I made it with modal bootstrap. my codes are below.
html code:
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="modal fade" tabindex="-1" id="sonucModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Test Durumu</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p id="durum"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Çıkış</button>
<button type="button" class="btn btn-primary">2. Aşamaya Geç</button>
</div>
</div>
</div>
</div>
<div class="container" style="height: 100vh;">
<div class="row" style="height: 100vh;">
<div class="col-md-12 d-flex justify-content-center" style="height: 400px;">
<div class="card" style="width: 25rem; margin-top:20vh; ">
<div class="card-body" style="text-align: center;">
<h5 class="card-title text-primary">Soru</h5>
<span class="text-black-50 fs-5" id="soru"></span>
<input class="w-100 form-control mt-4" type="text" id="cevap"/>
<button class="btn btn-outline-primary mt-4 w-100" id="ok">Tamam</button>
</div>
<ul class="list-group list-group-flush">
<li id="anaCan" class="list-group-item fw-bold">Kalan Can: <span id="can"></span></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
javascript code:
var turkceCumleler = [
"Merhaba",
"İyi Sabahlar",
"İyi Günler",
"İyi Akşamlar",
"İyi Geceler",
"Tekrar Görüşmek Üzere(Yüz yüze)",
"Tekrar Görüşmek Üzere(Tel.)",
"Yakında Görüşürüz",
"Güle Güle"
];
var almancaCumleler = [
"hallo",
"guten morgen",
"guten tag",
"guten abend",
"gute nacht",
"auf wiedersehen",
"auf wiederhögen",
"bis bald",
"tschüss"
]
var sayilar = [];
var healt = 3;
const getQuestion = () =>{
document.getElementById('can').textContent=healt;
let rastgele = Math.floor(Math.random()*turkceCumleler.length);
if(sayilar.indexOf(rastgele) === -1){
sayilar.push(rastgele)
document.getElementById('soru').textContent = turkceCumleler[rastgele];
document.getElementById('cevap').value = ""
}else{
getQuestion();
}
if(sayilar.length === turkceCumleler.length){
//here i want modal to open
}
}
const compareQuestionAnswer = () =>{
if(document.getElementById('cevap').value === ''){
alert("boş geçilemez")
}else{
let deger = almancaCumleler.indexOf(document.getElementById('cevap').value.toLowerCase());
if(deger === -1){
healt--;
document.getElementById('can').textContent=healt;
if(healt === 0){
document.getElementById('anaCan').style.color='red';
document.getElementById('ok').disabled = true;
}
}else{
let deger1 = turkceCumleler.indexOf(document.getElementById('soru').textContent);
if(deger === deger1){
getQuestion();
}else{
healt--;
document.getElementById('can').textContent=healt;
if(healt === 0){
document.getElementById('anaCan').style.color='red';
document.getElementById('ok').disabled = true;
}
}
}
}
}
window.onload = getQuestion;
document.getElementById('ok').addEventListener('click',compareQuestionAnswer);
document.getElementById('anaCan').style.color='green';

Bootstrap depends on jQuery, and you're already including jQuery in your code.
But if you want to create a modal without Bootstrap and jQuery, you can do so with CSS and JavaScript. Use an event listener to listen for whatever JavaScript event you desire, then show the modal when that event occurs.
Here is a simple example:
// Show the modal when you hover over the red box
trigger.onmouseover = () => {
modal.style.display = "block";
}
// Hide the modal when you click the close button
document.getElementsByClassName("close")[0].onclick = () => {
modal.style.display = "none";
}
// Hide the modal if you click outside of the modal area
window.onclick = (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
}
#trigger {
height: 100px;
width: 100px;
background-color: red;
}
.modal {
display: none; /* Hidden Initially */
position: fixed;
z-index: 1; /* Higher Z-Index To Sit On Top */
left: 0;
top: 0;
width: 100%; /* Full Width */
height: 100%; /* Full Height */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<div id="modal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<span class="close">x</span>
<p>Modal content here</p>
</div>
</div>
<div id="trigger">
Move mouse into this box to trigger modal.
</div>

You just need to declare a new modal object, like:
const sonucModal= document.getElementById('sonucModal');
const modalEl = new bootstrap.Modal(sonucModal);
and then call it like this whenever you need to open it:
modalEl.show();
Here is a JSFiddle for reference, the modal opens automatically after 2 seconds.

Croppie returns black images after cropping

I am working on a project in which I want to implement croppie js with modal. For that i found a codepen which suits my requirement. But the problem is that after performing crop the resulted image is black.
Can anyone help me with this. The link of the codepen is provided below: https://codepen.io/asrulnurrahim/pen/WOyzxy
// Start upload preview image
$(".gambar").attr("src", "https://user.gadjian.com/static/images/personnel_boy.png");
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 150,
height: 200,
},
enforceBoundary: false,
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function(){
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg
}).then(function(){
console.log('jQuery bind complete');
});
});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId); readFile(this); });
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: {width: 150, height: 200}
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#cropImagePop').modal('hide');
});
});
// End upload preview image
label.cabinet{
display: block;
cursor: pointer;
}
label.cabinet input.file{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
margin-top:-30px;
}
#upload-demo{
width: 250px;
height: 250px;
padding-bottom:25px;
}
figure figcaption {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
padding-left: 9px;
padding-bottom: 5px;
text-shadow: 0 0 10px #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://foliotek.github.io/Croppie/croppie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://foliotek.github.io/Croppie/croppie.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<label class="cabinet center-block">
<figure>
<img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
<figcaption><i class="fa fa-camera"></i></figcaption>
</figure>
<input type="file" class="item-img file center-block" name="file_photo"/>
</label>
</div>
</div>
</div>
<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
<?=multiLanguage( "Edit Foto" , "Edit Photo" )?></h4>
</div>
<div class="modal-body">
<div id="upload-demo" class="center-block"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>

Toggling the image hovering effect on click of a button

I would need help on toggling the image hovering effect on click of a button. I have a set of images with id 'myImg' Below code is not working. Can someone please help. Thanks.
$("button.hov").click(function() {
if ($(this).text().trim() == 'Hover ON') {
$(this).text("Hover OFF");
$('img#myImg.hover').css({
"-webkit-transform": 'none'
});
} else {
$(this).text("Hover ON");
$('img#myImg.hover').css({
"-webkit-transform": 'scale(3, 3)'
});
}
});
img#myImg:hover {
-webkit-transform: scale(3, 3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button hov" style="margin-left: 2px;height: 30px;">
HOVER ON
</button>
<img id="myImg" src="https://i.stack.imgur.com/XZ4V5.jpg" width="240" height="160"/>
<img id="myImg" src="https://i.stack.imgur.com/7bI1Y.jpg" width="240" height="160"/>

You cannot include hover in your jquery selector, instead, define the hover effect with a class, and make use of .addClass() and .removeClass()
HTML
<button class="button hov" style="margin-left: 2px;height: 30px;">
HOVER ON
</button>
<img id="myImg" src="/your-image"/>
JS
$("button.hov").click(function () {
if ($(this).text().trim() == 'Hover ON') {
$(this).text("Hover OFF");
$('img#myImg').removeClass("hoverEffect");
}
else {
$(this).text("Hover ON");
$('img#myImg').addClass("hoverEffect");
}
});
CSS
img#myImg.hoverEffect:hover {
-webkit-transform: scale(3, 3);
}

Something like this should help you get started
$(".toggle-scale").click(function() {
var el = $(this);
var buttonText = el.text().trim();
if (buttonText == 'Hover On') {
el.text("Hover OFF");
$('.image').addClass('enlarge');
} else {
el.text("Hover On");
$('.image.enlarge').removeClass('enlarge');
}
});
.image-container {
width: 500px;
height: 500px;
overflow: hidden;
}
.image {
transition: all 0.2s ease-in-out
}
.image.enlarge {
transform: scale(1.5, 1.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="toggle-scale" style="margin-left: 2px;height: 30px;">Hover On</button>
<div class="image-container">
<img src="https://picsum.photos/300" class="image" />
</div>

Changing id= to class= in the HTML/CSS and JS, you already have what you need, just swap in/out the css scale that you already having by giving it a classname (hover in the case below) and toggling that class:
$("button.hov").click(function() {
$("img.myImg").toggleClass("hover");
$(this).text(() =>
$("img.myImg").hasClass("hover")
? "switch hover off"
: "switch hover on"
);
});
img.myImg.hover:hover {
-webkit-transform: scale(3, 3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="button hov" style="margin-left: 2px;height: 30px;">
switch hover on
</button>
<hr/>
<img class="myImg" src="https://i.stack.imgur.com/XZ4V5.jpg" width="240" height="160" />
<img class="myImg" src="https://i.stack.imgur.com/7bI1Y.jpg" width="240" height="160" />

How to show bootstrap v4 modal box inside a container div?

Working with the bootstrap v4.0.0-alpha is pretty awesome, here what I am looking for: I need to put modal box inside the container div, not on whole screen.
I tried with changing some builtin CSS classes and yeah some JavaScript :) like:
z-index: 1051;
Changing in right navBar but not satisfy with that is there, any simple solution?

Create a variable var mod and load modal in it;
var mod = $('.modal');
Create a div <div class="insidemodal"></div> inside container where you want to show the modal
Use Bootstrap 4 modal event listener, preferable show.bs.modal and put var mod = $('.modal'); inside it and load the modal in insidemodal selector when modal about to show.
$('#myModal').on('show.bs.modal', function () {
var mod = $('.modal'); //Create variable and load modal in it
$('.insidemodal').html(mod); //Load modal to `insidemodal` Selector
});
Make following Changes in Modal CSS
.modal-backdrop {
display:none //<---Kill the modal backdrop
}
.modal-backdrop.in {
opacity: 0;
}
.modal {
z-index: inherit !important; //<--overwrite modal default z-index: 1050
position: relative; //<change position from absoulte
}
So Final Code will be
JS
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function () {
var mod = $('.modal');
$('.insidemodal').html(mod);
});
});
CSS
.title {
background: green;
color:#fff;
padding: 5px;
text-align:center;
border:1px solid;
}
.menu {
background: blue;
color:#fff;
padding: 5px;
text-align:center;
border:1px solid;
}
.insidemodal {
background: red;
border:1px solid;
padding: 5px;
}
.modal-backdrop {
display:none
}
.modal-backdrop.in {
opacity: 0;
}
.modal {
z-index: inherit !important;
position: relative;
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="title">This Is Title</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="menu">Left Menu
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>
</div>
</div>
<div class="col-sm-8">
<div class="insidemodal"></div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Working Fiddle Example
SideNote If you have multiple modals, Above CSS changes in Modal CSS can cause other modals to not behave properly, so use custom selector instead making changes in default modal selector.