Dusting the ol’ blog off to share a fun project I built this week. This was a fun coding
challenge presented to me by a prospective employer (that’s right, friends. I’m looking for my next gig), and I couldn’t
not share it with you, my devoted
crickets readers. Allow me to present Temp Convert, a simple React SPA
that takes a temperature in one scale (Fahrenheit or Celsius) and converts it to the opposite scale.
Note: the rest of this is copied straight from my project’s README. It’s Friday, y’all!
This is the core feature of Temp Convert. Users can enter a number in either of the two fields (one for Fahrenheit and
one for Celsius), and the opposite field will automatically update to display the converted temperature. The temperature
conversion feature is comprised of two components,
TempInput is responsible for displaying an input field for a given temperature scale. It receives the following
temp-> the temperature value to display
cfor Celsius and
onChange-> determines which calculation to complete when the input changes
Calculator.js is responsible for holding the state as well as all the calculation logic. The component comes with three
toCelsius()-> takes a temperature (in Fahrenheit) and returns the converted temperature in Celsius
toFahrenheit()-> takes a temperature (in Celsius) and returns the converted temperature in Fahrenheit
convert()-> takes a temperature and converter function. If the temperature is
NaN, it simply returns an empty string. Otherwise, it rounds the converted temperature to the first decimal place and returns the result as a string.
The component itself has two event handlers, both of which update the state to the correct temperature scale. These
handlers are passed as the
onChange prop to
render() function, there are a few variables.
temp are grabbed from the state.
scale. If the
scale from the state is set to the opposite scale, call
convert() to calculate the appropriate
temperature. Otherwise, simply return the
temp. The variables,
f, are passed to
TempInput as the
Light/Dark Mode is a bonus feature for this project. It changes the color scheme, depending on the user’s selection. The
entire functionality is contained in
DarkModeToggle.js. Color scheme styling is housed in
The color schemes are defined in
index.css. For each parent class, there are individual variables for the main styling
elements used throughout the application (background, text, and border). These variables are then used in
to configure the specific Tailwind color classes, like
This approach allows the developer to add as many color schemes as they want. As long as the variable names are consistent,
the app will display as expected. Right now, there are only two themes (light and dark), but this lays the groundwork for
future theming opportunities.
DarkModeToggle sets the initial state to light mode by default. This state is toggled by the
event handler when a user clicks the toggle button (displayed as an icon).
render() function, there is a simple conditional statement. If the mode (retrieved from the state) is
set the icon image to a moon and apply the
light CSS class to the
root element. Otherwise, set the icon to a sun and
dark CSS class.
Currently, Temp Convert has a relatively simple architecture. Individual component files are housed in
while image assets (the CodeWitch logo and various icons) are stored in the
./src/assets directory. All CSS is handled
index.css, or within the components themselves. Because this is a MVP, there is no need for a
more complicated structure.
Further iterations of this application may see a slightly more complicated file structure. For example, each component
could live in its own directory, along with any corresponding test or CSS files. As more features evolve, it may also make
sense to include a
./src/containers directory to keep
App.js from getting too cluttered. An example of this would be
if the application were to have multiple calculators within the main body of the page.
Temp Convert has a simple job: take a temperature in one scale and convert it to another. I wanted the interface to reflect this simplicity and be self-explanatory.
- The application follows the normal Header -> Body -> Footer structure we are all used to seeing to facilitate ease of use.
- There is very little text on the screen, but alt text and labels are included for screen readers and accessibility.
- This application is responsive, developed with a mobile-first approach. On mobile, the inputs are stacked vertically, and the two-arrow conversion icon points up and down. On tablet screens and larger, the inputs are displayed horizontally, with the icon pointing left and right.
- Users can type in either temperature input. The selected input is highlighted with a border in a contrasting color.
- The color schemes, both light and dark, were chosen with accessibility in mind. The application is still highly legible at multiple levels of visual color impairment.
- Fonts and icons were chosen to accent the fun, cheerful vibe of the application as well as to correspond with my personal brand as the Code Witch.
Tools and Frameworks
React via Create React App
A few reasons led to my decision to build this application in React:
- React’s reusable component structure allows you to build complicated UIs while keeping the code DRY and organized.
- Because all logic is handled on the client side for this application, there is currently no need for a backend or database. However, if I were to add a backend in the future, React integrates well with Ruby on Rails, my backend framework of choice.
- Create React App is a simple way to build a single-page application that generates the basic file structure of your application. It also preconfigures necessary tools like webpack and Babel, saving the developer time during the initial setup.
Tailwind CSS is a great CSS framework. I chose to use it for several reasons:
- It is conducive to mobile-first development with preconfigured breakpoints for various devices.
- When built for production, Tailwind purges unused CSS, keeping your files smaller.
- Tailwind has solid documentation, making it easy to learn and use.
All icons for this application were found on The Noun Project. Their extensive icon collection is free to use with attribution. Alternatively, you can purchase icons individually or get unlimited access for a reasonable flat fee.
Colormind is a color scheme generator. It is a great starting point for choosing a color scheme because you can preview how the palette might be applied to an actual website.