【jQuery コーディング練習】番外編:プラグイン「Datepicker」/カレンダー&入力チェック

目次

コーディング練習課題

課題内容
プラグイン「Datepicker」を使用してカレンダー機能のある入力フォームを作ります。申し込みボタン押下時に必須チェックを行い、未入力の項目があれば項目下にエラーメッセージを表示します。
デザインイメージ

▼PC表示

▼スマホ表示

コーディング仕様
コンテンツ幅
横幅は1000pxで、横のパディングは10pxです。
予約日
プラグイン「Datepicker」を使用してカレンダー機能を実装します。
受講形式
ラジオボタンを切り替えた際に、下のテキストも連動して切り替わるようにします。
入力チェック
「上記の内容で申し込む」ボタンを押した際に、未入力の項目の下にエラーメッセージを表示します。
レスポンシブ
ブレークポイントは600pxに設定します。
プラグインの読み込み
以下のファイルを読み込みます。
・jquery-ui.min.js
・jquery.ui.datepicker-ja.min.js

ファイルの読み込み方や使い方は、各自調べながらカレンダーを実装してみてください。

コーディングをはじめよう!

コーディング練習は、下記の2つからお選びいただけます。

  • ①模写コーディング:デモサイトを見ながら同じサイトを作る
  • ②デザインカンプからのコーディング:デザインデータをもとにサイトを作る

①「模写コーディング」に挑戦する

デモサイトをもとに、模写コーディングに挑戦してみましょう!

デモサイト

デモサイトはこちら

コーディングのヒント(レイアウト構成)

コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。
サイト全体と各パーツのレイアウト構成について解説しています。

解答例(ソースコード)

コーディングが完了したら、下記の「ソースコード」を参考に、自分の作ったコードとサイトをチェックしてみてください。

解答の1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。

ソースコードはこちら

参考(模写コーディングの手順)

模写コーディングのやり方に迷った方は、こちらの模写コーディングの手順を参考にしてみてください。

②「デザインカンプからのコーディング」に挑戦する

デザインカンプからのコーディングに挑戦してみましょう!

デザインカンプ

▼XDデータ
Windows用:XDデータをダウンロードする
Mac用:XDデータをダウンロードする
※ファイルを開くには、Adobe XDのインストールが必要です。

コーディングのヒント(レイアウト構成)

コーディングで悩んだ場合は、下記のレイアウト構成の組み立て方を参考にしてみてください。
サイト全体と各パーツのレイアウト構成について解説しています。

解答例(ソースコード、デモサイト)

コーディングが完了したら、下記の「ソースコード」と「デモサイト」を参考に、自分の作ったコードとサイトをチェックしてみてください。

ソースコード

解答の1例です。コーディングの仕方は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみてください。

ソースコードはこちら

デモサイト

デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。

デモサイトはこちら

関連記事

コーディング練習一覧

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習