ChatGPT Prompting 으로 ILV 턱걸이 타이머 만들기

ILV Workout

6.00

ChatGPT Prompt :

1. write in Html.

2. center the title "ILV Workout".

3. create a large, centered "Start" button below it.

4. Below the Start button is a timer, hold at an initial value of 6.00, with values from 6.00 to 1.00.

5. When you press the Start button, the Start button turns into a Stop button, and taken to the next section.

6. The timer counting down from 6.00 value to 1.00 seconds, and at the same time, one of the random letters (I, L, V) is displayed large and centered below the timer.

7. When it reaches 1.00 seconds, it goes back to 6.00 seconds, and the letters randomly change to other letters. 7. Pressing the "Stop" button will stop the timer, display the elapsed time below the letters, and turn the "Stop" button into a "start" button.

8. At this point, pressing the Start button will reset the total time to 0.00 seconds and repeat the above process again.

9. After pressing Stop, pressing Start will reset the accumulated time to 0.00 and make it start at 6.00 seconds again.

ChatGPT작성 html:

<!DOCTYPE html>
<html>
<head>
  <title>ILV Workout</title>
  <style>
    /* Center the title and the button */
    h1, button {
      display: block;
      margin: auto;
      text-align: center;
      font-size: 5em;
    }

    /* Center the timer and the letter */
    #timer, #letter {
      display: block;
      margin: auto;
      text-align: center;
      font-size: 5em;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>ILV Workout</h1>
  <button id="startstop" onclick="startstop()">Start</button>
  <div id="timer">6.00</div>
  <div id="letter"></div>

  <script>
    var timer = null;
    var startTime = null;
    var elapsed = null;
    var letters = ["I", "L", "V"];

function startstop() {
  var button = document.getElementById("startstop");

  if (timer == null) { // start the timer
    document.getElementById("timer").innerHTML = "6.00";
    startTime = new Date().getTime();
    timer = setInterval(countdown, 10);
    button.innerHTML = "Stop";
  } else { // stop the timer
    clearInterval(timer);
    elapsed = new Date().getTime() - startTime;
    timer = null;
    button.innerHTML = "Start";
    document.getElementById("timer").innerHTML = (elapsed / 1000).toFixed(2);
    accumulatedTime += elapsed; // accumulate elapsed time
  }
}

function reset() {
  clearInterval(timer);
  timer = null;
  accumulatedTime = 0; // reset accumulated time
  document.getElementById("timer").innerHTML = "6.00";
  document.getElementById("letter").innerHTML = "";
  document.getElementById("startstop").innerHTML = "Start";
}


    function countdown() {
      var t = parseFloat(document.getElementById("timer").innerHTML);
      var letter = document.getElementById("letter");

      if (t <= 1.00) { // reset the timer and change the letter
        t = 6.00;
        letter.innerHTML = letters[Math.floor(Math.random() * letters.length)];
      } else {
        t -= 0.01;
      }

      document.getElementById("timer").innerHTML = t.toFixed(2);
    }
  </script>
</body>
</html>

'Science' 카테고리의 다른 글

대규모 언어 모델이 인간 인지에 대한 좋은 이론을 만드는 데 도움이 될 수 있을까? (0)	2023.03.25
얼룩말의 매혹적인 진화 생물학: 줄무늬, 속도, 그리고 소셜 네트워크 (0)	2023.03.24
후쿠시마 오염수의 해양 배출에 대한 과학적 분석: 주변 국가 및 환경에 미치는 영향 (1)	2023.03.22
제너레이티브 아트의 세계: 제너레이티브 아티스트 (2)	2023.03.21
인공지능 시대의 프로그래밍: 미래에 적응하기 (1)	2023.03.20