色を変える　投稿カウンター　と

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-title" content="はじめてのアプリ">

  <title>はじめてのアプリ</title>

  <style>

    body {

      margin: 0;

      height: 100vh;

      height: 100dvh;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      background-color: #007AFF ;

      font-family: -apple-system, BlinkMacSystemFont, sans-serif;

      color: white;

      gap: 24px;

      overflow: hidden;

      transition: background-color 0.4s ease;

    }

    h1 {

      font-size: 28px;

      font-weight: 600;

      margin: 0;

    }

    #count {

      font-size: 48px;

      font-weight: 700;

      margin: 0;

    }

    button {

      font-size: 20px;

      padding: 14px 32px;

      border: none;

      border-radius: 12px;

      background-color: white;

      color: #007AFF ;

      font-weight: 600;

      cursor: pointer;

    }

    button:active {

      transform: scale(0.96);

    }

  </style>

</head>

<body>

  <h1>はじめてのアプリ</h1>

  <p id="count">0回</p>

  <button onclick="changeColor()">色を変える</button>

  <script>

    let count = 0;  // 回数を覚えておく箱

    function changeColor() {

      // 回数を1増やす

      count = count + 1;

      document.getElementById("count").textContent = count + "回";

      // 色を変える

      const colors = ["#007AFF", "#34C759", "#FF3B30", "#AF52DE", "#FF9500", "#5856D6"];

      const randomColor = colors[Math.floor(Math.random() * colors.length)];

      document.body.style.backgroundColor = randomColor;

    }

  </script>

</body>

</html>

HTMLで作業
最初の行はこれはHTMLで動きますとパソコンに宣言してます
背景の色決めて
ボタン作って
ボタン押したら色が変わって
何回押したか表示する