Temperature control app Javascript

How do I prevent the temperature control app from going beneath and above a certain amount of temperature?

What app are you talking about? We need more information.

1 Like

Its an app that sets temperature, the condition shouldnt go above 30 degrees nor beneath(0 1–)

const increaseTemperature = () => {
    const newTemperature = temperatureValue + 1;
    setTemperatureValue(newTemperature);

    if (newTemperature >= 15) {
      setTemperatureColor('hot');
    }
  };
  
  const decreaseTemperature = () => {
    const newTemperature = temperatureValue - 1;
    setTemperatureValue(newTemperature);

    if (newTemperature < 15) {
      setTemperatureColor('cold');
    }
  };

Not sure what this is.

Also, I do not see a full working app. I just see two functions.

Hope this makes it clearer
`const App = () => {
const [temperatureValue, setTemperatureValue] = useState(15);
const [temperatureColor, setTemperatureColor] = useState(‘hot’)

const increaseTemperature = () => {
const newTemperature = temperatureValue + 1;
setTemperatureValue(newTemperature);

if (newTemperature >= 15) {
  setTemperatureColor('hot');
}

};

const decreaseTemperature = () => {
const newTemperature = temperatureValue - 1;
setTemperatureValue(newTemperature);

if (newTemperature < 15) {
  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={increaseTemperature}>+</button>
			<button onClick={decreaseTemperature}>-</button>
		</div>
	</div>
);

};

export default App;`

Please wrap code sections in triple back ticks on lines before and after code to make them display properly on the forum.

Thank you.

1 Like
const App = () => {
  const [temperatureValue, setTemperatureValue] = useState(15);
  const [temperatureColor, setTemperatureColor] = useState('hot')

  const increaseTemperature = () => {
    const newTemperature = temperatureValue + 1;
    setTemperatureValue(newTemperature);

    if (newTemperature >= 15) {
      setTemperatureColor('hot');
    }
  };
  
  const decreaseTemperature = () => {
    const newTemperature = temperatureValue - 1;
    setTemperatureValue(newTemperature);

    if (newTemperature < 15) {
      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={increaseTemperature}>+</button>
				<button onClick={decreaseTemperature}>-</button>
			</div>
		</div>
	);
};

export default App;

Just to be clear what you are wanting. If a user clicks on the + button, you only want the temperature to increase if the new temperature would be less than 15? Also, if a user clicks on the - button, you only want the temperature to decrease if the new temperature would be greater than 15?

If I am not understanding you correctly, please give a detailed scenario and what your expectations of the app would be.

the code above is fine. However, I only need to set a limit so it stops at 30 degrees and stops at 0 degrees. Currently the temperature increases to 100 degrees and decreases to -100 degrees

What stops it from going above 100 or below -100 currently? I do not see any logic that would do that in this code.

currently its infinite, the hint was to place the logic in the increaseTemperature and decreaseTemperature functions. I tried using this logic if (newTempertaure >= 15 && newTemperature <= 30) but it still increases above 30 degrees

Look at where your logic is placed. That is the problem.

You do:

setTemperatureValue(newTemperature);

without checking what the newTemperature is.

I tried passing values to setTemperature(30) and removed the newTemperature value, the limit gets set but doesnt increment by 1

Why not use the same type of logic as you do for setTemperatureColor?

Something like If (newTemperature >= 0) { setTemperatureValue(0) }