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.