Heres a React Project you can build today. Starter code, tips, challenges to try & video walkthrough!

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!

Blog