CXLLUM
Project Two: A Unit Converter
Welcome back, nobody! Today's project was getting my second little app onto the site: a simple miles-to-kilometres unit converter. HTML input, a dropdown, a button, and some JavaScript doing the actual maths. I'd already done the work on the Mimo app, today was just getting it onto the website. Nice and small, which honestly was exactly what I needed after yesterday's marathon.
You can view the project here!
The styling side went pretty smoothly. My first attempt had everything squashed onto one line, which was not the vibe. Turned out I just hadn't given the form any real layout CSS, so the input, dropdown, button and result box were all just doing their own default browser thing. Once I stacked them properly it looked more like an inverted pyramid than a form, so I evened everything out with matching widths and padding so it all lines up neatly now.
Then came the bit where I properly humbled myself. I moved my HTML, CSS and JavaScript over from my original project file into the actual site template, and somehow only brought two of the three across. Button had an onclick="convert()" sitting there, all confident, calling a function that... didn't exist anywhere on the page. Clicked it a dozen times wondering why nothing was happening before realising I'd left the entire <script> block behind. Classic Callum.
Once that was back in, it worked exactly as it should — pop in a number, hit convert, get your answer in km or miles depending on which way you're going.
Rounded the day off by updating my nav and the Projects page with a proper description for the new addition, so it's not just sitting there as a mystery link anymore.
Key Features
- Miles ↔ kilometres conversion, built with vanilla JavaScript
- Form styled to match the site's dark theme, evenly sized inputs
- Added to nav and Projects index with a description