Distance Converter

Easy
48
2
42.8% Acceptance

In this lab, you'll build a simple React application to convert distances between various units: centimeters, inches, miles, feet, kilometers, and meters. Your task is to create a user interface with select elements for unit conversion, an input field for the value, a convert button, and a display area for the result.

Steps to Build the App

  1. Create Select Elements: Implement two dropdown select elements to allow users to choose the units for conversion. Use IDs fromUnit and toUnit for these dropdowns. Include options for all six units.

  2. Add Number Input Field: Include an input field where users can enter the distance they want to convert. This should be of type 'number' and have the ID fromValue.

  3. Implement Convert Button: Add a button that triggers the conversion process. Assign this button the ID convert.

  4. Conversion Logic: Write the logic to calculate the conversion based on the selected units and the input value. When the convert button is clicked, the result should be displayed.

  5. Display Result: Show the converted value in a dedicated div with the ID outputValue. The result should be rounded to three decimal places.

Example Markup

Here's a simple markup example to get you started:

<div>
    <select id="fromUnit">
        <option value="centimeters">Centimeters</option>
        <!-- Add other units here -->
    </select>
    <select id="toUnit">
        <option value="inches">Inches</option>
        <!-- Add other units here -->
    </select>
    <input type="number" id="fromValue" />
    <button id="convert">Convert</button>
    <div id="outputValue"></div>
</div>

Challenges

Challenge 1: Implement Select Input Elements

  • Objective: Create two dropdown select elements for unit conversion.
  • Requirements:
    • The first select element, with the ID fromUnit, allows the user to choose the unit they are converting from.
    • The second select element, with the ID toUnit, allows the user to choose the unit they are converting to.
    • Both elements should include options for 'centimeters', 'inches', 'miles', 'feet', 'kilometers', and 'meters'.

Challenge 2: Create a Number Input Field

  • Objective: Add an input field for users to enter the numerical value for conversion.
  • Requirements:
    • The input field should be of type 'number'.
    • Assign the ID fromValue to this input field.

Challenge 3: Add a Convert Button

  • Objective: Include a button to initiate the conversion process.
  • Requirements:
    • The button should be labeled in a way that indicates its function (e.g., 'Convert').
    • Assign the ID convert to the button.

Challenge 4: Implement Conversion and Display Logic

  • Objective: Develop the logic to perform the conversion and display the result upon button click.
  • Requirements:
    • When the 'Convert' button (ID convert) is clicked, the app should convert the value from fromValue according to the selected units in fromUnit and toUnit.
    • The result should be displayed in a div with the ID outputValue.

Challenge 5: Ensure Output Precision

  • Objective: Format the output value to always have three decimal places.
  • Requirements:
    • The output displayed in the outputValue div should be a number rounded to three decimal places.

Remember to style your elements for better user experience. You can use simple CSS to add color and layout. For example, style the convert button with a bright color like blue or green to make it stand out. Your Styling for the lab won't be tested.