jQueryの練習がてらにトレードオフ・スライダーを作ってみた

最近アジャイルサムライを読んでいるのですが、 その中でjQueryの練習にちょうどいい課題を見つけたんで、早速作ってみました。

今更jQuery再入門

僕のJSレベルは、JSは殆ど知らないけど、jQueryはちょっとだけ知っている感じです。 なるべく管理しやすい方法でかけるようにいろいろ試行錯誤中なんだけども、とりあえずできた感じ。(1回だけ、泣く泣くparentを使った。) とりあえず、HTMLをBEMっぽい感じ(厳密に合っているかどうかはしらん。)で書いてみたんだけど、どれが共通とか考えなくて良くなったんで、 CSSとかすごい苦手な僕にとってはいい感じ。

成果物の説明

画面はこんな感じ。

trade-off

最初は「スコープ」、「予算」、「品質」、「時間」をデフォルトで設定してあって、 あとは、追加ボタンを押せば項目を追加できるような感じのシンプルなツール。

それぞれ5段階で設定できるようにしてあって、

MAX(最大値)までスライドさせるとラベルが赤くなり、取り組むべきものがわかりやすくしている。

tradeoff-max

MIN(最小値)までスライドさせるとラベルが緑になり、諦める項目がわかりやすいようにしてある。

tradeoff-min

これでみんなでこれを触りながらMTGが出来ればいいなって思っている。

最後にURL

ここで公開していますので、ご自由にお使いください。 トレードオフ・スライダークリエイター

githubにもリポジトリを作っています。 tradeoff-slider