Adding a complex html / css / js element to a single Wordpress page

I've created a website (blog) using a theme; the website needs a page with a unit converter so I've gone ahead and created one using html, css and vanilla JS on Codepen. http://ift.tt/1MB9vRw

Codepen above ^^^

I also have the wordpress page for the converter setup here: http://ift.tt/1PFpIzP

I'm having trouble finding a way to get the converter 'onto' the wordpress page. I've tried adding it to the edit page text area, and also the 'additional code' section. The html elements are displayed, but the styling is completely wrong.

Do I need to create it as a separate entity like a plugin or a widget and then add it into the page? Or perhaps there's a particular file location on the server a I need to place my separate js and css?

via Chebli Mohamed