JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<audio></audio>
<form id="form">
  <input type="text" class="input" />
  <input type="submit" value="Submit" />
</form>
<h1>Score: <span class="score">0</span></h1>

CSS

.input:focus{
  outline: none;
}
.success{
  border: solid green;
}
.error{
  border: solid red;
}

JavaScript

let currentWord = "winner",
		$audio = $("audio"),
    word = ["excited", "patient", "merrily", "blunder", "foolish", "receive", "glisten", "stretch", "harmful", "special", "crowded", "crochet", "jumbled", "perfect", "village", "improve", "station", "awesome", "harmony", "wriggle", "flutter", "disdain"],
    url,
    $score = $(".score"),
    score = 0;

$("#form").submit(function(e){
	e.preventDefault();
  $input = $(this).find('.input');
  let answer = $input.val();
  if(answer == currentWord){
    $input.removeClass('error');
  	$input.addClass('success');
    score++;
    updateScore();
  }else{
  	$input.removeClass('success');
  	$input.addClass('error');
  }
  $input.val("");
  bindAudio(getRandomWord());
});

function getRandomWord(){
	return word[Math.floor(Math.random() * word.length)];
}
function bindAudio(word){
	currentWord = word;
	url = "https://www.google.com/speech-api/v1/synthesize?text="+word+"&enc=mpeg&lang=en-in&speed=0.4&client=lr-language-tts&use_google_only_voices=1";
  $audio.attr("src", url);
	$audio[0].play();
}
function updateScore(){
	$score.text(score);
}
bindAudio(getRandomWord());