JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<audio id="a1" src="https://www.myinstants.com/media/sounds/null-you_must_construct_additional_pylons.mp3"></audio>
<audio id="a2" src="https://www.myinstants.com/media/sounds/epic.swf_1.mp3"></audio>
<form>
  <label>What's your power level?</label>
  <input type="text" size="6">
  <button>&raquo;</button>
</form>

CSS

html {
  font-family: sans-serif;
}
form {
  margin: 2em 0;
  text-align: center;
}
label {
  display: block;
  font-size: 36px;
  margin-bottom: 0.5em;
}
input {
  font-size: 36px;
}
button {
  font-size: 36px;
}

JavaScript

var input = document.querySelector('input');
document.querySelector('form').addEventListener('submit', function(e) {
	e.preventDefault();
	var powerLevel = parseInt(input.value, 10);
  if (isNaN(powerLevel) || powerLevel <= 9000) {
  	document.querySelector('#a1').play();
  }
  else {
  	document.querySelector('#a2').play();
  }
}, false);
input.focus();