I've been set a task at uni as an introduction to jQuery and cannot for the LIFE of me, figure out how to execute what I need to do...

So the task is: "Using jQuery allow users to enter a colour then on click of the "Apply" button apply the user entered colour to the box."

The HTML and CSS code I'm given is below alongwith the JS that I've attempted to put together. At the moment, the change triggers when you put the text into the box, and then click back into the box, but I can't figure out how to make this action occur when using the Apply button.

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;
}

My current JS:

// 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());
});

Really cannot get my head around this, so any help would be amazing! The task was set in Codepen, which is why the "document ready" element was not used.

Link to task CodePen Thanks