HTML/CSS/JavaScriptで年越しカウントダウン + 辰カービィを作った

あけましておめでとうございます。うえむーです。
2023年は大変お世話になりました。
本年度もよろしくお願いします。

さて、本題に入りますが、HTML/CSS/JavaScriptで年越しカウントダウン + 辰カービィを作りました！
また、レスポンシブ対応しており、ウィンドウサイズを変更しても崩れないように対応しております。

カービィを作る

まずはカービィを作成します。
ここはとにかく、border-radiusをFANCY-BORDER-RADIUSのツールを使って実装しました。

辰の帽子

次に辰の帽子を作成します。
特に、辰のひげ、後ろの髪型のような曲線状はどのように実装しようか苦労しました。

後ろの髪型は以下のように実装しました。

<div class="dragon_hair_bk"><div>

.dragon_hair_bk {
    position: absolute;
    top: -15%;
    right: -15%;
    transform: rotate(-80deg);
    border-left: 1.5vw solid var(--green2);
    border-bottom-left-radius: 80%;
    border-top-left-radius: 40%;
    height: 80%;
    width: 32%;
    will-change: filter;
    filter: drop-shadow(-1.56vw 0.56vw 0px var(--green2));
    z-index: -1;
 }

まずは、width・height・borderを指定して「filter: drop-shadow(水平方向 垂直方向 ぼかし　色)」を利用して、後ろの髪を2本載せました。

カウントダウン

カウントダウンはReact・ReactDOM・BabelをCDNで使って実装しました。

まずはreact.development.js・react-dom.development.js・babel.min.jsのCDNを入れます。

    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 

次にレンダリングされるようにで読み込みます。

const { Component, Fragment } = React;
      const { createRoot } = ReactDOM;
      class CountDown extends Component {
        state = {
          remaining: {
            hours: 0, minutes: 0, seconds: 0
          },
          isExpired: false
        };
        timer;
        distance;

        componentDidMount() {
          this.setDate();
          this.counter();
        }

        setDate = () => {
          const now = new Date().getTime(),
          countDownDate = new Date(2024, 0, 1, 0, 0, 0).getTime();

　　　　　　　　　　　　　　　　　　　　　// 年明け後の処理
          if (Math.floor((countDownDate - now) / 1000) < 0) {
            const body = document.querySelector('.wrapper');
            body.classList.add('new_year');
            clearInterval(this.timer);
            this.setState({ isExpired: true });
	  // 年明け前の処理
          } else {
            this.setState({
              remaining: {
                時間: Math.floor((countDownDate - now) / 1000 / 3600),
                分: Math.floor((countDownDate - now) / 1000 / 60) % 60,
                秒: Math.floor((countDownDate - now) / 1000) % 60 
              },
              isExpired: false
            });
          }
        };

        counter = () => {
          this.timer = setInterval(() => {
            this.setDate();
          }, 1000);
        };

        render() {
          const { remaining, isExpired } = this.state;
          return (
            <Fragment>
              {!isExpired ? (
                <div className="counter">
                  2024年まで残り
                  {Object.entries(remaining).map((el, i) => (
                    <div key={i} className="entry">
                      <div key={el[1]} className="entry-value">
                        <span className="count">{el[1]}</span>
                      </div>
                      <div className="entry-title">
		         {el[0].toUpperCase()}
		      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="counter">HAPPY NEW YEAR！</div>
              )}
            </Fragment> 
          );
        }
      }
      const app = <CountDown />;
      const container = document.querySelector('.countdown-dom');
      const root = createRoot(container);
      root.render( app );

完成形

完成したのがこちらです。

年越し前

年越し後

特に辰の帽子が苦労しました。

URL
https://javascript-modan.vercel.app/countdown/index.html

GitHubにも掲載してますので見てください。
https://github.com/uemura5683/javascript-modan/tree/main/countdown

2024年もどうぞよろしくおねがいします！