📄 Table of Contents

Dynamically add and remove element with jQuery

Absolute File Paths

Example

Relative File Paths

Example

Best Practice

Event Handling on Buttons

<div class="buttons">
<button>Press 1</button>
<button>Press 2</button>
<button>Press 3</button>
</div>
const buttonContainer = document.querySelector('.buttons');
console.log('buttonContainer', buttonContainer);

buttonContainer.addEventListener('click', event => {
console.log(event.target.value)
})

--------------------------------------------------------------------
<form>
<input type="button" value="Start machine">
</form>
<p>The machine is stopped.</p>
const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
if (button.value === 'Start machine')
{
button.value = 'Stop machine';
paragraph.textContent = 'The machine has started!';
}
else
{
button.value = 'Start machine';
paragraph.textContent = 'The machine is stopped.';
}
}

Which ‘key’ has been clicked

$(document).ready(function(){
$(‘#email-to-share’).keypress(function (e) {
var key =
e.which;
if(key == 13){...}
});
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.