Use auto-init instead of manual JS initiation of MDC components

This commit is contained in:
Matthew Grove
2018-11-13 19:34:19 +00:00
parent 6329fb3724
commit b3947cce47
2 changed files with 4 additions and 25 deletions

View File

@@ -60,7 +60,7 @@
<h1>Validate</h1>
<!-- input field (in a container so that unwanted overflow from :before & :after is hidden) -->
<div class="mdc-text-field-container">
<div class="mdc-text-field mdc-text-field--outlined">
<div class="mdc-text-field mdc-text-field--outlined" data-mdc-auto-init="MDCTextField">
<input type="number" id="tf-outlined" class="mdc-text-field__input">
<label for="tf-outlined" class="mdc-floating-label ">Your Number</label>
<div class="mdc-notched-outline">
@@ -76,7 +76,7 @@
Validate with the Luhn Algorithm
</p>
<!-- button to submit & check number with Luhn algorithm -->
<button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()">
<button class="validation_button mdc-button mdc-button--outlined" onclick="checkNumber()" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">check_circle_outline</i>
Check
</button>
@@ -84,7 +84,7 @@
<p id="validation_message"></p>
<!-- link to source code on GitHub -->
<a href="https://github.com/mgrove36/demo-code/blob/master/luhn-algorithm/index.html" class="source-code-link mdc-fab mdc-fab--extended"></a>
<a href="https://github.com/mgrove36/demo-code/blob/master/luhn-algorithm/index.html" class="source-code-link mdc-fab mdc-fab--extended" data-mdc-auto-init="MDCRipple"></a>
</div>
</main>
</div>