https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
https://api.jqueryui.com/datepicker/
https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery
Selectors
$("*") - Wildcard: selects every element on the page.
$(this) - Current: selects the current element being operated on within a function.
$("p") - Tag: selects every instance of the <p> tag.
$(".example") - Class: selects every element that has the example class applied to it.
$("#example") - Id: selects a single instance of the unique example id.
$("[type='text']") - Attribute: selects any element with text applied to the type attribute.
$("p:first-of-type") - Pseudo Element: selects the first <p>.
Events
https://api.jquery.com/category/events/
Event
jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.
Those properties are all documented, and accompanied by examples, on the Event object page.
The standard events in the Document Object Model are:
blur, focus, load, resize, scroll, unload,
beforeunload, click, dblclick, mousedown,
mouseup, mousemove, mouseover, mouseout,
mouseenter, mouseleave, change, select, submit, keydown, keypress, and keyup.
Since the DOM event names have predefined meanings for some elements, using them for other purposes is not recommended. jQuery's event model can trigger an event by any name on an element, and it is propagated up the DOM tree to which that element belongs, if any.
https://code.jquery.com/
https://developers.google.com/speed/libraries/#jquery
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://kit.fontawesome.com/bce420e02d.js" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<script src="https://kit.fontawesome.com/bce420e02d.js" async></script>
<!-- BOOTSTRAP 3 for backtest -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
#wrapper {
display: flex;
align-items: center;
justify-content: center;
}
Add made with love to footer.
<!-- Example #1 - no styling -->
Made with ❤ in Switzerland
<!-- Example #2 - inline-styled ❤ -->
Made with <span style="color: #e25555;">♥</span> in Switzerland
Made with <span style="color: #e25555;">♥</span> in Switzerland
<!-- Example #3 - CSS-style class for ❤ -->
<style>.heart{color:#e25555;}</style>
Made with <span class="heart">❤</span> in Switzerland
<!-- Example #4 - external ❤-icon -->
<link rel="stylesheet" type="text/css" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
Made with <i class="icon ion-heart"></i> in Switzerland
<div class="footer-copyright py-3 text-center">
© Copyright: <a href="#">Company</a>
<br/>
Made with <span style="color: #e25555;">♥</span> in Canada
<br/>
By <a href="alexjslessor.com">Alex J Slessor</a>
</div>
Hover text with flask jinja2
<h5 name="Name of the product followed by the Volume of the product e.g.."><a class="card-title text-capitalize">{{ v['description'] }}</a></h5>
<h6 title="{{ v['sku'] }}: is the Sku or Item #"><a class="card-title text-capitalize">{{ v['sku'] }}</a></h6>
<h6 title="${{ v['price'] }}: Our Wholesale price in USD to U.S. based distributors"><a class="card-title text-capitalize">${{ v['price'] }} USD</a></h6>
<p title="The per unit weight of each product. (P x Q = Net Weight)" class="card-title">Product Weight: {{ v['product_weight'] }}</p>
Add this to style hover text.
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
https://stackoverflow.com/questions/13931571/how-can-change-width-of-dropdown-list#13931670
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">