[구구단 게임] 챗 GPT로 구구단 게임 만들어보기

import React, { useState } from 'react';

const GugudanGame = () => {
  const [question, setQuestion] = useState({}); // 현재 문제를 담는 상태
  const [userAnswer, setUserAnswer] = useState(''); // 사용자가 입력한 답을 담는 상태
  const [message, setMessage] = useState(''); // 정답 여부 메시지를 담는 상태

  // 랜덤한 구구단 문제 생성 함수
  const generateQuestion = () => {
    const num1 = Math.floor(Math.random() * 9) + 1; // 1부터 9까지의 숫자 중 하나 랜덤 선택
    const num2 = Math.floor(Math.random() * 9) + 1;
    const answer = num1 * num2;
    setQuestion({ num1, num2, answer }); // 문제 설정
    setUserAnswer(''); // 사용자 답 초기화
    setMessage(''); // 메시지 초기화
  };

  // 사용자가 답을 입력할 때 실행되는 함수
  const handleChange = (e) => {
    setUserAnswer(e.target.value);
  };

  // 정답 확인 함수
  const checkAnswer = () => {
    const parsedUserAnswer = parseInt(userAnswer);
    if (parsedUserAnswer === question.answer) {
      setMessage('정답입니다!');
    } else {
      setMessage('틀렸습니다. 다시 시도해보세요.');
    }
  };

  return (
    <div>
      <h2>구구단 게임</h2>
      <div>
        {/* 문제 출력 */}
        {question.num1} × {question.num2} = ?
      </div>
      <input
        type="number"
        value={userAnswer}
        onChange={handleChange}
        placeholder="정답을 입력하세요"
      />
      <button onClick={checkAnswer}>정답 확인</button>
      <button onClick={generateQuestion}>새 문제</button>
      {/* 정답 여부 메시지 출력 */}
      {message && <div>{message}</div>}
    </div>
  );
};

export default GugudanGame;

 

 

 

 

 

 

css도 챗 gpt에 요청할 수 있음