01.プログレスバーをつくる

プログレスバー

フロントエンド言語(HTML/CSS/JavaScript)のアウトプット練習帳です。第一回は、「数値を入力してクリックするとパーセンテージが変わるプログレスバー」を作ります。

1. プログレスバーの動きを確認する

See the Pen
Progressbar
by design1096 (@design1096)
on CodePen.


まず、「Result」画面の「0-100」と記載されているテキストボックスに、0〜100までのいずれかの数値を入力し、「Submit」ボタンをクリックしてみてください。すると、入力した数値のパーセンテージのプログレスバーが表示されます。次に、「101」と入力して、同様にボタンをクリックしてみてください。すると、エラー画面が表示されることが確認出来ます。

2. HTML/CSS(Bootstrapとグラデーション)

Bootstrap

まず、HTMLとCSSは「Bootstrap」を参考に制作しました。クラス(class)は下記の8つを使用しています。

  1. container
  2. progress
  3. progress-bar
  4. form-inline
  5. form-group
  6. form-control
  7. btn
  8. btn-outline-info

「Bootstrap」をダウンロードして、フォルダにある「bootstrap.css」というファイル内で検索すると、そのクラスのCSSを調べることが出来ます。

グラデーション

また、プログレスバーのグラデーションカラーは、「WebGradients」というサイトで見つけたものを使用しています。
WebGradientsWebデザインを考える際に、そのまま使いたくなるようなグラデーション例が多数載っているので、チェックする価値があると思います。

3. JavaScript(正規表現とアラート)

正規表現

正規表現は、主に「入力項目を制御するとき」に使用します。今回は、「0〜100の間の半角数字のみ」の入力を許可するように制御しています。例えば、全角数字やアルファベットなどは、入力してもエラー画面に遷移するようになっています。JavaScriptは下記のコードとなります。
var regNum = new RegExp(/^(0|[1-9]?[0-9]|100)$/);

また、入力項目の判定には下記のif文と、「RegExp」オブジェクトのメソッドである「test」(※文字列中で一致するものがあるかをテストする)を使用しています。
if (inputNum == “” || !regNum.test(inputNum))

アラート

エラーが発生した際のアラート(alert)は、「SweetAlert」を使用しています。オシャレなデザインのアラート文を使うことが出来るので、とても便利です。実装するためには、HTMLに下記のコードを記載して、JavaScriptファイルの読込をします。
<script src=”https://unpkg.com/sweetalert/dist/sweetalert.min.js”></script>
また、「SweetAlert」の読込の前に、「jQuery」の読込が必要となります。

第一回は「プログレスバー」のアウトプットを行いました。


※本記事のアイキャッチ画像は、「Unsplash」を使用しています。

amiko
編集者、デザイナー、宣伝のお仕事などを経験。現在は「デザインライター」として活動中。好きなことは、読書、音楽(主にジャズ)、料理、旅行。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください