AI生成

B002 Color Picker


生成AIで作成しました。カラーコードを取得します。

作成物

Color Picker

Color Picker

作業

生成AI:ChatGPTの無料版

入力したプロンプト 再現性がとれていません。以下のキーワードの組で偶然生成。
使い手がありそうなので、ひとまず掲示しています。

カラーピッカーのwebサイトコードを作成してください。
カラーコードはテキストボックスに表示できるようにしてください。

出力

<!DOCTYPE html>
<html>
  <head>
    <title>Color Picker</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Color Picker</h1>
    <div>
      <input type="color" id="colorPicker">
      <input type="text" id="colorCode">
    </div>
    <script>
      const colorPicker = document.querySelector('#colorPicker');
      const colorCode = document.querySelector('#colorCode');
      
      colorPicker.addEventListener('change', () => {
        colorCode.value = colorPicker.value;
      });
    </script>
  </body>
</html>

調整

変更を複数回繰り返しています。(追えていません)

使用例

コメント