0件のコメントフロントエンド言語(HTML/CSS/JavaScript)のアウトプット練習帳です。第一回は、「数値を入力してクリックするとパーセンテージが変わるプログレスバー」を作ります。CodePen.まず、「Result」画面の「0-100」と記載されているテキストボックスに、0〜100までのいずれかの数値を入力し、「Submit」ボタンをクリックしてみてください。すると、入力した数値のパーセンテージのプログレスバーが表示されます。次に、「101」と入力して、同様にボタンをクリックしてみてください。すると、エラー画面が表示されることが確認出来ます。HTML/CSS(Bootstrapとグラデーション)Bootstrapまず、HTMLとCSSは「Bootstrap」を参考に制作しました。クラス(class)は下記の8つを使用しています。containerprogressprogress-barform-inlineform-groupform-controlbtnbtn-outline-info「Bootstrap」をダウンロードして、フォルダにある「bootstrap.css」というファイル内で検索すると、そのクラスのCSSを調べることが出来ます。グラデーションまた、プログレスバーのグラデーションカラーは、「WebGradients」というサイトで見つけたものを使用しています。Webデザインを考える際に、そのまま使いたくなるようなグラデーション例が多数載っているので、チェックする価値があると思います。「入力項目を制御するとき」に使用します。今回は、「0〜100の間の半角数字のみ」の入力を許可するように制御しています。全角数字やアルファベットなどは、入力してもエラー画面に遷移するようになっています。JavaScriptは下記のコードとなります。RegExp(/^(0|[1-9]?[0-9]|100)$/);また、入力項目の判定には下記のif文と、「RegExp」オブジェクトのメソッドである「test」(※文字列中で一致するものがあるかをテストする)を使用しています。!regNum.test(inputNum))アラートエラーが発生した際のアラート(alert)は、「SweetAlert」を使用しています。オシャレなデザインのアラート文を使うことが出来るので、とても便利です。実装するためには、HTMLに下記のコードを記載して、JavaScriptファイルの読込をします。src=”https://unpkg.com/sweetalert/dist/sweetalert.min.js”></script>また、「SweetAlert」の読込の前に、「jQuery」の読込が必要となります。第一回は「プログレスバー」のアウトプットを行いました。※本記事のアイキャッチ画像は、「Unsplash」を使用しています。プログラミング、Webデザインamiko編集者、デザイナー、宣伝のお仕事などを経験。現在は「デザインライター」として活動中。プログラマーとしてもお仕事をしています。好きなことは、読書、音楽(主にジャズ)、旅行。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。「デザインどころ」とは。デザインの思考や技術を、日々の暮らしや働き方、生き方に生かしたい。そんな思いでこのブログを作りました。「デザインのあるところ」を探し、語り、つくる旅がはじまります。Themegraphy。