DEV Community: AULNEIA VOEN

Let’s Build a Color Code Converter With React Together!

AULNEIA VOEN — Tue, 21 Jan 2025 19:38:50 +0000

Next.js is an awesome React framework that makes building web apps a breeze, thanks to cool features like server-side rendering (SSR), static site generation (SSG), and more. Today, we’re diving into something exciting: creating our very own Color Code Converter using Next.js.

Picture this: You input a color in hex format, and voilà—it instantly shows you the RGB and HSL equivalents. It even has a color picker for real-time updates. Sounds fun, right? Let’s get started!

Installing Next.js

First things first—let’s set up our Next.js project.

Step 1: Check Your Tools

Before we dive in, make sure your system has the following:

Node.js (preferably version 16 or higher).
npm or yarn (both come with Node.js).

You can check if they’re installed by running these commands:

node -v
npm -v

Step 2: Spin Up a New Project

We’ll use Next.js’s CLI tool to create our project. Run this command:

npx create-next-app@latest my-nextjs-app

Replace my-nextjs-app with whatever name you like. This does all the heavy lifting—sets up the folder, installs dependencies, and more.

If you prefer yarn:

yarn create next-app my-nextjs-app

Step 3: Open the Project

Move into your new project’s folder:

cd my-nextjs-app

Step 4: Start the Dev Server

Let’s see it in action. Run:

npm run dev

(or yarn dev if you’re using yarn).

Visit http://localhost:3000 in your browser. You should see the Next.js welcome page.

What Are We Building?

We’re making a Color Code Converter. Here’s how it works:

You pick or type a color in hex format.
The app converts it into RGB and HSL formats.
The interface updates dynamically with a color picker and input field.

It’s user-friendly, interactive, and super satisfying to use.

Breaking It Down: How We’ll Build It

Let’s walk through the code step by step, so you understand the “why” behind each part.

Code Walkthrough

Here’s the code. Don’t worry—I’ll explain it as we go:

'use client'

import { useState } from 'react';
import { ChromePicker, ColorResult } from 'react-color';

export default function Home() {
  const [color, setColor] = useState('#3498db');
  const [rgb, setRgb] = useState({ r: 52, g: 152, b: 219 });
  const [hsl, setHsl] = useState({ h: 204, s: 71, l: 53 });

  const handleColorChange = (selectedColor : ColorResult) => {
    const hex = selectedColor.hex;
    const rgb = selectedColor.rgb;
    const hsl = selectedColor.hsl;

    setColor(hex);
    setRgb({ r: rgb.r, g: rgb.g, b: rgb.b });
    setHsl({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });
  };

  const handleHexInputChange = (e : React.ChangeEvent<HTMLInputElement>) => {
    const hex = e.target.value;
    setColor(hex);
  };

  return (
    <div className="min-h-screen bg-black flex items-center justify-center text-white">
      <div className="w-full max-w-md p-6 bg-gray-800 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-center mb-6">Color Code Converter</h1>

        {/* Color Picker */}
        <div className="mb-6 flex justify-center">
          <ChromePicker color={color} onChangeComplete={handleColorChange} />
        </div>

        {/* Hex Input */}
        <div className="flex flex-col items-center mb-4">
          <label className="mb-2 text-gray-300">Enter Hex Code:</label>
          <input
            type="text"
            value={color}
            onChange={handleHexInputChange}
            className="bg-gray-700 text-white text-center p-2 rounded-lg w-32 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        {/* Converted Values */}
        <div className="mt-6">
          <h3 className="text-xl font-semibold mb-3 text-center">Converted Values</h3>
          <div className="space-y-2">
            <p><span className="font-bold">Hex:</span> {color}</p>
            <p><span className="font-bold">RGB:</span> rgb({rgb.r}, {rgb.g}, {rgb.b})</p>
            <p><span className="font-bold">HSL:</span> hsl({hsl.h}, {hsl.s}%, {hsl.l}%)</p>
          </div>
        </div>
      </div>
    </div>
  );
}

We start by importing the tools we’ll need. First, there’s React’s useState, which will help us manage the app’s state. Then, we import the ChromePicker component and the ColorResult type from the react-color library. This gives us a neat color picker UI and a structured way to handle selected colors.

Next, we set up some state variables using useState. This is how we keep track of the selected color in different formats:

const [color, setColor] = useState('#3498db');
const [rgb, setRgb] = useState({ r: 52, g: 152, b: 219 });
const [hsl, setHsl] = useState({ h: 204, s: 71, l: 53 });

Here, color holds the current hex code, while rgb and hsl keep track of the converted values. We initialize them with a nice default color (blue, in this case).

Now, let’s talk about handling color changes. When we pick a new color using the color picker, this function gets triggered:

const handleColorChange = (selectedColor : ColorResult) => {
  const hex = selectedColor.hex;
  const rgb = selectedColor.rgb;
  const hsl = selectedColor.hsl;

  setColor(hex);
  setRgb({ r: rgb.r, g: rgb.g, b: rgb.b });
  setHsl({ h: Math.round(hsl.h), s: Math.round(hsl.s * 100), l: Math.round(hsl.l * 100) });
};

Here’s what’s happening:

First, we extract the hex, RGB, and HSL values from the selectedColor object (this is provided by the ChromePicker).
We then update our state variables using setColor, setRgb, and setHsl. Notice how we round the HSL values to make them look cleaner.

If the user decides to manually type in a hex code, we’ve got that covered too:

const handleHexInputChange = (e : React.ChangeEvent<HTMLInputElement>) => {
  const hex = e.target.value;
  setColor(hex);
};

This function listens for changes in the input field and updates the color state accordingly.

Finally, we design the UI. The ChromePicker component is front and center for selecting colors:

<ChromePicker color={color} onChangeComplete={handleColorChange} />

We also add an input field for manually entering hex codes:

<input
  type="text"
  value={color}
  onChange={handleHexInputChange}
  className="bg-gray-700 text-white text-center p-2 rounded-lg w-32 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>

And, of course, we display the converted values below:

<p>RGB: rgb({rgb.r}, {rgb.g}, {rgb.b})</p>
<p>HSL: hsl({hsl.h}, {hsl.s}%, {hsl.l}%)</p>

To make everything look nice, we use Tailwind CSS for styling. It keeps our layout clean, responsive, and easy to read.

Wrap-Up

And that’s it! Together, we’ve built a fully functional Color Code Converter with Next.js. Now you can input colors, pick them, and see instant conversions. Keep experimenting—you might even add more features like saving favorite colors or copying values to the clipboard. The sky’s the limit!

Understanding the BMI Calculator Code in React and Next.js

AULNEIA VOEN — Fri, 20 Dec 2024 19:36:57 +0000

In this blog post, we will break down a simple BMI (Body Mass Index) calculator built using React and Next.js. This application allows users to input their weight and height, select a unit system (metric or imperial), and calculate their BMI along with a corresponding category. Let’s dive into the code and understand each part in detail.

Setting Up the Component

'use client';

At the beginning of our code, we have the line 'use client';. This directive is essential in Next.js as it indicates that the component we are defining is a client component. This means that it can utilize React hooks and manage state, which is crucial for interactive applications like our BMI calculator. Following this, we import the useState hook from React.

import { useState } from 'react';

The useState hook is a fundamental part of React that allows us to create state variables within our functional component.Next, we define our functional component named Bmi. This component will encapsulate all the logic and UI elements necessary for our BMI calculator. By using a functional component, we can take advantage of React's modern features, such as hooks, which make our code cleaner and more efficient.

export default function Bmi() {

Managing State

Inside our Bmi component, we create several state variables using the useState hook. We initialize weight to 70, which represents the default weight in kilograms, and height to 180, representing the default height in centimeters. These initial values provide a starting point for our calculations. We also create a state variable called bmi, initialized to 0, which will hold the calculated BMI value once the user inputs their data.

const [weight, setWeight] = useState(70);
const [height, setHeight] = useState(180);
const [bmi, setBmi] = useState(0);
const [category, setCategory] = useState('');
const [unitSystem, setUnitSystem] = useState('metric');

Additionally, we have a category state variable, which starts as an empty string. This variable will be used to store the BMI category (such as Underweight, Normal, Overweight, or Obese) based on the calculated BMI. Lastly, we introduce a unitSystem state variable, initialized to 'metric'. This variable allows users to choose between metric and imperial units, making our application more versatile and user-friendly.

BMI Calculation Logic

The heart of our BMI calculator lies in the calculateBMI function. This function is triggered when the user clicks the "Calculate BMI" button. Inside this function, we first calculate the BMI using the formula weight / (height * height). This formula is valid for the metric system, where weight is measured in kilograms and height in meters.

const calculateBMI = () => {
  let calculatedBMI = weight / (height * height);

However, if the user selects the imperial unit system, we need to convert the input values to metric units before performing the calculation. We achieve this by converting weight from pounds to kilograms using the conversion factor (1 pound = 0.453592 kilograms) and height from inches to meters (1 inch = 0.0254 meters). After performing the necessary conversions, we apply the same BMI formula to calculate the BMI in metric units.

if (unitSystem === 'metric') {
  calculatedBMI = weight / (height * height);
} else {
  const weightKg = weight * 0.453592;
  const heightM = height * 0.0254;
  calculatedBMI = weightKg / (heightM * heightM);
}

Once we have the calculated BMI, we update the bmi state variable using setBmi, rounding the value to one decimal place for better readability.

setBmi(parseFloat(calculatedBMI.toFixed(1)));

Following this, we categorize the BMI value into one of four categories: Underweight, Normal, Overweight, or Obese. This categorization is done using a series of conditional statements that check the calculated BMI against standard thresholds. By updating the category state variable accordingly, we provide users with immediate feedback on their BMI status.

if (calculatedBMI < 18.5) {
  setCategory('Underweight');
} else if (calculatedBMI < 25) {
  setCategory('Normal');
} else if (calculatedBMI < 30) {
  setCategory('Overweight');
} else {
  setCategory('Obese');
}

Rendering the Component

The return statement of our Bmi component contains the JSX that defines the user interface of our BMI calculator. We start with a div that serves as a container for our application, styled with Tailwind CSS classes to ensure it is visually appealing and responsive. Inside this container, we include a heading (h1) that displays the title of our application, "BMI Calculator," prominently at the top.

return (
  <div className="container mx-auto p-4">
    <h1 className="text-2xl font-bold mb-4">BMI Calculator</h1>

Next, we create a dropdown menu that allows users to select their preferred unit system. This dropdown is implemented using a select element, which is populated with two options: Metric (kg/m²) and Imperial (lb/in²). The value of the dropdown is bound to the unitSystem state variable, and we use the onChange event to update this state whenever the user makes a selection. This dynamic behavior ensures that the application responds to user input in real-time.

<select value={unitSystem} onChange={(e) => setUnitSystem(e.target.value)}>
  <option value="metric">Metric (kg/m²)</option>
  <option value="imperial">Imperial (lb/in²)</option>
</select>

Following the unit system selector, we have input fields for weight and height. The labels for these fields change based on the selected unit system, providing a clear indication of what the user should enter. The input fields are controlled components, meaning their values are tied to the corresponding state variables (weight and height). When the user types in these fields, the onChange event updates the state with the new values, ensuring that our calculations are always based on the most current input.

<label>
  {unitSystem === 'metric' ? 'Weight (kg)' : 'Weight (lb)'}
  <input
    type="number"
    value={weight}
    onChange={(e) => setWeight(e.target.value)}
    className="border p-2"
  />
</label>
<label>
  {unitSystem === 'metric' ? 'Height (cm)' : 'Height (in)'}
  <input
    type="number"
    value={height}
    onChange={(e) => setHeight(e.target.value)}
    className="border p-2"
  />
</label>

Finally, we include a button labeled "Calculate BMI." When clicked, this button triggers the calculateBMI function, performing the calculations and updating the displayed BMI and category. If the BMI is greater than 0, we display the calculated BMI and the corresponding category to the user.

<button onClick={calculateBMI} className="bg-blue-500 text-white p-2 mt-4">
  Calculate BMI
</button>
{bmi > 0 && (
  <div className="mt-4">
    <p>Your BMI is: {bmi}</p>
    <p>Category: {category}</p>
  </div>
)}

This structure not only makes the BMI calculator functional but also ensures that it is user-friendly and visually appealing. By following this breakdown, you can see how each part of the code contributes to the overall functionality of the application, allowing you to easily calculate and understand their BMI.

Complete Code Testing the Application

Here is the completed code

'use client';

import { useState } from 'react';

export default function Bmi() {
  const [weight, setWeight] = useState(70);
  const [height, setHeight] = useState(180);
  const [bmi, setBmi] = useState(0);
  const [category, setCategory] = useState('');
  const [unitSystem, setUnitSystem] = useState('metric');

  const calculateBMI = () => {
    let calculatedBMI = weight / (height * height);

    if (unitSystem === 'metric') {
      calculatedBMI = weight / (height * height);
    } else {
      // Convert imperial units to metric
      const weightKg = weight * 0.453592;
      const heightM = height * 0.0254;
      calculatedBMI = weightKg / (heightM * heightM);
    }

    setBmi(parseFloat(calculatedBMI.toFixed(1)));

    // Categorize BMI (you can customize categories as needed)
    if (calculatedBMI < 18.5) {
      setCategory('Underweight');
    } else if (calculatedBMI < 25) {
      setCategory('Normal');
    } else if (calculatedBMI < 30) {
      setCategory('Overweight');
    } else {
      setCategory('Obese');
    }
  };

  return (
    <div className="container mx-auto p-4 bg-gray-800 text-white rounded">
      <h1 className="text-3xl font-bold text-center mb-4">BMI Calculator</h1>
      <div className="flex flex-col items-center">
        <div className="mb-4">
          <label className="block text-sm font-medium text-white">
            Unit System
          </label>
          <select
            className="border border-gray-300 text-black p-2 rounded"
            value={unitSystem}
            onChange={(e) => setUnitSystem(e.target.value)}
          >
            <option value="metric">Metric (kg/m²)</option>
            <option value="imperial">Imperial (lb/in²)</option>
          </select>
        </div>
        <div className="mb-4 flex flex-col">
          <label htmlFor="weight" className="text-sm font-medium mb-1">
            {unitSystem === 'metric' ? 'Weight (kg)' : 'Weight (lbs)'}
          </label>
          <input
            type="number"
            id="weight"
            className="border border-gray-300 p-2 rounded text-black"
            value={weight}
            onChange={(e) => setWeight(parseFloat(e.target.value))}
          />
        </div>
        <div className="mb-4 flex flex-col">
          <label htmlFor="height" className="text-sm font-medium mb-1">
            {unitSystem === 'metric' ? 'Height (m)' : 'Height (in)'}
          </label>
          <input
            type="number"
            id="height"
            className="border border-gray-300 p-2 rounded text-black"
            value={height}
            onChange={(e) => setHeight(parseFloat(e.target.value))}
          />
        </div>
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
          onClick={calculateBMI}
        >
          Calculate BMI
        </button>
        {bmi > 0 && (
          <div className="mt-4">
            <p className="text-xl font-bold">Your BMI is: {bmi}</p>
            <p className="text-lg">Category: {category}</p>
          </div>
        )}
      </div>
    </div>
  );
}

Now that we have everything in place, let's run the application. In your terminal, use the following command:

npm run dev

Open your browser and navigate to http://localhost:3000. Enter your birth date and click the "Calculate Age" button. You should see your age displayed on the screen!

Conclusion

In conclusion, we have built a functional BMI calculator using React and Next.js that allows users to input their weight and height, select their preferred unit system, and calculate their BMI along with a corresponding category. By breaking down the code, we have seen how each part contributes to the overall functionality of the application. From managing state with the useState hook to implementing the BMI calculation logic and rendering a user-friendly interface, every aspect plays a crucial role in creating an interactive experience.

You can see the BMI calculator in action by clicking the link below:

Try the BMI Calculator here!

This project not only demonstrates the power of React and Next.js but also serves as a practical example of how to build a simple yet effective web application. Whether you are a beginner or an experienced developer, understanding this code can help you enhance your skills and apply similar concepts in your future projects.

Let's Build an Age Calculator with React Hooks in Nextjs

AULNEIA VOEN — Fri, 20 Dec 2024 18:01:49 +0000

In this tutorial, we’re going to create a simple Age Calculator using React Hooks. This project is a great way to practice your React skills while building something useful. So, let’s dive in!

Setting Up the Project

First, we need to set up our development environment. We’ll use Create React App to quickly get our project up and running. Open your terminal and run the following command:

npx create-react-app age-calculator
cd age-calculator

Once the setup is complete, open the project in your favorite code editor.

Styling the Application

To make our Age Calculator look nice, we use Tailwind CSS for styling. If you haven't set it up yet, you can follow the Tailwind CSS installation guide to add it to your project.

Importing React Hooks

Next, we'll import the useState hook from React. This will help us manage the state of
our application, specifically the user's input (their birth date) and the calculated age.

At the top of your main component file (let's say App.js), add the following import:

import  { useState }  from  'react';

Creating the Age Calculation Logic

Now, let's write the function that will calculate the age based on the birth date. We'll create a function called calculateAge that takes the birth date as an argument and returns the calculated age.

Here's how you can implement it:

const calculateAge = (birthDate) => {
  const today = new Date();
  const birth = new Date(birthDate);
  let age = today.getFullYear() - birth.getFullYear();
  const m = today.getMonth() - birth.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) {
    age--;
  }
  return age;
};

Building the User Interface

Next, we'll create a simple user interface. We'll need an input field for the user to enter their birth date and a button to trigger the age calculation. We can also display the calculated age once it's determined.

Here's a basic structure for our component:

return (
  <div className="bg-black text-white p-8 rounded-lg shadow-md">
    <h1 className="text-2xl font-bold mb-4">Age Calculator</h1>
    <input
      type="date"
      value={birthDate}
      onChange={(e) => setBirthDate(e.target.value)}
      className="bg-gray-800 text-white border-2 border-gray-700 p-2 rounded-md"
    />
    <button
      onClick={handleCalculate}
      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"
    >
      Calculate Age
    </button>
    {age !== null && (
      <p className="text-lg mt-4">Your age is: {age}</p>
    )}
  </div>
);

Completed Code and Testing the Application

Here is the completed code

import { useState, useEffect } from 'react';

function AgeCalculator() {
  const [birthDate, setBirthDate] = useState('');
  const [age, setAge] = useState(null);

  const handleCalculate = () => {
    const calculatedAge = calculateAge(birthDate);
    setAge(calculatedAge);
  };

  useEffect(() => {
    if (birthDate) {
      const calculatedAge = calculateAge(birthDate);
      setAge(calculatedAge);
    }
  }, [birthDate]);

  return (
    <div className="bg-black text-white p-8 rounded-lg shadow-md">
      <h1 className="text-2xl font-bold mb-4">Age Calculator</h1>
      <input
        type="date"
        value={birthDate}
        onChange={(e) => setBirthDate(e.target.value)}
        className="bg-gray-800 text-white border-2 border-gray-700 p-2 rounded-md"
      />
      <button
        onClick={handleCalculate}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4"
      >
        Calculate Age
      </button>
      {age !== null && (
        <p className="text-lg mt-4">Your age is: {age}</p>
      )}
    </div>
  );
}

Now that we have everything in place, let's run the application. In your terminal, use the following command:

npm start

Open your browser and navigate to http://localhost:3000. Enter your birth date and click the "Calculate Age" button. You should see your age displayed on the screen!

Conclusion

Congratulations! You've just built a simple Age Calculator using React Hooks. This project not only helps you practice your React skills but also gives you a functional tool that you can share with others. Here's the link to the working project: age-calculator Feel free to expand on this project by adding features like age in months or days, or even styling it further.

Happy coding, and I can't wait to see what you create next!