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

#react #javascript

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

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