How short is your life? Use React to find out. (Part 1)
Tags: react, javascript, webapp
Published: 2019-07-30 17:01:13

---
title: How short is your life? Use React to find out. (Part 1)
published: true
description:
tags: react, javascript, webapp
---

[**DISCLAIMER:** some of the pages might look odd because of the CodePen embedding, open the link to see them in all its glory]

Have you ever wondered how much time of your life some of your daily activities consume? In this article we're going to learn how to make a simple React app to visualize an estimate of it.

Let's start with the basic *index.html* file:

{% codepen https://codepen.io/sntgp/pen/oKZmLK %}

You'll see that there's an h1 asking what your name is and a button to submit it, but there is no input to actually write your name. That is where React kicks in!

{% codepen https://codepen.io/sntgp/pen/ymMwer %}

We've created a simple *NameInput* component that stores the input's value in [Local Storage](https://developer.mozilla.org/es/docs/Web/API/Storage/LocalStorage) with the name of "nameValue". The name is only used in this case to personalize the experience a little bit, but if you're replicating this, you can choose to give it some other use.

After the *index.html* file, we create a *country.html* file, for the user to submit the country where he/she lives. The logic for the React component is pretty much the same: the *CountryInput* component stores the value in LocalStorage as "countryValue" 👇

{% codepen https://codepen.io/sntgp/pen/xvqBvL %}

You'll see that we've now added two new components: *EnglishTitle* and *SpanishTitle*, which render the phrase "What is your country? + the name you submitted before (if you start from here and haven't submitted a name in the latter part, "nameValue" returns null)

### Now comes the fun stuff

Next we create an *age.html* file where the user can submit his/her age.

{% codepen https://codepen.io/sntgp/pen/oKZRNR %}

We have the regular *Input*, *EnglishTitle* and *SpanishTitle* components, but we've also added a function. The function makes an XML HTTP request to the file *lifeexpectancy.json*, saved inside the *data* folder. The *lifeexpectancy.json* file stores the life expectancy for every nation on Earth. The XML request makes the data accesible to myFunction, which uses a for loop to look for the country value submitted as *countryValue*. Finally, it stores the life expectancy value corresponding to the user's country as *lifeExpectancyValue* using Local Storage.

Once the age is submitted,  we go to the next page which is in this case just the instructions. There are no React components this time, just text (with the option to read in Spanish)

{% codepen https://codepen.io/sntgp/pen/wVJVWV %}

### Starting the visualization

At this point, had you wondered why the app was named LifeDots? Now you are going to [find out why](https://codepen.io/sntgp/pen/gVWYoL). From *instructions.html* we pass to *firstinstance.html*. The file presents an amount of colored dots equal to the life expectancy of the user's country three times (every dot represents four months). You will see, because it's only the first instance, that the balls are either red or blue, but not green. It's explained down in the page that the blue balls represent the time you've already lived (your age), and the red balls represent the time you still have left (according to your country's life expectancy). Like in the prior stages, if you haven't submitted anything, the component doesn't render.

{% codepen https://codepen.io/sntgp/pen/gVWYoL %}

How do we achieve this using React? First we create a unique component called <Life/>. This component's state has three values: num, for the stored lifeExpectancyValue, count (a counter) and items, an empty array. Inside componentWillMount(), we'll find the let arr (another empty array) and a for loop that executes a number of times equal to the life expectancy. Every time it executes, this loop pushes a div of classname "year", composed of three dots, into the *items* array in the component's state. Finally we find inside the return(), this very array. This way, the Life component will render an amount of "years" equal to the life expectancy value stored in LocalStorage.

In Part 2 we'll start adding green dots to represent the time you will spend in different activities like studying, sleeping, or working.

You can find the whole project in [this github repo](https://github.com/SantiagoPereira/lifedots).

**So, this was my first post in dev.to!** Did you find this tutorial easy to follow? Did you learn something about React you didn't know before? Please leave your feedback in the comments, and if you liked it follow me here and on Twitter 👇👇 
{% user santper %}