Temperature control app Javascript

[Notchoaveragejoe]

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

[Notchoaveragejoe]

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');
    }
  };

[Notchoaveragejoe]

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;`

[Notchoaveragejoe]

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;

[Notchoaveragejoe]

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

[Notchoaveragejoe]

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

[Notchoaveragejoe]

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

[lasjorg]

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

[Notchoaveragejoe]

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