結果:
なぜプログラマーはコーヒーを飲みながら仕事をするのか?
答え:コードが流れているから。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字消しアプリ</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.input-container {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 150px;
font-size: 16px;
padding: 10px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
}
.output-container {
display: none;
}
.output-text {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.output-joke {
font-size: 14px;
color: grey;
}
</style>
</head>
<body>
<div class="input-container">
<textarea id="text-input" placeholder="文章を入力してください"></textarea>
<button onclick="removeText()">指定した文字を消す</button>
</div>
<div class="output-container">
<p class="output-text">結果:</p>
<p id="output"></p>
<p class="output-joke">なぜプログラマーはコーヒーを飲みながら仕事をするのか?<br>答え:コードが流れているから。</p>
</div>
<script>
function removeText() {
var inputText = document.getElementById("text-input").value;
var outputText = inputText.replace(/[指定した文字]/g, "");
document.getElementById("output").innerText = outputText;
document.querySelector(".output-container").style.display = "block";
}
</script>
</body>
</html>
上記のHTMLファイルは、「指定した文字を文章から消すアプリ」です。ユーザーがinput要素に文章を入力し、指定した文字を指定したいしたい場合に使用します。
アプリの利用方法:
1. テキストエリアに文章を入力します。
2. 「指定した文字を消す」ボタンをクリックします。
3. 出力結果が表示されます。指定した文字が文章から削除されます。
※文字の指定方法は、JavaScriptの正規表現を使用しています。指定した文字の部分を正規表現で置換することで、指定した文字を削除しています。
また、アプリを少し楽しくするためにジョークも追加しました。プログラマー向けのジョーク、「なぜプログラマーはコーヒーを飲みながら仕事をするのか?答え:コードが流れているから。」です。