Display input text inside a div

Question

I want to get the text that is typed inside a input and apply it within a div at the same time as the user type the text. And you will also have a select to change the color of the text that will appear inside the div. I got the following input and select:

<input type="text" id="texto-digitado" name="texto-digitado" value="">

<select name="cores-texto">
  <option value="amarelo">Amarelo</option> 
  <option value="vermelho">Vermelho</option>
</select>

Above it you will have the following div:

<div class="exibir-texto" style="widht:100%; height:300px; background:#ccc; padding-top:140px;"></div>

How do I display the text typed in input within the div already with the color selected in select?

Answer 1

$(function() {
  var $exibirTexto = $("#exibir-texto");

  $("#cores-texto").on("change", function () {
    var cor = $(this).children("option:selected").val();
    $exibirTexto.css("color", cor);
  }).trigger("change");
  
  $("#texto-digitado").on("keyup", function () {
    var texto = $(this).val();
    $exibirTexto.text(texto);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="exibir-texto" style="width:100%; height:40px; background:#ccc; padding-top:10px;"></div>
<div>
    <input type="text" id="texto-digitado" name="texto-digitado" value="" placeholder="digite algo..." size="30" />
</div>
<div>
    <select name="cores-texto" id="cores-texto">
      <option value="yellow">Amarelo</option> 
      <option value="red">Vermelho</option>
    </select>
</div>