<img src="https://harryheman.github.io/microphone.svg" alt="microphone">

<h3>Угадайте число от 1 до 100</h3>

<p>Говорите в микрофон</p>

<div class="message"></div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, skyblue, steelblue);
  font-family: helvetica;
  color: #222;
}

img {
  width: 150px;
}

h3 {
  margin: 1em 0;
  font-size: 2em;
  text-shadow: 1px 1px #ddd;
}

p {
  margin: 0.5em 0;
  font-size: 1.4em;
  text-align: center;
}

.message {
  font-style: italic;
}

button {
  padding: 0.6em 0.8em;
  font-size: 1em;
  border: none;
  outline: none;
  border-radius: 4px;
  background: linear-gradient(lightgreen, darkgreen);
  box-shadow: 0 2px 1px #444;
  cursor: pointer;
}
const messageElement = document.querySelector(".message");

const randomNumber = Math.floor(Math.random() * 100) + 1;

let playable = true;

console.log(randomNumber);

window.SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;

let recognition = new window.SpeechRecognition();

recognition.start();

function speak(e) {
  const num = +e.results[0][0].transcript;

  messageElement.innerHTML = `<p>Вы сказали: ${num}</p>`;
  checkNumber(num);
}

function checkNumber(num) {
  if (Number.isNaN(num)) {
    messageElement.innerHTML = `<p>Назовите число!</p>`;
    return;
  }

  if (num > 100 || num < 1) {
    messageElement.innerHTML = `<p>Число должно быть от 1 до 100</p>`;
    return;
  }

  if (num === randomNumber) {
    document.body.innerHTML = `
<h3>Поздравляем! Вы угадали число.</h3>
<button>Заново</button>
`;
    playable = false;
  } else if (num > randomNumber) {
    messageElement.innerHTML += `<p>МЕНЬШЕ!</p>`;
  } else {
    messageElement.innerHTML += `<p>БОЛЬШЕ!</p>`;
  }
}

recognition.addEventListener("result", speak);

recognition.addEventListener("end", () => {
  if (playable) recognition.start();
});

document.body.addEventListener("click", (e) => {
  if (e.target.tagName === "BUTTON") {
    location.reload();
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.