Me han asignado una tarea en la universidad como una introducción a jQuery y no puedo, por mi VIDA, averiguar cómo ejecutar lo que necesito hacer...

Entonces, la tarea es: "El uso de jQuery permite a los usuarios ingresar un color y luego, al hacer clic en el botón "Aplicar", se aplica el color ingresado por el usuario al cuadro".

El código HTML y CSS que me dan está debajo junto con el JS que he intentado armar. Por el momento, el cambio se activa cuando coloca el texto en el cuadro y luego vuelve a hacer clic en el cuadro, pero no puedo entender cómo hacer que esta acción ocurra cuando se usa el botón Aplicar.

HTML:

 <!-- DO NOT MODIFY ---> <div class="form-container"> <input type="text" class="colourInput" placeholder="Type colour here"> <button>Apply</button> </div> <div class="box"> </div>

CSS:

 /* DO NOT MODIFY */ .form-container { margin: 0 auto; width: 235px; margin-bottom: 20px; margin-top: 20px; } .box { height: 200px; width: 200px; margin: 0 auto; background-color: #000; }

Mi JS actual:

 // Using jQuery allow users to enter a colour then on click of the "Apply" button apply the user entered colour to the box. $('.colourInput').on('click', function(){ $('.box').css("background-color", $(this).val()); });

Realmente no puedo entender esto, ¡así que cualquier ayuda sería increíble! La tarea se configuró en Codepen, por lo que no se utilizó el elemento "documento listo".

Enlace a la tarea CodePen Gracias