bip39 word reminder

by silent water

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/index.css">
<div class="bi39">
  <div class="helper">
    <input class="words-input" v-model="word" autofocus autocomplete="off" placeholder="Input BIP39 word">
    <div class="words-list">
      <div v-for="(matchedWord, matchedWordIndex) in matchedWords" :key="matchedWordIndex" class="words-item">
        {{matchedWord}}
      </div>
    </div>
  </div>
</div>

CSS

.bi39 {
   font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   /*stay px*/
   line-height: 1.4em;
   color: #4d4d4d;
   min-width: 230px;
   /*stay px*/
   max-width: 550px;
   /*stay px*/
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 300;
   background: #fff;
   position: relative;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
   /*stay px*/
   margin: 60px auto;
   /*stay px*/
 }

 .helper {}

 .words-input {
   padding: 16px 16px 16px 60px;
   /*stay px*/
   border: none;
   background: rgba(0, 0, 0, 0.003);
   box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
   /*stay px*/
   position: relative;
   margin: 0;
   width: 100%;
   font-size: 24px;
   /*stay px*/
   font-family: inherit;
   font-weight: inherit;
   line-height: 1.4em;
   color: inherit;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
 }

 .bi39 input::input-placeholder {
   font-style: italic;
   font-weight: 300;
   color: #e6e6e6;
 }

 :focus {
   outline: 0;
 }

 .words-item {
   font-size: 24px;
   /*stay px*/
   padding: 15px;
   /*stay px*/
   border-bottom: 1px solid #ededed;
   /*stay px*/
   line-height: 1.2;
 }

JavaScript

// Full spec-compliant TodoMVC with localStorage persistence
// and hash-based routing in ~120 effective lines of JavaScript.

// localStorage persistence
const words = ["abandon", "ability", "able", "about", "above", "absent", "absorb", "abstract", "absurd", "abuse", "access", "accident", "account", "accuse", "achieve", "acid", "acoustic", "acquire", "across", "act", "action", "actor", "actress", "actual", "adapt", "add", "addict", "address", "adjust", "admit", "adult", "advance", "advice", "aerobic", "affair", "afford", "afraid", "again", "age", "agent", "agree", "ahead", "aim", "air", "airport", "aisle", "alarm", "album", "alcohol", "alert", "alien", "all", "alley", "allow", "almost", "alone", "alpha", "already", "also", "alter", "always", "amateur", "amazing", "among", "amount", "amused", "analyst", "anchor", "ancient", "anger", "angle", "angry", "animal", "ankle", "announce", "annual", "another", "answer", "antenna", "antique", "anxiety", "any", "apart", "apology", "appear", "apple", "approve", "april", "arch", "arctic", "area", "arena", "argue", "arm", "armed", "armor", "army", "around", "arrange", "arrest", "arrive", "arrow", "art", "artefact", "artist", "artwork", "ask", "aspect", "assault", "asset", "assist", "assume", "asthma", "athlete", "atom", "attack", "attend", "attitude", "attract", "auction", "audit", "august", "aunt", "author", "auto", "autumn", "average", "avocado", "avoid", "awake", "aware", "away", "awesome", "awful", "awkward", "axis", "baby", "bachelor", "bacon", "badge", "bag", "balance", "balcony", "ball", "bamboo", "banana", "banner", "bar", "barely", "bargain", "barrel", "base", "basic", "basket", "battle", "beach", "bean", "beauty", "because", "become", "beef", "before", "begin", "behave", "behind", "believe", "below", "belt", "bench", "benefit", "best", "betray", "better", "between", "beyond", "bicycle", "bid", "bike", "bind", "biology", "bird", "birth", "bitter", "black", "blade", "blame", "blanket", "blast", "bleak", "bless",...