JSFiddle - React, Tailwind, and code Playground

by Michał Oręziak

HTML

<script src="https://raw.githubusercontent.com/gliffy/canvas2svg/master/canvas2svg.js"></script>


<div id="app">
  <h2>Krzyżówka {{ clue }}</h2>
  {{entries}}
  <input type="text" id="clue" v-model="clue">

<div id="entries">
  <input type="text" v-for="(entry, index) in toFind" v-model="entries[index]" @input="calc()" :placeholder="'Wyraz posiadający '+entry" :class="entriesOk[index] === false ? 'error' : ''">
</div>
<div id="proto">
  
</div>
</div>

CSS

#entries input{
  display:block;
  outline:0;
}
#entries input:not(.error){
  border: solid 1px gray;
}
#clue{
  margin:10px;
  font-size:1.2em;
}
.error{
    border: solid 1px red;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    clue: '',
    entries:[],
    entriesOk: [],
    ctx: {}
  },
  methods: {
  calc: function(){
this.entries.forEach((entry, index) => {
if(entry.trim().length > 0){
this.entriesOk[index] = entry.includes(this.toFind[index]);
}
})
  },
  
  },
computed: {
  toFind: {
    // getter
    get: function () {
      return this.clue.replace(/ /g,'').split('')
    }
  }
}
})