What we're building
In this beginner React Project, we're going to learn how to use state hooks, handle events, apply CSS based on state, and more! Check it out:
Try it yourself
If you want to have a go yourself first, here are the scenarios (you can also grab the CSS/starter code below):
- When the user clicks the "increase button", the temperature should increase
- The temperature cannot go above 30
- When the user clicks the "decrease button", the temperature should decrease
- The temperature cannot go below 0
- When the temperature is 15 or above, the background color should change to red (HINT: I've included a style called "hot" you can use)
- When the temperature is below 15, the background color should be blue (HINT: I've included a style called "cold" you can use)
Getting setup
I recommend using create-react-app or CodeSandbox to get started.
Heres the 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 0.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;
}
Here's what your App.js file should look like:
import React from 'react';
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;
Video Walkthrough
Challenges to Try
- Add functionality that allows the user to save a given temperature, and a button to apply their last saved temperature.
- HINT: A state value which holds the saved temperature will come in handy here ;)
Stuck?
Drop a message in the comments!
Top comments (1)
Thanks for this. I finished the challenge although it's crappy code 😁
deemistral.github.io/react_repo/