Spring画面系をどう乗り切るか（技術面）その３
CSS/Jqueryを試してみる。
趣旨
とんがった案件でなくてもSpring画面系で必要な技術 HTML CSS jQuery Bootstrap
が出てくるのが当たり前になっている状況がある。今回は公開しているページを改良しながら
電卓を作ってみることによりCSS/Jqueryの練習をしてみようと思う。
参考にしたページ
https://codeforfun.jp/jquery-how-to-create-a-simple-calculator/
修正内容
・ ４則計算記号を変更した。
→ それに伴って正規表現を使用した。
・ gridを使用するようにした。
モジュール一覧
・calc.html
・calc.css
学習用アプリの画像貼り付け
プログラム部分
<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: 80px 40px 40px 40px 40px 40px;
width: 220px;
background-color: #E0DEDA;
grid-gap: 20px;
}
.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;
}
IBMCloud上に乗せたもの。
Flaskアプリ上に先ほどのアプリを乗せている。
試せる。
https://flask-sample-jquery.mybluemix.net/
参考 URL
https://www.ibm.com/cloud/blog/simple-hello-world-python-app-using-flask
今後
気になっているところ
→ Form＋Jquery