Input type background color change (Learn)

<!-- HTML -->

  <div class="container mt-5" style="border-style: double; border-radius: 30px;">

    <div class="col-md-12" style="text-align: center;">

      <h3 style="color: #bd2871;">Please type any color and let the div change its color</h3>

      <br>

      <div id="box" style="background-color: #900c3e; height:200px; width: 100%;">

      </div>

    </div>

    <br>

    <div class="container">

      <div class="row">

        <div class="col-md-12" style="text-align: center;">

          <h2>Enter your choice of color</h2>

          <input type="text" id="takevalue">

        </div>

        <div class="col-md-12 mt-3" style="text-align: center;">

          <button class="btn btn-success" onclick="colorbox()">Please click</button>

        </div>

        <div class="col-md-12 mt-3" style="text-align:center;">

          <h2 id="answer" style="color:#bd2871;"></h2>

        </div>

      </div>

    </div>

  </div>

  <!-- Javascript -->

  <script>

    function colorbox() {

      var p = document.getElementById("takevalue").value;

      document.getElementById("box").style.backgroundColor = p;

      document.getElementById("answer").innerHTML = `You have choosed <span style="color:${p};">${p}</span> color`;

    }

  </script>

See Demo: click here