どうもお久しぶりです! Atsu1209です。
今日はプログラマーが落ち着かなくなるコード書いてみたの第二弾です!
第一段はこちら↓↓↓
追記
続編を投稿しました 2024/5/16
成人判定
今回は成人を判定するプログラムを作ります。
方法は 学生かどうか、 年齢などを聞いて行きます。
HTML
まずフォームを作ります。
ただ成人判定するだけなのでデザインは書きません
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>成人判定(クソコード)</title>
</head>
<body>
<form id="form">
<input id="age">
<select id="select">
<option value="not h-school">高校生以下</option>
<option value="h-school">高校生</option>
<option value="unv">大学生</option>
<option value="not-unv">社会人</option>
</select>
<button type="sumbit" id="sumbit" onclick="btn()">判定</button>
</form>
</body>
</html>
かなり適当にhtmlを書きました。ここから学校と年齢から18歳以上かどうかを
判定していきます。
JavaScript
ここからお待ちかねのJavaScriptを使ったクソコードです!
まずは普通に書く
まずは動くかどうかのテストJSを書く
main.js
const form = document.getElementById("form");
form.addEventListener("submit", function(event){
event.preventDefault();
const select = document.getElementById("select");
const input = document.getElementById("age");
const selectValue = select.value;
const inputValue = input.value;
alert("年齢" + inputValue + "現在" + selectValue);
});
仕組みとしては
selectが大学生以上で年齢が18以上であるかどうかを確認する。
判定の仕方からもうクソですがそこは気にしないでください。
ここからクソコードを書いていきます。
始める前に
使いやすくhtmlのoptionのvalueを変更します
index.html
<option value="1">高校生以下</option>
<option value="2">高校生</option>
<option value="3">大学生</option>
<option value="4">社会人</option>
クソコード
では今回は if文を使って判定していきます。
main.js
var form = document.getElementById("form");
form.addEventListener("submit", function(event){
event.preventDefault();
var ageInput = document.getElementById("age");
var select = document.getElementById("select");
var age = parseInt(ageInput.value);
var status = parseInt(select.value);
if (status === 4 ) {
if (age >= 20){
alert("成人です");
} else {
alert("未成年です");
}
} else if (status === 3 ) {
if (age >= 18){
alert("成人です");
} else {
alert("未成年です");
}
} else if (status === 2 ) {
if (age >= 18){
alert("成人です");
} else {
alert("未成年です");
}
} else if (status === 1 ) {
if (age >= 20){
alert("成人です");
} else {
alert("未成年です");
}
}
});
しれっと constをvarをしておきました
気持ち悪いくらいにifをネストしました
せめて&&とか||をつかってほしいですよね
パワーアップ
パワーアップするにはコメントアウトを増やしまくったり変数名をローマ字にしたり
などの方法があります。
最後に
このクソコードを書いているときなんだか楽しかったです。
たまに息抜きでクソコード書いて遊ぶのもいいかもしれませんね
では