Company Information App
会社名:
以下はJavaScriptを使用して実装した例です。ユーザーが入力した会社名に応じて、各情報を表示する処理を行います。また、不正な入力がされた場合や、検索結果が存在しなかった場合には、エラーメッセージを表示します。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Company Information App</title>
<script>
function searchCompany() {
// 入力された会社名を取得
var companyName = document.getElementById("companyName").value;
// 入力内容のチェック
if (!companyName) {
alert("会社名を入力してください。");
return;
}
// XHRでAPIを叩いて結果を取得
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://company-info-api.com/" + companyName);
xhr.addEventListener("load", function() {
var result = JSON.parse(xhr.responseText);
if (!result || !result.capital || !result.sales || !result.profit || !result.activity || !result.history) {
alert("情報が見つかりませんでした。");
} else {
// HTMLに情報を表示
var resultHtml = "【" + companyName + "】<br>"
+ "資本金:" + result.capital + "円<br>"
+ "売上:" + result.sales + "円<br>"
+ "営業利益:" + result.profit + "円<br>"
+ "活動内容:" + result.activity + "<br>"
+ "<hr>" + result.history;
document.getElementById("result").innerHTML = resultHtml;
}
});
xhr.send();
}
</script>
</head>
<body>
<h1>Company Information App</h1>
<p>会社名:<input type="text" id="companyName"></p>
<button onClick="searchCompany()">検索</button>
<div id="result"></div>
</body>
</html>
```
ジョークとしては、検索画面に「会社名はユーザー名やパスワードにしないでください。」という注意書きを加えることができます。