This is how our Temperature controller is going to appear 👇
The first step would be setting up our React application and for that, you need to choose a development environment. For this project, we’ll use create-react-app, but feel free to choose another environment that suits your preferences.
To setup your react application follow these steps :
1. Run the following command in your terminal:
npx create-react-app my-appif the above command doesn’t work, run this command:
npm init react-app my-app2. Navigate to the root directory of your new React app:
cd my-app3. Run your build process with `npm start`:
npm startWe have setup our react application, Now we will create the UI of our Temperature controller.
Creating UI :-
Note: If you would like to save time and avoid the task of creating a user interface, you can easily access the UI code from my GitHub repository. Simply Click here.
Our App will have a parent div called “app-container” which will contain two child div “temperature-display-container” and “button-container”.
“temperature-display-container” will contain a div called “temperature-display” where our temperature will be displayed and “button-container” will contain two button component “+” and “-“.
App.js :
const App = () => {
return (
<div className="app-container">
<div className="temperature-display-container">
<div className="temperature-display">10°C</div>
</div>
<div className="button-container">
<button>-</button>
<button>+</button>
</div>
</div>
);
};
export default App;
index.css :
body {
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
.app-container {
height: 400px;
width: 300px;
background: #2b5870;
border-radius: 20px;
box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.75);
}
.temperature-display-container {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
}
.temperature-display {
display: flex;
border-radius: 50%;
color: #ffffff;
height: 220px;
width: 220px;
text-align: center;
justify-content: center;
align-items: center;
font-size: 48px;
border: 3px #ffffff solid;
transition: background 2.5s;
}
button {
border-radius: 100px;
height: 80px;
width: 80px;
font-size: 32px;
color: #ffffff;
background: rgb(105, 104, 104);
border: 2px #ffffff solid;
}
button:hover {
background: rgb(184, 184, 184);
cursor: pointer;
}
button:focus {
outline: 0;
}
.button-container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.neutral {
background: rgb(184, 184, 184);
}
.cold {
background: #035aa6;
}
.hot {
background: #ff5200;
}
This is how your UI should look after completing the above code:
Logic to change color :-
We will create two state variables ‘temperatureValue’ and ‘temperatureColor’ with the initial value of 10 and ‘cold’ respectively. The ‘temperatureValue’ variable will contain the current temperature and ‘temperatureColor’ will contain the color name.
App.jsx :
const [temperatureValue, setTemperatureValue] = useState(10);
const [temperatureColor, setTemperatureColor] = useState("cold");Then we will create two functions increaseTemperature and decreaseTemperature and pass them to the onclick event of our button components( +, – ) according to their name.
App.jsx :
// const App = () => {
// const [temperatureValue, setTemperatureValue] = useState(10);
// const [temperatureColor, setTemperatureColor] = useState("cold");
const increaseTemperature = () => {};
const decreaseTemperature = () => {};
// return (
// <div className="app-container">
// <div className="temperature-display-container">
// <div className={`temperature-display ${temperatureColor}`}>
// {temperatureValue}°C
// </div>
// </div>
// <div className="button-container">
<button onClick={decreaseTemperature}>-</button>
<button onClick={increaseTemperature}>+</button>
// </div>
// </div>
// );
// };
//export default App;
Now, Inside the increaseTemperature function, we will create a variable called “newTemperature” that will be used to store the increased temperature value, which will be obtained by adding 1 to the current temperature. We will update the state variable “temperatureValue” by using the function “setTemperatureValue” and passing the value of “newTemperature” to it.
In the decreaseTemperature function, we will decrease the current temperature value by 1. Then, in the “if” statement, we will check if the “temperatureValue” is less than 20. If it is, we will update the state variable “temperatureColor” to be ‘cold’.
Additionally, we will add a check statement at the beginning of both the “increaseTemperature” and “decreaseTemperature” functions. In the “increaseTemperature” function, we will check if the “temperatureValue” is equal to 30. If it is, we will not execute the remaining code of that function. This will ensure that the temperature does not increase further when the button is clicked. Similarly, in the “decreaseTemperature” function, we will check if the “temperatureValue” is equal to 0. If it is, we will also not execute the remaining code of that function.
App.jsx :
const increaseTemperature = () => {
if (temperatureValue === 30) return;
const newTemperature = temperatureValue + 1;
setTemperatureValue(newTemperature);
if (newTemperature >= 15) {
setTemperatureColor("hot");
}
};
const decreaseTemperature = () => {
if (temperatureValue === 0) return;
const newTemperature = temperatureValue - 1;
setTemperatureValue(newTemperature);
if (newTemperature < 20) {
setTemperatureColor("cold");
}
};Now we are ready to use our Temperature controller.
Full code : App.jsx
import { useState } from "react";
const App = () => {
const [temperatureValue, setTemperatureValue] = useState(10);
const [temperatureColor, setTemperatureColor] = useState("cold");
const increaseTemperature = () => {
if (temperatureValue === 30) return;
const newTemperature = temperatureValue + 1;
setTemperatureValue(newTemperature);
if (newTemperature >= 15) {
setTemperatureColor("hot");
}
};
const decreaseTemperature = () => {
if (temperatureValue === 0) return;
const newTemperature = temperatureValue - 1;
setTemperatureValue(newTemperature);
if (newTemperature < 20) {
setTemperatureColor("cold");
}
};
return (
<div className="app-container">
<div className="temperature-display-container">
<div className={`temperature-display ${temperatureColor}`}>
{temperatureValue}°C
</div>
</div>
<div className="button-container">
<button onClick={decreaseTemperature}>-</button>
<button onClick={increaseTemperature}>+</button>
</div>
</div>
);
};
export default App;