Build a weight converter app with React js

As you are learning React js, it is always advised to try building projects. This will help make your learning journey easier and help you get acquainted with the practical utilization of the tool.
In this tutorial, we will build a simple weight converter app using React JS. This will allow us to explore a couple of introductions to react js concepts. We will explore how to create a component in react, how to dynamically display values, how to handle state change with the useState hook and how to access user inputs.

Prerequisites

• Knowledge of HTML & CSS
• Knowledge of basic JavaScript
• Introduction to react (not compulsory)

Create react app

Verify that a modern version of node.js is installed in the computer you are using. In your terminal, navigate to the folder/location you want to create the app in and type

npx create-react-app weight-converter

It may take a couple of minutes, while React sets up your app for you.
Once the app is created, navigate into the created folder and type

npm start

The localhost address will be provided for you, and your default page will open up in your default browser.

Set up the components

In your src folder, create a new file and name it WeightConverter.js. In the WeightConverter.js app, set up a basic react component.

const WeightConverter = () => {
  return <>
        </>;
};
export default WeightConverter;

In the App.js file, stripe the content of the file to the bare component and render the WeightConverter component.

import WeightConverter from "./WeightConverter";
function App() {
  return (
    <>
      <WeightConverter />
    </>
  );
}

export default App;

The rest of the code we will write will be in our WeightConverter.js file. Our weight converter app will accept input in pounds and display real-time conversion into grams, kilograms, and ounces. Thus, our jsx/html will require an input tag for accepting user input, and a couple of divs for displaying the results. And some wrapping divs for styling purposes.
*jsx code *

import "./weight-converter.css";
const WeightConverter = () => {
  return (
    <>
      <div className="container">
        <h1>Weight Converter</h1>
        <div className="wrapper">
          <input type="number" placeholder="enter pounds"></input>
          <div className="weight grams">
            <div>0</div>

            <label>Grams</label>
          </div>
          <div className="weight kg">
            <div>0</div>

            <label>Kilograms</label>
          </div>
          <div className="weight ounces">
            <div>0</div>
            <label>Ounces</label>
          </div>
        </div>
      </div>
    </>
  );
};
export default WeightConverter;

** CSS code**

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Segoe UI", "Roboto", sans-serif;
  background: black;
  background: radial-gradient(
    /* 45deg, */ rgb(11, 0, 47) 20%,
    rgb(6, 0, 28) 50%,
    rgb(0, 0, 0) 60%
  );
  background-size: 30px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: rgb(255, 255, 255);
  font-size: 1.2rem;
  text-shadow: 1px 1px 3px black;
}
.container {
  padding: 50px;
  background-color: rgba(36, 35, 46, 0.317);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 10px 10px 20px rgb(0, 4, 53);
}
input {
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  font-size: 1.2rem;
  color: rgb(8, 8, 64);
  box-shadow: inset 0 0 5px rgb(8, 8, 64);
}
h1,
h3 {
  margin: 10px auto;
  text-align: center;
  font-size: 2rem;
  -webkit-text-stroke: 2px rgb(213, 44, 47);
}
h1 {
  letter-spacing: 10px;
}
.weight {
  width: 100%;
  padding: 10px;
  border-radius: 10%;
  margin: 10px auto;
  background-color: rgb(213, 44, 47);
  box-shadow: inset 2px 2px 15px rgb(0, 0, 0);
}
.kg {
  background-color: rgb(41, 86, 169);
}
.ounces {
  background-color: rgb(31, 160, 87);
}

output

Get user input

The next code we will write is for accessing the user’s input. We want to access the number of pounds that the user wants to convert to other weights. To do this, we will create a function inside the WeightConverter component, but above the return statement to handle the input value. Inside that function, we will set the value for pounds

const handleInput = (e) => {
    const pounds = e.target.value;
  };

However, react will be unable to render this value unless we use the useState hook. Therefore, we will import useState hook at the top of the page.

import { useState } from "react";

Then above the handle input function, we assign useState to a variable and a function for setting the value of the weight variable.

  const [weight, setWeight] = useState("");

In our handleInput function, we use the useState.

  const handleInput = (e) => {
    const pounds = e.target.value;
    setWeight(pounds);
  };

We can now reference the handleInput function in our input tag

   <input
            type="number"
            onChange={handleInput}
            placeholder="enter pounds"
          ></input>

Converting the values

The next thing we will do is to convert the value in pounds to grams, kilograms and ounces. We will be dividing and multiplying as appropriate to get these values. We will also round our outcome up to two decimal places.

  const changeWeight = () => {
    const grams = (weight / 0.0022046).toFixed(2);
    const kgs = (weight / 2.2046).toFixed(2);
    const ounces = (weight * 16).toFixed(2);
    return { grams, kgs, ounces };
  };

This function returned a detructured object with the three needed values. These values will then be dynamically displayed in the weight divs.

<div className="weight grams">
            <div>{changeWeight().grams}</div>
            Grams
          </div>
          <div className="weight kg">
            <div>{changeWeight().kgs}</div>
            Kilograms
          </div>
          <div className="weight ounces">
            <div>{changeWeight().ounces}</div>
            Ounces
          </div>

Final code

import "./weight-converter.css";
import { useState } from "react";

const WeightConverter = () => {
  const [weight, setWeight] = useState("");

  const handleInput = (e) => {
    const pounds = e.target.value;
    setWeight(pounds);
  };

  const changeWeight = () => {
    const grams = (weight / 0.0022046).toFixed(2);
    const kgs = (weight / 2.2046).toFixed(2);
    const ounces = (weight * 16).toFixed(2);
    return { grams, kgs, ounces };
  };
  return (
    <>
      <div className="container">
        <h1>Weight Converter</h1>
        <div className="wrapper">
          <input
            type="number"
            onChange={handleInput}
            placeholder="enter pounds"
          ></input>
          <div className="weight grams">
            <div>{changeWeight().grams}</div>
            Grams
          </div>
          <div className="weight kg">
            <div>{changeWeight().kgs}</div>
            Kilograms
          </div>
          <div className="weight ounces">
            <div>{changeWeight().ounces}</div>
            Ounces
          </div>
        </div>
      </div>
    </>
  );
};
export default WeightConverter;

Final output

Conclusion

Now that we have successfully built a weight converter app together, I will need you to do us a favor. Create another React app, and try recreating this app on your own. Be sure that you can;
• Create components
• render the component in your root component
• Access the value of user inputs
• dynamically display values in your app
• Manage state change with the useState hook
• Make a functional weight converter app with react.
It may also help to try making another simple project on your own.
Let me know if you can achieve this on your own. You can also share your challenges or outcomes in the comment section.