Template Literal
 

Template Literal

I started this analysis on my main site - I admit I did't really understand them at the time.

I saw Template Literals used on my page on Bubbling and Capturing with respect to DOM

The code from the Bubbling and Capturing example:

<script>
for(let elem of document.querySelectorAll('*'))
{
elem.addEventListener("click",
e => alert(`Capturing: ${elem.tagName}`), true);
elem.addEventListener("click",
e => alert(`Bubbling: ${elem.tagName}`));
}
</script>

The "$" symbol is a place holder for the text (parameters) passed to a function. In the example above the message to be displayed in the alert() box function. In this case when the event was Capturing or Bubbling and the element tagname

Top

The code for the function to control a timed modal

<script>
$(document).ready(function(){
$('#modal').click(function(){ $('#exampleModal').modal('show');
setTimeout(function() {$('#exampleModal').modal('hide');},
2000);
});
});
</script>

The function above is a little more complex.

The data-toggle parameter

geeksforgeeks.org say:

" The data-toggle is an HTML-5 data attribute defined in Bootstrap. The advantage of using this is that, you can select a class or an id and hook up the element with a particular widget. For example, if you select an element and give the property of data-toggle as “collapse”, you’re basically making your div collapsible in just minutes by using Bootstrap. "

There is also a Stack Overfow thread for this but I think that it talks around the subject. The a better understanding I think you need to look at the Bootstrap documentation.

Site design by Tempusfugit Web Design -