프로젝트 47 of 100 - React가 포함된 년 진행률 표시줄

여기요! 저는 3월 31일에 끝나는 100개의 React.js 프로젝트를 만드는 임무를 맡고 있습니다. 업데이트를 위해 내 dev.to 프로필 또는 my를 팔로우하고 질문이 있는 경우 언제든지 연락하십시오. 지원해 주셔서 감사합니다!

배포된 프로젝트에 대한 링크: Link
리포지토리 링크: github

그러니 미리 경고만 하면... 실망시키겠다. #100daysofcode 블로그에서 원하는 콘텐츠를 제공하지 못해 죄송합니다.

그러나 프로젝트를 구성하고 배포한 다음 이에 대한 블로그 게시물을 작성하는 시간을 추가하면 아주 작은 프로젝트라도 시간이 너무 오래 걸릴 수 있습니다.

나는 최근에 열심히 일했고 2021년이 끝나기 전에 특정 일을 끝내는 것에 대해 생각하고 있었기 때문에 React에 구축된 1년 진행률 표시줄을 게시하고 싶었습니다. 진행률 표시줄은 모든 사람이 결국 구축(또는 최소한 라이브러리를 통해 구현)하는 것 중 하나이며 실제로 기본 Javascript Date 함수에서 좋은 연습입니다.

튜토리얼here을 수정하여 2021년 12월 31일까지 남은 일수를 계산하고 나머지 애플리케이션이 App 구성 요소 내에서 읽을 수 있도록 해당 정보를 제공했습니다. 그런 다음 진행률 표시줄 구성 요소를 만들기 위해 팔로우하고 있는 놀라운 Dev.to 블로거를 팔로우했습니다.

  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} />

인라인 스타일을 사용하는 대신 대부분의 모든 것을 CSS로 전환하고 요청된 소품을 ProgressBar 구성 요소에 공급했습니다.

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

그게 다야! dev.to에서 팔로우하는 것을 잊지 말고 즐기시기 바랍니다!

사이트에서 알 수 있듯이 이러한 종류의 프로젝트가 마음에 든다면 에서 저를 찾을 수 있습니다.