【電卓をつくってみた】
少し前に写経レベルですが書いたみたものを残しておきます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡易電卓</title>
<script src="main.js"></script>
<link rel='stylesheet' href='main.css' type='text/css' />
</head>
<body>
<form name="form" id="calform">
<table id="calform">
<tr>
<td colspan="3"><input type="text" name="text" value="0"></td>
<td><input type="button" value="C" onClick="calc('C')"></td>
</tr>
<tr>
<td><input type="button" value="7" onClick="calc('7')"></td>
<td><input type="button" value="8" onClick="calc('8')"></td>
<td><input type="button" value="9" onClick="calc('9')"></td>
<td><input type="button" value=/ onClick="calc('/')"></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="calc('4')"></td>
<td><input type="button" value="5" onClick="calc('5')"></td>
<td><input type="button" value="6" onClick="calc('6')"></td>
<td><input type="button" value="?" onClick="calc('*')"></td>
</tr>
<tr>
<td><input type="button" value="1" onClick="calc('1')"></td>
<td><input type="button" value="2" onClick="calc('2')"></td>
<td><input type="button" value="3" onClick="calc('3')"></td>
<td><input type="button" value="-" onClick="calc('-')"></td>
</tr>
<tr>
<td><input type="button" value="0" onClick="calc('0')"></td>
<td><input type="button" value="." onClick="calc('.')"></td>
<td><input type="button" value="+" onClick="calc('+')"></td>
<td><input type="button" value="=" onClick="calc('=')"></td>
</tr>
</table>
</form>
</body>
</html>
script.js
function calc(cmd) {
if (cmd == "=") {
document.form.text.value = eval(document.form.text.value)
} else if (cmd == "C") {
document.form.text.value = "" ;
} else {
document.form.text.value += cmd;
}
}
実際にやってみてエンジニアのすごさを改めて実感しますね。こういう業務をしている中で電話など横やりが入ると冷静でいられなくなります。ユーザが使いやすいサービスを作るために日々画面に向き合い、実装をしている方々の尊さを肌で実感する機会でした。。。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?