JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<body> 
    
    <h2>Find your Animal Name</h2>
    
<p>Select your birth month and your favorite color and find your animal name.</p>

<form>
        <select id="month">
            <option value="">- birth month -</option>
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
            <option value="April">April</option>
            <option value="May">May</option>
            <option value="June">June</option>
            <option value="July">July</option>
            <option value="August">August</option>
            <option value="September">September</option>
            <option value="October">October</option>
            <option value="November">November</option>
            <option value="December">December</option>
        </select>  
        <label class="January" for="January">January Name</label>
        <label class="February" for="February">February Name</label>
        <label class="March" for="March">March Name</label>
        <label class="April" for="April">April Name</label>        
        <label class="May" for="May">May Name</label>
        <label class="June" for="June">June Name</label>        
        <label class="July" for="July">July Name</label>
        <label class="August" for="August">August Name</label>
        <label class="September" for="September">September Name</label>
        <label class="October" for="October">October Name</label>
        <label class="November" for="November">November Name</label>
        <label class="December" for="December">December Name</label>


        <select id="color">
            <option value="">- favorite color -</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
            <option value="Red">Red</option>
        </select>  
        <label class="Green" for="Green">Green Name</label>
        <label class="Blue" for="Blue">Blue...

CSS

body {
   margin: 10px;    
}

form {
    margin: 0px auto;
    width: 300px;
}

p {
  font-family: 'Roboto', sans-serif;
  font-size: 13px/18px; 
  font-weight: 300;
  padding: 10px 0px;
  text-align: center;
}

.output {
    color: #000;
     font-family: 'Roboto', sans-serif;
      font-size: 13px/20px; 
    font-style: normal;
    font-weight: 100;
    text-align: center; 
}

h2 {
    color: #009CDC;
     font-family: 'Roboto', sans-serif;
    font-size: 2.5em;
    font-style: normal;
    font-weight: 100;
    line-height: 1.17em;
    text-align: center;    
}

input {
    display: none;
    margin-bottom: 10px;
}

label {
    display: none;
}

JavaScript

$("#month, #color").change(function () {
    var month = $("#month").val();
    var color = $("#color").val();
    var content = '';
    if (month && color) {
        var monthlabel = $("label[for="+month+"]").text();
        var colorlabel = $("label[for="+color+"]").text();
        content = 'Your animal name is ' + monthlabel + ' ' + colorlabel;
    }
    $("#output").text(content).fadeIn();
});