We Keep Coding

toggle password/text with javascript only

I'd like to change the following code to javascript only:
$(document).ready(function() {
$('.fa-eye, .fa-eye-slash').click(function() {
$(this).toggleClass('fa-eye fa-eye-slash');
var input=$(this).parent().find('input');
if(input.attr('type')=='password') {
input.attr('type', 'text');
}else input.attr('type', 'password');
});
});
What is does is when you click in an "eye icon" it changes that icon to "eye-slash icon" and changes the password field within the same div to text, so basically toggle password/text.
Since this is currently the only javascript I'm using, I thought it would be overkill to include jQuery or ZeptoJS only for this and this can probably be done with a few lines of javascript.
Please notice: this needs to be applied to multiple fields, that is why I opted not to use ID.

These are the corrections made to make it work with no jQuery and just relying on vanilla JS and Web API (https://developer.mozilla.org/en-US/):
.addEventListener() to add bubbling event handlers to the elements
DOMContentLoaded event instead of $(document).ready()
.querySelectorAll() and .querySelector() to select elements instead of using the $ function
.classList.toggle() instead of .toggleClass()
event.target instead of $(this)
.getAttribute() and .setAttribute() instead of attr()
.forEach() to iterate over the array of returned elements
document.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.fa-eye, .fa-eye-slash')
.forEach( el => {
el.addEventListener('click', event =>{
const trigger = event.target;
trigger.classList.toggle('fa-eye');
trigger.classList.toggle('fa-eye-slash');
const input = trigger.parentNode.querySelector('input');
if (input.getAttribute('type') == 'password')
input.setAttribute('type', 'text');
else
input.setAttribute('type', 'password');
});
});
});
i{
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div>
<input type="password">
<i class="fa-solid fa-eye"></i>
</div>
<hr>
<div>
<input type="password">
<i class="fa-solid fa-eye"></i>
</div>

You can do it with normal vanilla JS means, see this snippet:
function load() {
for (let fa of document.querySelectorAll('.fa-eye, .fa-eye-slash')) {
fa.addEventListener('click', function(e) {
e.target.classList.toggle('fa-eye');
e.target.classList.toggle('fa-eye-slash');
let input = e.target.parentNode.querySelectorAll('input');
for (let item of input) {
if (item.type === 'password') item.type = 'text';
else item.type = 'password';
}
});
}
}
window.addEventListener('load', load);
<div>
<input type="password" value="foo">
<input type="test" value="bar">
<div class='fa-eye' style="background-color: green;">CLICK ME</div>
</div>
Note that jQuery is also Javascript, albeit, Javascript is not necessarily jQuery.

Disabling a click event from the child of a parent div

I am trying to add a on click event to a div with a class parent. Now inside that div I have a div with class child that has its own click event.
How can I manage to disable the click event of the parent function for that child element in order to execute the function of child element itself?
I have tried using pointer-event:none; but it does not seem to be working. I have wrote a jsfiddle for better understanding.
https://jsfiddle.net/arq1epbs/
$(document).on('click', '.parent', function() {
var url = $(this).attr("data-url")
document.location.href = url
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
Im the parent
<div class="child">
im the child and I don't want to go to Google
</div>
</div>
Thanks for all the help in advance!

You can use stopPropagation():
$(document).on('click', '.parent', function () {
var url = $(this).attr("data-url")
document.location.href = url
});
$(document).on('click', '.child', function (e) {
e.stopPropagation();
});
As it's not working in the Stack Snippet, here a Fiddle
For reference: stopPropagation()

You can simply call event.stopPropagation() inside child click event, to prevent the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the child click event like:
$(document).on('click', '.parent', function() {
//var url = $(this).attr("data-url")
//document.location.href = url
console.log('Parent Clicked');
});
$(document).on('click', '.child', function(event) {
event.stopPropagation();
console.clear();
console.log('Child Clicked');
});
.parent{background:#99c0c3;width:350px;height:120px;position:relative}
.child{background:#ffde99;width:300px;height:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
Im the parent
<div class="child">
im the child and I don't want to go to Google
</div>
</div>

Just add this line:
$(document).on('click', '.parent', function (e) {
if(e.target !== this) return false; //This line added
var url = $(this).attr("data-url")
document.location.href = url
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent" data-url="www.google.com">
Im the parent
<div class="child">
im the child and I don't want to go to Google
</div>
</div>

You can do this in "pure" JS
document.querySelector('div.parent').onclick = evt =>
{
if (!evt.target.matches('div.parent')) return // reject sub elements click
document.location.href = evt.target.dataset.url
}
div.parent { cursor: pointer }
div.child { cursor: default }
<div class="parent" data-url="www.google.com">
Im the parent
<div class="child">
Im the child and I don't want to go to Google
</div>
</div>

How to reference the element that was clicked in the IF statement

How to hide the p that was clicked in the code? Existing new ones?
(function($) {
$('body').on('click', function(event) {
if (event.target == $('button')[0]) {
$('body').append('<p class="myp">text</p>')
}
if ($(event.target).attr('class') == 'myp') {
// hide the clicked p
}
})
})(jQuery)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add</button>
<p class="myp">text</p>
<p class="myp">text</p>

To make your logic work to detect the p which was clicked, use hasClass(), then hide(), like this:
(function($){
$('body').on('click', function(event) {
if (event.target == $('button')[0]) {
$('body').append('<p class="myp">text</p>')
}
if ($(event.target).hasClass('myp')) {
$(event.target).hide();
}
})
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add</button>
<p class="myp">text</p>
<p class="myp">text</p>
However, I presume you're attempting to work with the click event on the body in this manner because the child elements are dynamically generated. As such there's a much better way of achieving what you're doing here; delegated event handlers:
jQuery(function($) {
$(document).on('click', 'button', function() {
$('body').append('<p class="myp">text</p>');
}).on('click', '.myp', function() {
$(this).hide();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add</button>
<p class="myp">text</p>
<p class="myp">text</p>

Why with event.target .Just target with class or id of element to initiate the function
$(document).ready(function() {
$('#add').on('click', function() {
$('body').append('<p class="myp">text</p>')
})
}).on('click', 'p.myp', function() {
$(this).hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<p class="myp">text</p>
<p class="myp">text</p>

Prevent .stop() from stopping other animations

So i have this little drop down arrow <div> that i want to move up when it's clicked, which works. But there's another animation on it which changes its opacity and uses the jQuery function .stop(). The problem is that whenever i hover over it during the sliding animation, the element stops dead in its tracks and doesn't finish the animation.
How do i solve this?
PS: if anyone has any suggestions on how to toggleclick two functions, i'd love to hear them, the one for hover seems a lot more convenient. Adding an attribute just for that is kind of lame.
EDIT: usable example: http://plnkr.co/edit/swuKbS3uM8G6stFnUT8U?p=preview
$(document).ready(function () {
console.log("ready for action!");
// Dropdown icon hover
$("#dropdownIcon").hover(function () {
$(this).stop(true).fadeTo(500, 1);
console.log("hovering");
}, function () {
$(this).stop(true).fadeTo(500, 0.3);
console.log("no longer hovering");
});
// Clicking on dropdown icon
$("#dropdownIcon").on("click", function () {
$(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
console.log("i clicked on the thing!");
if ($(this).attr("data-click-state") == 1) {
$(this).attr("data-click-state", 0);
$(this).animate({bottom:"0"},1000);
console.log("clicked once");
} else {
$(this).attr("data-click-state", 1);
$(this).animate({bottom:"50%"},1000);
console.log("clicked again");
}
});
});
HTML
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="CSS/normalize.css" />
<link type="text/css" rel="stylesheet" href="CSS/main.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<title>Rmonik</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
RMONIK
</h1>
<div id="dropdownIcon" data-click-state="0">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
</header>
<nav></nav>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="Javascript/main.js"></script>
</body>
</html>

You can define mouseover, mouseleave events as named functions; use .off(), complete function of .animate() to re-attach mouseover, mouseleave events to element
$(document).ready(function() {
console.log("ready for action!");
// Dropdown icon hover
function handleMouseOver() {
$(this).fadeTo(500, 1);
}
function handleMouseLeave() {
$(this).fadeTo(500, 0.3)
}
function handleAnimationComplete() {
$(this).on("mouseover", handleMouseOver)
.on("mouseleave", handleMouseLeave)
}
$("#dropdownIcon").on("mouseover", handleMouseOver)
.on("mouseleave", handleMouseLeave);
// Clicking on dropdown icon
$("#dropdownIcon").on("click", function() {
$(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
console.log("i clicked on the thing!");
if ($(this).attr("data-click-state") == 1) {
$(this).attr("data-click-state", 0);
$(this).off("mouseover mouseleave")
.animate({
bottom: "0"
}, 1000, handleAnimationComplete);
console.log("clicked once");
} else {
$(this).attr("data-click-state", 1);
$(this).off("mouseover mouseleave")
.animate({
bottom: "-200px"
}, 1000, handleAnimationComplete);
console.log("clicked again");
}
});
});
plnkr http://plnkr.co/edit/qpZM7qRJIjcMebvSs7mB?p=preview

Tooltips + Highlight Animation With Clipboard.js Click

I've successfully installed clipboard.js and have gotten snippets of text to copy to the clipboard upon click. I'm going to be nesting these snippets of text (or the "btn"s they're within) in the cells of a table.
My challenge:
I need the snippets of text to give me a Tooltip "Copied!" message so that people are aware they are clickable. A great example of this is on the clipboard.js documentation page -- click on any of the buttons that cut or copy to see the tooltip message.
From clipboard.js' documentation:
Although copy/cut operations with execCommand aren't supported on
Safari yet (including mobile), it gracefully degrades because
Selection is supported.
That means you can show a tooltip saying Copied! when success event is
called and Press Ctrl+C to copy when error event is called because the
text is already selected.
I'm not particularly adept at JS (it took me a few hours to get this far). So I'm at a dead end... was able to install everything on WP, enqueue the script, and add the text/ functionality:
<!-- 1. Define some markup -->
<div id="btn" data-clipboard-text="1">
<span>text to click</span>
</div>
<!-- 2. Include library -->
<script src="/path/to/dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard by passing a HTML element -->
<script>
var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);
clipboard.on('success', function(e) {
console.log(e);
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
});
clipboard.on('error', function(e) {
console.log(e);
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
What should I add?
Thanks!

Seems like all you want to do is integrating Clipboard.js with a Tooltip solution.
So here's how you can accomplish that using Bootstrap's Tooltip.
// Tooltip
$('button').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(btn, message) {
$(btn).tooltip('hide')
.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('hide');
}, 1000);
}
// Clipboard
var clipboard = new Clipboard('button');
clipboard.on('success', function(e) {
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
});
clipboard.on('error', function(e) {
setTooltip(e.trigger, 'Failed!');
hideTooltip(e.trigger);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary" data-clipboard-text="It worked!">Click me</button>
<button class="btn btn-primary" data-clipboard-text="It worked again!">Click me</button>

I've come up with a slight improvement to Zeno's code, which wraps it in a jQuery function, and supports copying from an arbitrary element:
if (typeof $.uf === 'undefined') {
$.uf = {};
}
$.uf.copy = function (button) {
var _this = this;
var clipboard = new ClipboardJS(button, {
text: function(trigger) {
var el = $(trigger).closest('.js-copy-container').find('.js-copy-target');
if (el.is(':input')) {
return el.val();
} else {
return el.html();
}
}
});
clipboard.on('success', function(e) {
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
});
clipboard.on('error', function(e) {
setTooltip(e.trigger, 'Failed!');
hideTooltip(e.trigger);
});
function setTooltip(btn, message) {
$(btn)
.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('hide')
.attr('data-original-title', "");
}, 1000);
}
// Tooltip
$(button).tooltip({
trigger: 'click'
});
};
// Link all copy buttons
$.uf.copy('.js-copy-trigger');
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label>Email</label>
<div class="input-group js-copy-container">
<input type="text" class="form-control js-copy-target" name="email" autocomplete="off" value="example#example.com" placeholder="Email goes here" disabled>
<span class="input-group-btn">
<button class="btn btn-default js-copy-trigger" type="button">Copy</button>
</span>
</div>
</div>
</form>
You'll notice that we have our button with a class of js-copy-trigger, and the text/control to be copied with the js-copy-target class. Both of these are wrapped in a common js-copy-container class.
This is much better than using id targets, because you often need to generate multiple copy buttons (for example, in a table), and ids must be unique on a page.