JSFiddle - React, Tailwind, and code Playground

HTML

</br>
  </br>
  The user has to enter the name of the animal based on the sounds like woof and moo which are inside an array.</br>
  </br>
  </br>
    What animal says <span id="soundDisplay"></span> 
    <input type="text" id="guess" name="guess">
    <input type="button" onclick="checkGuess()" id="butAnimal" name="butAnimal" value="Submit">
  <p id="result"></p>
        <script>makeSound()</script>

JavaScript

var sounds = ["moo", "woof"];
function makeSound() {

  // Used Variable to define an Array for storing different sounds 


  // Used the Math function in JS to create a random sound and assign new variable 
  var rand1 = Math.floor(Math.random() * sounds.length);

  // below var is defined to hold the sound
  var soundDisplay = sounds[rand1];

  // display logic
  var soundElement = document.getElementById("soundDisplay");
  soundElement.innerHTML = soundDisplay;
}

function checkGuess() {
  var button = document.getElementById("butAnimal");
  var usrInput = document.getElementById("guess").value;

  //Get the value of the input field with id="guess"
  if (usrInput == "Cow" && sounds[0]) {
    alert("Congratulations you got the sound right.");
  } else if (usrInput == "Dog" && sounds[1]) {
    alert("Congratulations you got the sound right.");
  }
}