プレビュー(preview)

① 入力欄を追加する方法

例えば「D欄」を追加したい場合は、 下のコードをコピーして追加します。

<div class="input-group">
<label>D欄</label>
<input type="text" id="d">
</div>

② JavaScriptに追加する

下の部分に追加します。

const d = document.getElementById("d").value;

③ 出力部分に追加する

文章に表示したい場所へ追加します。

D欄:${d}

④ 項目名を変更する方法

「A欄」を「住所」に変えたい場合 下の2か所を変更します。

<label>住所</label>
住所:${a}

⑤ テキストを変更する方法

下の部分を書き換えるだけで 文章を自由に変更できます。

${name}さんこんにちは。

↓ 例

${name}様、お世話になっております。

⑥ コピー機能はいらない場合

このボタン部分を削除します。

<button class="copy-btn" onclick="copyText()">
コピー
</button>

⑦ デザインの色を変える方法

この部分の色コードを変更します。

background:#4f46e5;

↓ 例

background:pink;
background:#ff69b4;
background:skyblue;

⑧ 完成イメージ

入力欄を増やしたり、 文章を変更することで オリジナルの文章生成ツールを作れます。

📝 TOP
📘 Googleサイト 📝 ブログ 🎁 BOOTH ☁️ Cloudflare 💌 マシュマロ