オフラインで使える文字カウンターの作り方。

ChatGTPで作りましたが、掲載しているコードを利用すれば、誰でも簡単に作れます。

AIで簡単な事務ハックソフトをつくる

AIで簡単な事務ハックソフトをつくる

①AIに提案する。

・簡単な
・オフラインで
・メモ帳で書けるコード
などを提案すれば開発環境がなくてもアプリが作れます。

今回は「オフラインで」と注文したので、ブラウザを媒体に起動するコードが出力されました。

コードをコピーしメモ帳に張り付ける。

以下はコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字数カウンター</title>
<style>
body {
    font-family: sans-serif;
    margin: 20px;
}
textarea {
    width: 100%;
    height: 200px;
    font-size: 16px;
}
.count {
    margin-top: 10px;
    font-size: 16px;
}
</style>
</head>
<body>

<h2>文字数カウンター（オフライン対応）</h2>

<textarea id="text" placeholder="ここに文章を入力してください"></textarea>

<div class="count">
    文字数（改行含む）：<span id="count">0</span>
</div>

<script>
const textArea = document.getElementById('text');
const countSpan = document.getElementById('count');

textArea.addEventListener('input', function () {
    countSpan.textContent = textArea.value.length;
});
</script>

</body>
</html>