gogojpword

gogojpword.markdown

gogojpword

A Pen by yes on CodePen.

License.

index.html

<div id='root'>
  <div id='wordContainer'>
    <span id='word'></span>
    <span id='hint'></span>
  </div>
  <div id='inputContainer'>
    <input autofocus id='answer'/>
  </div>
  <div id='hiragana'>Enter the correct Hiragana or it's Romanization!</div>
</div>

script.babel

var hiragana = ['あ','い','う','え','お','か','き','く','け','こ','さ','し','す','せ','そ','た','ち','つ','て','と','な','に','ぬ','ね','の','は','ひ','ふ','へ','ほ','ま','み','む','め','も','や','ゆ','よ','ら','り','る','れ','ろ','わ','を','ん'];
var hint = ['a','i','u','e','o','ka','ki','ku','ke','ko','sa','shi','su','se','so','ta','chi','tsu','te','to','na','ni','nu','ne','no','ha','hi','fu','he','ho','ma','mi','mu','me','mo','ya','yu','yo','ra','ri','ru','re','ro','wa','wo','n'];

var answer = '';
var roma = '';

var nextWord = () => {
  var index = Math.floor(Math.random()*hiragana.length);
  answer = hiragana[index];
  roma = hint[index];
  document.getElementById('word').innerHTML = answer;  
  document.getElementById('hint').innerHTML = hint[index];  
  document.getElementById('hint').style.visibility = 'hidden';
  document.getElementById('answer').value = '';
}

nextWord();

document.getElementById('answer').addEventListener('keypress', e => {
  if (e.keyCode === 13){
    if(e.target.value === answer || e.target.value === roma ) {
      nextWord();
    }else{
      document.getElementById('hint').style.visibility = 'visible';
    }
  }
})

style.css

#root {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

#wordContainer {
  text-align: center;
}

#word {
  text-align: center;
  font-size: 100pt;
}

#hint {
  text-align: center;
  color: #E53935;
  font-size: 25pt;
  visibility: hidden;
}

#inputContainer {
  text-align: center;
}

#hiragana {
  text-align: center;
  font-size: 15pt;
  color: #9E9E9E;
}

input {
  width: 100px;
  text-align: center;
  outline: none;
  font-size: 25pt;
  border: 0;
  border-bottom:2px solid #bebed2;
  margin: 25px 0 50px 0;
}

input:focus { color: #bebed2 }