#Spring画面系をどう乗り切るか（技術面）その2

##CSS/jQueryを試してみる。
###趣旨
とんがった案件でなくてもSpring画面系で必要な技術　HTML　CSS　jQuery　Bootstrap
が出てくるのが当たり前になっている状況がある。

###公開しているページを改良しながら電卓を作ってみる
####参考にしたページ
https://codeforfun.jp/jquery-how-to-create-a-simple-calculator/
####修正内容
・４則計算記号を変更した。
→　それに伴って正規表現を使用した。
・gridを使用するようにした。
.ライブラリを使って電卓を表示するようにした。
####モジュール一覧
・calc.css
・calculator.png
・calculatorBasic.html
・form.html
・jquery.calculator.js
・jquery.calculator.min.js
・jquery.plugin.js
・jquery.plugin.min.js

####学習用アプリの画像貼り付け
####ソース抜粋

####作るもの

<script>
$(function(){
    $('.button').click(function(){
        var pushed = $(this).text();
        var inputLabel = $('#boxinputLabel');

        var h1Text = inputLabel.text();
        h1Text = h1Text.replace("×", "*");
        h1Text = h1Text.replace("÷", "/");
        if (pushed == '=') {
            // 計算
            inputLabel.text(eval(h1Text));
        } else if (pushed == 'AC') {
            // 全てクリア
            inputLabel.text('0');
        } else {
          　alert(inputLabel.text())
            console.log(inputLabel.text());
            if (inputLabel.text() == '0') {
                inputLabel.text(pushed);
            } else {
                inputLabel.text(inputLabel.text() + pushed);
            }
        }
    });
});

  <style>
* {
    font-family: 'Inconsolata', monospace;
    color: #555;
　}
body
{
      background-color: white;
}
body > * {
    margin: 3px;
    padding: 10px;
}
.container {
margin: auto;
padding:auto;
display: grid;
grid-template-columns: 40px 40px 40px 40px;
grid-template-rows: 50x 40px 40px 40px 40px 40px;
width: 220px;
background-color: #E0DEDA;
grid-gap: 20px;
    margin: 3px;
    padding: 10px;
}
.container > * {
align : center;
}
#boxinputLabel{
grid-column: 1 / span 4;
grid-row-start: 1;
grid-row-end: 2;
background-color: #DFE9E9;
padding-left: 1rem;
padding-right: 1rem;
}

#boxAC {
grid-column: 1 / span 3;
grid-row-start: 2;
grid-row-end: 2;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box÷ {
width:10%;
grid-column: 4/ span 1;
grid-row:2;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box7 {
width:10%;
grid-column: 1/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;

}
#box8 {
width:10%;
grid-column: 2/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box9 {
width:10%;
grid-column: 3/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box× {
width:10%;
grid-column: 4/ 4;
grid-row:3;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box4{
width:10%;
grid-column: 1/ 4;
grid-row:4;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
#box5{
width:10%;
grid-column: 2/ 4;
grid-row:4;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
#box6{
width:10%;
grid-column: 3/ 4;
grid-row:4;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#boxMinus{
width:10%;
grid-column: 4/ 4;
grid-row:4;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box1{
width:10%;
grid-column: 1/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}
#box2{
width:10%;
grid-column: 2/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box3{
width:10%;
grid-column: 3/ 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxPlus{
width:10%;
grid-column: 4 / 4;
grid-row:5;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#box0{
grid-column:1 / span 2;
grid-row:6;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxTen{
width:10%;
grid-column: 3/ 4;
grid-row:6;
background-color: white;
padding-left: 1rem;
padding-right: 1rem;
}

#boxEqual{
width:10%;
grid-column: 4/ 4;
grid-row:6;
background-color: white;
grid-gap: 10px;
padding-left: 1rem;
padding-right: 1rem;
}
© 2020 GitHub, Inc.

<html>
<head>
<meta http - equiv="Content-Type" content="text-html; charset=UTF-8">
<title>登録フォーム</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
	$("form").submit(function(){
		var checksubmit = true;
		if($("#uname").val() == ""){
			checksubmit = false;	
		}
		
		if($(":radio:checked").length == 0){
			checksubmit = false;
		}
		return checksubmit;
	});		
});
</script>
</head>
<body>
<form>
キャストID<br>
<input type="text" name="id" id = "id">
<br><br>
パスワード<br>
<input type="text" name="pass" id = "pass">
<br><br>
キャスト名（必須）<br>
<input type="text" name="uname" id = "uname">
<br><br>
<input type="submit" value="登録する">
</form>
</body>
</html>

【URL】
以前IBMクラウドに乗せたもの。
https://paasjqueryflask1001.mybluemix.net/
【Github】
ダウンロードしていただければ説明していた通りの動きをするはず。
https://github.com/noikedan/flask-sample
【言語・FW】
・HTML/CSS/ JQuery（jQuery UI）
・Flask
【開発環境】
・mi
・Atom
【インフラ等】
・IBM Cloud
IBMクラウドへの乗せ方はこちらを参考にしてください。
https://qiita.com/makaishi2/items/21cbdb99444fb50e01e1

###Formの練習をしてみる。

http://www.awsginaexample.com.s3-website-ap-northeast-1.amazonaws.com/form1.html
http://www.awsginaexample.com.s3-website-ap-northeast-1.amazonaws.com/form2.html

##やって見て
練習にはなると思う。やらないよりはマシ以上の手応えは感じると思う。
・クラスとIDの違いを実感する。
・JQueryになれる。
・ソースを読む体験ができる。
など

Spring 案件ソルーション 1
https://qiita.com/gina/items/02f64562b6928606c716
Spring 案件ソルーション 2
https://qiita.com/gina/items/7f027db7a3ba91266c59