<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width">
<title>Recomendaciones</title>
</head>
<body>
<form
action="javascript:procesa()">
<h1>Recomendaciones</h1>
<p>
<label>
Género
<select id="inGenero" required>
<option value="">
-- Selecciona --
</option>
<option value="pop">
Pop
</option>
<option value="reg">
Reguetón
</option>
</select>
</label>
</p>
<p>
<button>Recomendar</button>
</p>
</form>
<script>
function procesa() {
const genero = inGenero.value
const resultado =
recomienda(genero)
alert(resultado)
}
/** @param {string} genero */
function recomienda(genero) {
if (genero === "pop") {
return "Para el pop te " +
"recomiendo a Dua Lipa."
} else if (genero === "reg") {
return "Para el reguetón te " +
"recomiendo a Bad Bunny."
}
}
</script>
</body>
</html>