DEV Community: Santiago Pereira

How short is your life? Use React to find out. (Part 2)

Santiago Pereira — Tue, 30 Jul 2019 21:52:14 +0000

[DISCLAIMER, again: the codePen embedding might make the pages look somewhat weird. to appreciate them in all their glory, open the CodePen links or the lifedots github repo on my dev.to profile]

Last time we had arrived to the visualization part, but we were still only seeing blue and red dots. In this part we will add some green ones to represent the part of life that is spent in different activities (for example, working or studying).

Let's start by adding the part of your life you will spend working.

[DISCLAIMER 2: if the app has no data about your age and country, no dots will be rendered because the app has no idea who you are. to fix it enter the CodePen links or replicate this on your computer cloning the GitHub repo]

I could not find the retirement age for every country on Earth, and of course retirement is a personal decision and not everybody retires at the same age, even in the same country. So I went on and estimated that you will work for five decades before being able to retire. If you are an adult, we also have to deduct the years that you've worked already.

How do we do this on React? We already had created a const style that used a ternary operator to assign the backgroundColor attribute to "blue" to the balls that represented past years, and "red" for those that represent the future. To add a new condition we use something called nested ternary operators. The let style, then, is going to look something like this:


    
let style = {backgroundColor: this.state.count < age ? 'blue': this.state.count < age + work ? 'green' : 'red'}

Remember that this.state.count is a counter than increases every time the for loop in componentWillMount() renders a new "year" (that is, three dots). If this.state.count is less than the user's age, the dots will be blue. If this.state.count is less than the user's age + the years the user will spend working (but not less than the user's age alone), the dots are green. If this.state.count is more than this sum, the dots are red.

The next step is adding the years you will spend sleeping. The calculation here is a little bit easier: we suppose you sleep 8 hours every day of your life, which means 1/3 of every day. Obviously this isn't exactly true: you might sleep more during your youngest years and then do it less as you start working, for example. But since we don't have a time machine (and if we did, we probably wouldn't use it to track someone's sleep) we need to use an estimate like this.

Again the logic is the same: we use ternary operators to handle three different conditions: assign backgroundColor to "blue" if a year has already passed, green if it will be spent either working or sleeping, red if none of those are true.

We do the same thing to add the years the user will spend studying, and using social media.

Again to calculate this one we made a supposition: we're guessing you will go through elementary, middle school and high school, plus four years of college.

This one comes from an actual study you can read here

This final instance has two new lines we hadn't written yet: the ones we are using to store GreenTime (the time spent working, studying, sleeping and using social media) and RedTime (life expectancy minus GreenTime minus age) on localStorage. With these new data stored we can pass to the final phase of this project: the summary.

Speaking strictly about React, this is nothing difficult: three components (BlueTime, RedTime and GreenTime) that each render a value from localStorage.

And this is the end for our React tutorial!

You can find the whole project in this github repo.

So, this was the second part to 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 👇👇

.ltag__user__id__39135 .follow-action-button { background-color: #BAFF5C !important; color: #FFFFFF !important; border-color: #BAFF5C !important; }

Santiago Pereira

16 year old wannabe programmer on the way to greatness (?

santper_ SantiagoPereira

How short is your life? Use React to find out. (Part 1)

Santiago Pereira — Tue, 30 Jul 2019 17:01:13 +0000

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

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!

We've created a simple NameInput component that stores the input's value in Local Storage 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" 👇

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.

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)

Starting the visualization

At this point, had you wondered why the app was named LifeDots? Now you are going to find out why. 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.

How do we achieve this using React? First we create a unique component called . 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.

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 👇👇

.ltag__user__id__39135 .follow-action-button { background-color: #BAFF5C !important; color: #FFFFFF !important; border-color: #BAFF5C !important; }

Santiago Pereira

16 year old wannabe programmer on the way to greatness (?

santper_ SantiagoPereira