水分足りてる？水分補給アプリを作った

# はじめに
最近困っていることがあって、
プログラミングに熱中していたら
水分をとることを忘れるんですよね。
それを対策するために、
水分補給を促すアプリを作ってみました！

# こんなアプリを作りました
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930283/da8d1464-7516-a5dc-2b5f-355ef514466f.png" width="30%">

# 自分で作った理由
既存のアプリに頼るのもアリですが、
作るのもそれはそれで楽しそうなのでやってみました！

# どういう構造?
クライアントは、開発環境がWindowsしかないので
PWAでアプリっぽく設計しました。
サーバーはVercel上のFlaskで。

# コード
### index.html
```html:index.html
<!DOCTYPE html>
<html lang="ja-jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drink Water</title>
    <link rel="apple-touch-icon" href="/static/Icon1024.png">
    <link rel="manifest" href="/manifest.json">
    <style>
        * {
            font-family: "Arial", "メイリオ";
            text-align: center;
            margin: 0;
        }

        h1{
            font-size: 70px;
            color: white;
            -webkit-text-stroke: 3px black;
        }
        
        .title{
            background-image: url("/static/Icon1024.png");
        }

        .contents {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
    
        button {
            margin: 5px;
            width: 200px;
            height: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0;
            background-color: #eee;
            border: 0;
            border-radius: 10px;
        }

        button:hover{
            background-color: #ddd;
        }
    
        button span {
            margin: 5px;
            font-size: 80px;
            margin-bottom: 10px;
        }
    
        button input {
            margin: 5px;
            width: 50px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="title"><h1>Drink Water</h1></div>
    <p>1日に1.5Lは水を飲め！</p>
    <h3 id="remaining-water-volume">今日の残りの水: 1500mL</h3>
    <p>Click to drink</p>
    <div class="contents">
        <button onclick="drink(200);">
            <span>🥛</span>
            200mL
        </button>
        <button onclick="custom();">
            <input type="number" value="500" step="10" id="volume" onclick="preventButtonClick(event)">
            <span></span>
            Custom
        </button>
    </div>
    <script>
        let water = 0
        fetch("/volume")
        .then(req => req.text())
        .then(data => {
            water = parseInt(data);
            document.querySelector("#remaining-water-volume").textContent = `今日の残りの水: ${water}mL`;
        });

        function drink(volume){
            water -= volume;
            document.querySelector("#remaining-water-volume").textContent = `今日の残りの水: ${water}mL`;
            fetch(`/drink?volume=${water}`);
        };

        function custom(){
            drink(document.querySelector("#volume").value);
        };

        function preventButtonClick(event) {
            event.stopPropagation();
        };
    </script>
</body>
</html>
```
CSS,Javascriptは一か所にまとめちゃいました。
```python:index.py
# app.pyにしたかったけどVercelだからできない
import json
from flask import Flask,render_template,request, send_file
import datetime

app = Flask('__app__')

@app.route('/')
def index():
    return render_template("index.html")

@app.route("/drink")
def drink():
    today = datetime.datetime.now().strftime("%Y-%m-%d")
    volume = request.args.get("volume")
    try:
        if volume:
            histroy = json.load(open("histroy.json"))
            if today in [h["date"] for h in histroy]:
                for h in histroy:
                    if h["date"] == today:
                        h["volume"] = int(volume)
            else:
                histroy.append({"date":today,"volume":int(volume)})
            json.dump(histroy,open("histroy.json","w"))
    except:
        return "Bad request",422
    return "OK"

@app.route("/volume")
def volume():
    today = datetime.datetime.now().strftime("%Y-%m-%d")
    histroy = json.load(open("histroy.json"))
    for h in histroy:
        if h["date"] == today:
            return str(h["volume"])
    return str(1500)

@app.route("/manifest.json")
def manifest():
    return send_file("manifest.json")

if __name__ == '__main__':
    app.run(host="0.0.0.0",port=10000)
```
# 作った感想
- 意外と、作るのは簡単だったし楽しかった
- PWA対応は結構便利
需要があれば一般公開します:cheese::cake:
コメント、いいねしてくれると嬉しいです._.