Heres a React Project you can build today. Starter code, tips, challenges to try & video walkthrough!
Tags: react, beginners, javascript, codenewbie
Published: 2020-08-03 14:02:25

---
title: Heres a React Project you can build today. Starter code, tips, challenges to try & video walkthrough!
published: true
description: In this beginner's react project we'll build a temperature control app. Learn how to use React hooks, handle events, and dynamically apply CSS based on state.
tags:
 - react
 - beginners
 - javascript
 - codenewbie
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xuvwr67c918iool2jelw.png
---

## 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:

![Beginner react project temperature control app](https://dev-to-uploads.s3.amazonaws.com/i/u50lxza5hdnab72irlio.gif)

## 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:

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


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

{% youtube V3bhcxpoxQU %}

## 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!