どうもAtsu1209です。
今回は煽ってくる電卓を作ろうと思います。
具体的には 一桁 + 一桁などの簡単な計算のときに煽ってきたり
などいろいろな場面で煽ってくるようにします。
作る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>煽ってくる電卓</title>
</head>
<body>
<div id="calculator">
<h2>煽ってくる電卓</h2>
<input type="text" id="inputField" placeholder="式を入力してください" readonly />
<div class="row">
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('+')">+</button>
</div>
<div class="row">
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('-')">-</button>
</div>
<div class="row">
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendValue('*')">×</button>
</div>
<div class="row">
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button id="clear" onclick="clearInput()">C</button>
<button onclick="appendValue('/')">÷</button>
</div>
<button id="equals" onclick="calculate()">=</button>
<p id="result">結果: </p>
</div>
<script>
function appendValue(value) {
document.getElementById("inputField").value += value;
}
function clearInput() {
document.getElementById("inputField").value = '';
document.getElementById("result").textContent = '結果: ';
}
</script>
</body>
</html>
とりあえず計算結果が全然違う電卓からHTMLとJSを引っ張ってきました。
ここから煽り要素を入れていきます。
煽る
for (let i = 0; i <= 9; i++) {
for (let j = 0; j <= 9; j++) {
if (input === `${i}+${j}`) {
message = "こんなのもできないの?ww";
}
}
}
for (let i = 0; i <= 9; i++) {
for (let j = 0; j <= 9; j++) {
if (input === `${i}-${j}`) {
message = "こんなのもできないの?www 草生えるww";
}
}
}
for (let i = 0; i <= 9; i++) {
for (let j = 0; j <= 9; j++) {
if (input === `${i}*${j}`) {
message = "義務教育失敗";
}
}
}
for (let i = 0; i <= 9; i++) {
for (let j = 0; j <= 9; j++) {
if (input === `${i}/${j}`) {
message = "電卓使う必要ある?www";
}
}
}
まず一桁どうしの計算の場合に実行されるようにした
なにかパワーアップがあればコメントお願いします。