Adding javascript to child theme

I want to apply some javascript to my header and want to know what the best way to implement it is.

here is the source that contains the javascript I’m including – https://codepen.io/kaemak/pen/mHyKa/

Should I create a new javascript file then add it to the child theme, if so then I’m unsure of what to call the file and will it apply to the head from this location?

You should enqueue the script in child theme’s functions.php.
for example if name of the js file is custom.js and if you place it under js folder in your child theme, then in functions.php you should add

function my_custom_scripts() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

Here get_stylesheet_directory_uri() will return the directory of your child theme, then array( 'jquery' ) would make your js load after jquery, if your script requires js then you should use this else you can remove or you can add the dependent script here, then the last parameter true, is to make your js load at the footer.