Background Changer using React and Tailwind CSS

Theory

Background changer is a basic project built to understand the usage of Hooks in React. In this project a react hook called useState is used.

UseState hook is nothing but a function. It returns an array with two elements: the current state value and a function to update that state value. The first element of the array is the current state value, and the second element is a function that you can call to update the state.

Syntax: const [state, setState] = useState(initialValue);

About AI and other information

Important I didn't focus on beautifying the UI here, but rather on understanding the logic and implementing it.

I used phind as my pair programmer to provide me with a boilerplate of tailwind to beautify this project. Using phind as my pair programmer helped me to focus more on logic side than the UI side. Plus it also helped me to save a lot of time.

Other AI tools used: GitHub Copilot

Thought process

It is simple

• I want a minimalistic UI to display changing of the background colors.
• There will be two sections of the screen. Left Section and Right Section.
• Left section will consist of buttons and Right section to display color.
• I want 6 buttons for each 6 different colors on the left section of the screen.
• Whenever I click a button (say red), the background color of the right section should change to that specific color (that is red).
• That is it.

Code explanation

• First thing is first. I asked my pair programmer phind to give me a boilerplate of background changer app along with some tailwindCSS styling and this is what it gave me 👇

  import React from 'react';
  
  function App() {
    return (
      <div className="flex h-screen">
        <div className="w-1/5 bg-gray-200">
          <div className="flex flex-col justify-center items-center h-full p-4">
            <button className="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded mb-2">
            Red
            </button>
            <button className="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mb-2">
            Blue
            </button>
            <button className="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded mb-2">
            Green
            </button>
            <button className="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mb-2">
            Yellow
            </button>
            <button className="w-full bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded mb-2">
            Purple
            </button>
            <button className="w-full bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded mb-2">
            Pink
            </button>
          </div>
        </div>
        <div className="w-4/5 bg-gray-400"></div>
      </div>
    );
  }
  export default App;

• Now all I want to do is write the logic. First thing to do is to initializa a useState hook

  const [color, setColor] = useState('gray');

• To use the hook I need to import it.

  import {useState} from 'react';

• I will set the initial background color of the right section as gray using useState hook.

  <div className="w-4/5" style={{backgroundColor: color}}></div>

• I know that when the user clicks on any one of the buttons, some task needs to be performed. Therefore I will add onClick property on all the buttons and by using the setColor function from the useState hook I will change the background color of the right section.

  <div className="flex flex-col justify-center items-center h-full p-4">
    <button 
      className="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded mb-2"
      onClick={() => setColor('red')}
    >
      Red
    </button>
    <button 
      className="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mb-2"
      onClick={() => setColor('blue')}
    >
      Blue
    </button>
    <button 
      className="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded mb-2"
      onClick={() => setColor('green')}
    >
      Green
    </button>
    <button 
      className="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mb-2"
      onClick={() => setColor('yellow')}
    >
      Yellow
    </button>
    <button 
      className="w-full bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded mb-2"
      onClick={() => setColor('purple')}
    >
      Purple
    </button>
    <button 
      className="w-full bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded mb-2"
      onClick={() => setColor('pink')}
    >
      Pink
    </button>
  </div>

• Now my background changer project is ready 🎉

Click here to see the final code.

Project Link

Setup the repo in your local environment

• Clone the repo

  git clone https://github.com/edsondsouza/bg-changer-using-react.git
  

• Install necessary dependencies

  npm i
  

• Run the project

  npm run dev
  

If you liked the project please do drop a ⭐

Follow me on socials

BioDrop