##JavaScript勉強メモ。
4点を意識して写経なり
- 動くアプリを作る
- 書いたコードを理解
- 機能またはデザインを追加
- 成果物は、ネット上にあげる
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>割り算電卓</title>
<style>
body{
font-size: 16px;
text-align: center;
font-family: Arial, sans-serif;
}
h1{
font-size: 24px;
}
input[type="text"]{
padding: 8px;
margin: 3px;
border: 1px solid #ddd;
border-radius: 3px;
width: 120px;
font-weight: bold;
font-size: 18px;
text-align: right;
}
#btn{
margin: 30px auto;
width: 180px;
border-radius: 5px;
box-shadow: 0 4px 0 #e91b0c;
background: #f44336;
color: #fff;
cursor: pointer;
padding: 7px;
}
#btn:hover{
opacity: 0.8;
}
</style>
</head>
<body>
<h1>割り勘電卓</h1>
<p>金額 <input type="text" value="0" id="price"></p>
<p>人数 <input type="text" value="0" id="num"></p>
<div id="btn">計算する</div>
<p id="result"></p>
<script>
(function(){
//データ取得（変数入れ）
var priceForm = document.getElementById("price");
var numForm = document.getElementById("num");
var btn = document.getElementById("btn");
var result = document.getElementById("result");
var x1,x2,y1,y2;
var unit = 100;
//データ取得（アクション）
priceForm.addEventListener("click", function(){
this.select();
});
numForm.addEventListener("click", function(){
this.select();
});
btn.addEventListener("click", function(){
var price = priceForm.value;
var num = numForm.value;
//入力値の正誤の分岐処理
if(price.match(/^[1-9][0-9]*$/) && num.match(/^[1-9][0-9]*$/)){
//入力値の割り切れ、余りの分岐処理
if(price % num === 0){
result.innerHTML = "一人" + (price/num) + "円です";
}else{
//足りない、余りの計算
x1 = Math.floor(price /num/ unit) * unit;
y1 = price - (x1 * num);
x2 = Math.ceil(price /num/ unit) * unit;
y2 = Math.abs(price - (x2 * num));
//足りない、余りの計算の表示
result.innerHTML = "一人" +x1+ "円だと" +y1+ "円足りません<br>" + "一人" +x2+ "円だと" +y2+ "円余ります";
}
}else{
result.innerHTML = "入力された値に誤りがあります。";
}
});
})();
</script>
</body>
</html>