We Keep Coding

How to close modal when click outside Javascript

I am trying to close the modal when it's clicked outside. I have tried to loop through modals but can't get them to set its display to none.
Here is my HTML:
<div class="projects">
<div data-modal="modal1">
<div>
<p>Coffee</p>
</div>
<img src="img/coffee.png" alt="">
</div>
<div data-modal="modal2">
<div>
<p>Tea</p>
</div>
<img src="img/tea.png" alt="">
</div>
</div>
<div class="project-card" id="modal1">
<button class="close">X</button>
<div class="overlay">
<img src="img/coffee.png" alt="">
</div>
</div>
<div class="project-card" id="modal2">
<button class="close">X</button>
<div class="overlay">
<img src="img/tea.png" alt="">
</div>
</div>
Here is my code to open modals.
const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');
for (var i = 0; i < coffeeGrounds.length; i++) {
coffeeGrounds[i].addEventListener('click', function () {
var x = this.getAttribute('data-modal');
var a = document.getElementById(x);
a.setAttribute('style','display:block');
});
}
Here is my code, when clicked outside to close the modal:
window.addEventListener('click',function(){
for(var i = 0; i<coffeeGrounds.length; i++){
var x = coffeeGrounds[i].getAttribute('data-modal');
var a = document.getElementById(x);
console.log(a);
if(a.style.display === 'block'){
a.setAttribute('style','display:none');
}
}
});
Over here by setting the modal display to none. It's holding back to display the modal also.
Please any help would be appreciated.
Codepen: https://codepen.io/zaidik/pen/bGwpzbE

When you click outside of the modal window you should not have the modal window in you event propagation array
In other words take advantage of event.path property
Working example (based on the provided fiddle)
window.addEventListener('click', function(e) {
const allModals = document.querySelectorAll('.project-card');
if (!e.path.some(x => x.className && x.className.includes('project-card'))) {
allModals.forEach(x => x.style.display = 'none');
}
}, true)
Working fiddle example: https://jsfiddle.net/7pzs1042/

How to control a single carousel in a page with more carousels?

I'am studying and experimenting with javascript and jquery*.
I'm creating an image slider, one works correctly, but when I decided to try to insert more than one on the same page, I realized that, of course, the controls to go to the next and previous images affect all the sliders on the page. I would like to click on one of them to check only the corresponding carousel ... do you have any advice to implement in my code? thank you very much.
I know there are better solutions before you kill me :)
HTML
<div class="slider">
<div class="images">
<img class="first active" src="https://source.unsplash.com/1600x900/?nature" alt="">
<img src="https://source.unsplash.com/1600x900/?water" alt="">
<img src="https://source.unsplash.com/1600x900/?food" alt="">
<img class="last" src="https://source.unsplash.com/1600x900/?business" alt="">
</div>
<div class="nav">
<div class="next">></div>
<div class="prev"><</div>
</div>
</div>
<div class="slider">
<div class="images">
<img class="first active" src="https://source.unsplash.com/1600x900/?nature" alt="">
<img src="https://source.unsplash.com/1600x900/?water" alt="">
<img src="https://source.unsplash.com/1600x900/?food" alt="">
<img class="last" src="https://source.unsplash.com/1600x900/?business" alt="">
</div>
<div class="nav">
<div class="next">></div>
<div class="prev"><</div>
</div>
</div>
```
-----
JS
-----
```
$('.next').on('click',function(){
goNext();
});
$('.prev').on('click',function(){
goPrev();
});
function goNext(){
var imgActive = $('img.active');
var imgNext = $('img.active').next();
if(imgActive.hasClass('last') == true){
imgActive.removeClass('active');
$('img.first').addClass('active');
} else{
imgActive.removeClass('active');
imgNext.addClass('active');
}
}
function goPrev(){
var imgActive = $('img.active');
var imgPrev = $('img.active').prev();
if(imgActive.hasClass('first') == true){
imgActive.removeClass('active');
$('img.last').addClass('active');
} else{
imgActive.removeClass('active');
imgPrev.addClass('active');
}
}
```

What you can do is call the parent slider instead of manipulating objects throughout the document.
I didn't test the code below but assuming your code works on all sliders, this should work as intended:
$('.next').on('click',function(){
goNext($(this));
});
$('.prev').on('click',function(){
goPrev($(this));
});
function goNext(control){
var slider = control.parents(".slider");
var imgActive = slider.find('img.active');
var imgNext = slider.find('img.active').next();
if(imgActive.hasClass('last') == true){
imgActive.removeClass('active');
slider.find('img.first').addClass('active');
} else{
imgActive.removeClass('active');
imgNext.addClass('active');
}
}
function goPrev(control){
var slider = control.parents(".slider");
var imgActive = slider.find('img.active');
var imgPrev = slider.find('img.active').prev();
if(imgActive.hasClass('first') == true){
imgActive.removeClass('active');
slider.find('img.last').addClass('active');
} else{
imgActive.removeClass('active');
imgPrev.addClass('active');
}
}

How to click on a child element

There many items and I get object of the desired item. But I don't know how can I click on the child element in this object.
html:
<div class="item">
<div role="button" tabindex="-1">
<strong>ItemName2</strong>
</div>
<div class="d">
<div class="item-icon" role="button" tabindex="-1" style="display: none">
<i aria-label="icon: add" class="add"></i> <!-- I need to click on this Item -->
</div>
<div class="item-icon" role="button" tabindex="-1" style="display: none">
<i aria-label="icon: del" class="del"></i>
</div>
</div>
</div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
js:
let fBtns = await driver.findElements(By.tagName('strong')); // Find all objects
let buttons = fBtns.map(elem => elem.getText());
const allButtons = await Promise.all(buttons);
console.log(allButtons); // All object names
let current = fBtns[fBtns.length - 1];
console.log(current); // This is desired object
await current.click(); // This is click on the object and operates as expected
// But I need to click on the <i aria-label="icon: add" class="add"> element
// How can I click on the desired element?

To click the element <i aria-label="icon: del" class="del"></i>, you can just use an XPath to query directly on the element:
await driver.findElement(By.xpath("//div[div/strong[text()='ItemName2']]/div/div/i[#class='del']")).click()
You can probably shorten this a bit to:
await driver.findElement(By.xpath("//div[div/strong[text()='ItemName2']]//i[#class='del']")).click()

Try invoking click by trigger method:
$('.item-icon .add').trigger("click");

In the below example, I scan the document for a dynamic xpath that finds the strong with string ItemName2 and then traverse back up one level (/../) before moving back down to the child element. This will act like a waitForElement that you can hopefully repurpose to trigger a click.
var MyDefaultTimeout = 1500;
var loaded = false;
do {
var icon = document.getElementsByClassName('//*[contains(#strong,\'ItemName2\')]/../div/div/i');
if(!icon.length == 0)
{
setTimeout(function() { loaded = false }, MyDefaultTimeout);
}
else
{
if(!document.readyState === 'complete')
{
setTimeout(function() { loaded = false }, MyDefaultTimeout);
}
else
{
loaded = true;
return document.readyState;
}
}
}
while(loaded === false);

Changing multiple images with JQuery

So here is the JQuery I am using
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
if (c.stream == null) {
span.html("Offline");
} else {
span.html("Online");
}
});
});
});
And the HTML that was with it when I found it
<a class="ltwitch" href="http://www.twitch.tv/ifstudios" data-tnick="IFStudios">IFStudios</a> (<span>...</span>)
RoosterTeeth (...)
Now what I want to do, I have HTML that looks like this
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet.png" class="img-responsive" alt="">
</a>
Basically when a channel becomes live I want to switch the img src from the image I have it set to, to the same image with -online on the end. So I can have multiple pictures on the website, but I can have the images change dependent on who is live and who isn't.
So if I have
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet.png" class="img-responsive" alt="">
</a>
When her channel goes live, it will turn to
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img src="img/portfolio/sweet-online.png" class="img-responsive" alt="">
Or if it was
<img src="img/portfolio/carrot.png"
it would turn to
<img src="img/portfolio/carrot-online.png"
Any ideas?

Try the below code
jQuery(document).ready(function($) {
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/"+tnick+".json?callback=?", function(c) {
var img = $(img-selector);
var source = img.attr('src');
if (c.stream != null) {
// Online
if(source.indexOf('.png') != -1){
source = source.replace(".png", "-online.png");
img.attr('src',source);
}
}
else{
// Offline
source.replace("-online", "");
img.attr('src',source);
}
});
});
});
Note: You have to pass the correct image selector to $(img-selector). Also call the same function again for refreshing

Ng-click need double click why

I have a little problem : ng-click working if only i do a double-click oO i don't understand, what is wrong ?
This is my controller
function MapCtrl($scope) {
if(navigator.onLine){
$scope.online = true;
} else {
$scope.offline = true;
}
/* text */
$scope.reloadText = "Reload";
$scope.reloadingText = "Reload in progress";
$scope.offlineText = "not online";
$scope.reloadMap = function() {
$scope.reload = true;
$scope.online = false;
$scope.offline = false;
}
}
and my html :
<section class="myPanel panel-padding" ng-controller="MapCtrl">
<div id="myMap">
<div class="alert alert-danger" ng-show="offline">{{offlineText}}</div>
<p ng-show="reload"><i class="fa fa-refresh fa-spin"></i> <span>{{reloadingText}}</span></p>
<div id="map" ng-show="online"></div>
<div id="mapControls">
<ul>
<li ng-hide="reload">
<button type="button" ng-click="reloadMap()" class="btn btn-primary btn-xs">{{reloadText}}</button>
</li>
</ul>
</div>
</div>
</section>
i don't understand why i need to double-click, i want it back to normal :/

reloadMap sets reload to true und your <li> has ng-hide="reload" meaning it is hidden when reload is true. So when you lick once the button should vanish. Clicking a second time or making a doubleclick makes the button visible again.