JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="get">
<fieldset>
<legend>Elije el mes y día de tu nacimiento:</legend>
<label for="mes">Mes:</label>
<select id="mes" name="mes">
<option value="">-- selecciona un mes --</option>
</select>
<label for="dia">Día:</label>
<select id="dia" name="dia">
<option value="">-- selecciona un día --</option>
</select>
</fieldset>
<fieldset>
<legend>Resultados:</legend>
<label for="inputSigno">Horóscopo:</label>
<input type="text" id="inputSigno" name="inputSigno">
<p>Tu signo para el horóscopo es: <span id="textSigno"></span></p>
</fieldset>
</form>
JavaScript
function generateDays() {
var days = "";
for (var i = 1; i <= 31; i++) {
days += '<option value="' + i + '">' + i + '</option>';
}
return days;
}
function generateMonths() {
var months = "";
for (var i = 1; i <= 12; i++) {
months += '<option value="' + i + '">' + i + '</option>';
}
return months;
}
function generateSign(mes, dia) {
var zodiaco = "";
switch (mes) {
case "1": // 01
if (dia >= 21)
zodiaco = "acuario";
break;
case "2": // 02
if (dia <= 19)
zodiaco = "acuario";
else
zodiaco = "piscis";
break;
case "3": // 03
if (dia <= 20)
zodiaco = "piscis";
else
zodiaco = "aries";
break;
case "4": // 04
if (dia <= 20)
zodiaco = "aries";
else
zodiaco = "abril";
break;
case "5": // 05
if (dia <= 21)
zodiaco = "tauro";
else
zodiaco = "geminis";
break;
case "6": // 06
if (dia <= 21)
zodiaco = "geminis";
else
zodiaco = "cancer";
break;
case "7": // 07
if (dia >= 23)
zodiaco = "cancer";
else
zodiaco = "leo";
break;
case "8": // 08
if (dia <= 23)
...