【文系PMの作る】nuxt+netlify+firebaseで作る最高の睡眠を記録するwebアプリ（後編）

前回のあらすじ

前回のqiita

「【文系PMの作る】nuxt+netlify+firebaseで作る最高の睡眠を記録するwebアプリ（前編）」
https://qiita.com/you8/items/7b604f91fabe46871b1c

nuxtで睡眠快適度を送ってグラフ化するアプリで前回は入力まで。今回はchart.jsを使ってグラフにします。と思ったんですが躓いて間に合わなかったのでおまけ的に作ってた機能で。chart.jsはまたこんど記事に書くぞ（泣）

入力する数値によって表情を変える

ちょっとオマケ機能になりますが入力する睡眠快適度によって表情を変える機能を実装しました。コード的には下記。

  <div v-if="note_content > 80">
    <img src="~/assets/img/status5.png" />
  </div>
  <div v-else-if="note_content > 60">
    <img src="~/assets/img/status4.png" />
  </div>
  <div v-else-if="note_content > 40">
    <img src="~/assets/img/status2.png" />
  </div>
  <div v-else-if="note_content >= 0">
    <img src="~/assets/img/status1.png" />
  </div>
  <div v-else>
    <img src="~/assets/img/status3.png" />
  </div>
  <p><b-form-input v-model="note_content" type="range"></b-form-input></p>
  <p><button @click="saveContent(note_content)">おはよー！！</button></p>

こんな感じで変わる。

絵文字

絵文字はemojioneがいい感じだった

かわいい

趣味プログラミングのすすめ

とまあ非エンジニアの趣味エンジニアリングをまとめてきました。プログラミング覚えると日曜大工的にモノづくりを楽しめておすすめです。しかもプログラミングは日曜大工と違って材料費かからないのでお得。