Project 47 of 100 - Year Progress Bar with React

Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to the deployed project: Link
Link to the repo: github

So just a forewarning... I'm going to disappoint you. Sorry about not providing the content you likely crave from a #100daysofcode blog.

However even tiny projects can become real timesucks when you add the time to configure and deploy the project then write a blog post on it.

Since I've been on my grind recently and have been thinking about getting certain things done before the end of 2021 I wanted to publish a year progress bar built in React. Progress bars are one of those things that everyone builds eventually (or at least implements via a library) and it's actually a nice exercise in native Javascript Date functions.

I modified the tutorial here to calculate the days remaining until December 31 2021 and provide that info for the rest of the application to read within the App component. Then I followed this tutorial from an amazing Dev.to blogger I am following (and you should too!) to create the progress bar component.

  const today = new Date();
  const newYear = new Date(today.getFullYear(), 11, 31);
  if (today.getMonth() == 11 && today.getDate() > 31) {
    newYear.setFullYear(newYear.getFullYear() + 1)
  }
  const one_day = 1000 * 60 * 60 * 24;
  const remainingDays = Math.ceil((newYear.getTime()-today.getTime())/(one_day));
  const yearCompleted = 365 / (365-remainingDays);
  const readout = (`${remainingDays} days left until 2022!`);
...
<div className='readout-container'>{readout}</div>
<ProgressBar bgcolor={'green'} completed={yearCompleted} />

Instead of using inline styles I mostly switched everything over to CSS, and simply fed the requested props into the ProgressBar component.

import React from 'react'

function ProgressBar(props) {
  const {bgcolor,completed} = props;

  const fillerStyles = {
    width: `${completed}%`,
    backgroundColor: bgcolor,
    transition: 'width 1s ease-in-out'
  }

  return (
    <div className='progress-bar-container'>
      <div className='progress-filler' style={fillerStyles}>
        <span className='progress-label'>{`${completed}%`}</span>
      </div>
    </div>
  )
}

export default ProgressBar

That's it! Hope you enjoy and remember to give Kate from dev.to a follow!

Like the site says, if you enjoy these kinds of projects you can find me on the twitters.

Comments

[Katsiaryna (Kate) Lupachova]

Hi James! I just want to wish you good luck on your mission to complete 100 React projects and to encourage you not to stop! You are doing great!
And I'm happy that my tutorial on how to make a custom progress bar component was helpful!

[Yogini Bende]

Great efforts! I just checked your Github repo.
I loved the concept of implementing 100 small projects in React!!

[James Hubert]

Thanks Yogini! I code at work so sometimes it's hard to come home and do a project so this was a simple one. Getting through it though. How is React Native?

[Yogini Bende]

I can totally relate. At times you don't feel motivated to work on your own stuffs after a hectic code workday! React Native is amazing and interesting, based on concepts of ReactJS only. It's fun, you should give it a try.