딸과 나중에 몇 번 같이 목욕할까?

"이제 함께 들어가고 싶지 않다"고 말하기 전에 스스로 딸과의 목욕은 졸업하고 싶은 것. 하지만 가능한 한 함께 들어가고 싶다는 것이 아버지의 심정. 그리고 몇 번 함께 넣을까 생각하면 오늘 한 번도 특별하게 보일 것. 그런 생각에서, 딸과 앞으로 며칠 같이 목욕에 넣을지 계산하는 Web 앱을 만들어 보았습니다.
만든 웹 앱은 이쪽 그리고 며칠 같이 목욕을 할까?

그리고 이것밖에 없다. . 울었다. .

딸의 「아빠 목욕탕」졸업의 타이밍은, 초등학교 3~4학년경이 많은 것 같습니다.
딸의 9살 생일을 졸업하는 날로 정하면...
2020년 10월 26일 시점에서, 이후 2608일
2일에 1회라면 1304일
일주일에 한번이라면 372일...
울었다

환경

코딩
CodePen: 웹 브라우저에서 HTML/CSS/JavaScript 등 주로 프런트 엔드 언어를 코딩할 수 있는 서비스
사용한 라이브러리
jquery
splitting.js : 텍스트 애니메이션을 구현할 수 있는 라이브러리

출처

index.html

<!-- 全体をVue.js有効にする -->
<div class="container text-center text-white" id="app">

  <!-- タイトル行 -->
  <div class="row my-3">
  <div class="col-sm-15 mx-auto"><div data-splitting><h1>あと何日一緒にお風呂入れる？</h1></div>
  </div>
  </div>

<img src="https://4.bp.blogspot.com/-YUk507i8b7s/UfIJFj6AMQI/AAAAAAAAWc0/KzQO-AiH6Jg/s800/dakko_papa_girl.png" width="30%"/>

  <div class="form-group">
  <label for="lastday">卒業する日</label><input class="form-control col-sm-6 mx-auto" type="date" id="lastday" onChange="calc();"/>
    <label for="today">今日の日付</label><input class="form-control col-sm-6 mx-auto" type="date" id="today" onChange="calc();"/>
 </div>
  <div class="form-group">
    <label for="days">一緒にお風呂に入れる日数</label><input class="form-control col-sm-6 mx-auto" type="text" readonly id="days"/>
  </div>

 <div data-splitting><label for="days">卒業のその日まで、有意義に過ごしてほしい。小さい娘を持つ全てのパパへ。</label></div>
<br>
</div>
<!-- 全体ここまで -->

style.css

@import url(https://fonts.googleapis.com/css?family=Kanit:600);

html { height: 100%; display: flex; }
body { margin: auto; }
html, body {
  background: #00043C;
  color: #FFF;
  font: normal 600 1.5vw/1.5 Kanit, sans-serif;
}

.splitting .char {
  animation: slide-in 1s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(60ms * var(--char-index));
}

@keyframes slide-in {
  from {
    transform: translateY(-1em) rotate(-.5turn) scale(0.5);
    opacity: 0;
  }
}

script.js

Splitting();

function calc() {
  lastday = new Date($('#lastday').val());
  today = new Date($('#today').val());
  console.log(lastday.getTime());
  console.log(today.getTime());

  var days = Math.floor((lastday.getTime() - today.getTime()) / (1000 * 60 * 60 *24));

  $('#days').val(days);  
}

function today() {
  $('#today').val(formatdate());
}

function formatdate(date) {
  var toTwoDigits = function (num, digit) {
    num += ''
    if (num.length < digit) {
      num = '0' + num
    }
    return num
  };

  date = date ? date : new Date()
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
  var yyyy = toTwoDigits(year, 4)
  var mm = toTwoDigits(month, 2)
  var dd = toTwoDigits(day, 2)
  var ymd = yyyy + "-" + mm + "-" + dd;
  return ymd;
}

$(function() 
{
  $('#lastday').val(formatdate());
  $('#today').val(formatdate());
}());

처음 웹 애플리케이션

프로그래밍 초보자 나도 Codepen과 편리한 라이브러리를 구사하여 비교적 쉽게 구현할 수있었습니다. 향후는 소리를 넣는다든지, 좀 더 리치한 외형이라든지, 스마트폰용으로 편리한 화면이라든지, 만들 수 있게 되면 보다 즐거울 것이다. 시간을 찾아서 여러가지 시작해보고 싶습니다.

덤

너무 빨리 성장해 버리는 것이 슬프다고 생각하는 일도 있습니다만, 우리 아이의 성장은 역시 기쁜 것입니다. 함께 목욕을 할 수 없어도 언젠가 딸과 함께 프리몰을 마실 수 있기를 기대합니다