みなさん！メリークリスマスです🎄
アドベントカレンダー連載をここまでお読みいただいて！どうもありがとう🙇♂️㌧クス！
さて、出展作づくり 『はじめの一歩』 連載ですが、いちばん伝えたい事は①②に書いちゃいました💦
なので、今回はおまけというか。。ぶっちゃけ、ググれば誰でもできる小手先テク紹介集です。軽い気持ちでどうぞ！（でも、折角だから！！最後まで記事読んで欲しいよ～やっぱり、おねがい🥺）
Day④『スマホで使いたいから！日付入力はシンプルにしたいんよ！』
『この、”にょろぼん”。過去三度コンテストに挑み、すでに老獪さを身につけておる！』(←脳内変換、ランバ・ラル風)
『フフフ！知っているのだよ！みんなが欲しいと思う部品は、だいたいググれば出てくるって事を！！』
という事で。。早速ググっていきます！ JSでカレンダー使う描き方を知りたいから。。。
検索ワードはこんな感じ： JavaScript カレンダーから 日付を選択 でと。えいっ！[Enter]
https://xtech.nikkei.com/atcl/nxt/column/18/02125/071200001/
おっ！いい感じ！なになに？タグを<input type=”date”>にするだけ？(JSファイルで扱えるよう！idは元のをそのまま使用ね♪)
早速、引換開始日(validDate)と引換終了日(expireDate)のタグを、<div></div>から から
<input type=”date”></input>に書き換えますよと。。
でもって。コンビニは3チェーンしかないから(セコマファンのみなさん🗾ごめん。)リストから選択にしたいよね。
検索ワードはこんな感じ： JS リストから 選択 えいっ！[Enter]
https://www.javadrive.jp/javascript/form/index5.html
コレですよコレ！超よく見るやつ。。早速CVSﾁｴｰﾝのタグを<div></div>から から
<select class="from-select"></select>に書き換えてと。。。（以下略）
もう、こんな感じで。恥も見栄も考えず！ ひたすら、尊敬を込めたオマージュ！というか、まるパ○リ していきます！
学ばせて頂いている！という感謝と尊敬の気持ちがあればイイんです！
まるごとコピペしてきても、１文字でもコード変えて使ったら。。よっぽどヒドくない限り、許されるのです！（たぶん。。）
ちょっと進化版cvsTicket.html
!引換可能なチケットリストは以下の通りです!
<div id="result" class="normal"></div>
<input type="date" name="date" id="validDate">引換開始日</input><br>
<input type="date" name="date" id="expireDate">引換終了日</input><br>
<select class="from-select" id="cvs" required aria-label="select-example" >
<option value="セブンイレブン">セブンイレブン</option>
<option value="ローソン">ローソン</option>
<option value="ファミリーマート">ファミリーマート</option>
<option value="その他CVS">その他</option>
</select>CVSﾁｴｰﾝ<br>
<input type="text" name="商品" id="goodsName" size="25" maxlength="25">商品名<br>
<button id="submit">決定する</button>
アドベントカレンダー連載では 『最初の一歩』 を踏み出す過程を、なるべく正直に描いて参考にしてもらう！がテーマでした。
その意味では、第一歩を踏み出す時の ”にょろぼん” の行動記録！なるべく当時の温度感のまま紹介したつもりです。
現実には…この思いつき段階から、出展作として仕上げていく段階で、技術的にひと山ふた山⛰超えていく事になるワケですが。。そんな細かい話には、需要が無いと思う！
やはり、『最初の、踏み出す、その一足が』 みんな苦労するところだと思うので。
挑戦しようとしているみなさん📣是非、参考にしてくださいね！
そして、頭に浮かんできたアイデアを、実際の部品としてhtmlとJSファイルに描き出す📝！
連載②のところまでは、是非やってみて欲しいと思ってます。そしたら結構行けると思うんだよね✨
では、みなさん。最後まで読んでくれてありがとう！ 来年もガンバろーね♪ 良いお年を！
”にょろぼん” より