본문 바로가기
사용후기

chatGPT로 개발한 초간단 계산기(html+css+js)

by 꽃차살롱 2023. 2. 15.
반응형

요즘 누구나 다 해본다는 챗지피티(chatGPT)를 사용해 봤습니다.

정말 놀랍습니다. 이 정도라니.... 

 

https://openai.com/blog/chatgpt/

 

ChatGPT: Optimizing Language Models for Dialogue

We’ve trained a model called ChatGPT which interacts in a conversational way. The dialogue format makes it possible for ChatGPT to answer followup questions, admit its mistakes, challenge incorrect premises, and reject inappropriate requests. ChatGPT is

openai.com

구글 ID를 활용해 바로 로그인하고 사용할 수 있습니다.

최초 로그인까지 3분 정도 걸리는데요. 클릭 클릭해서 다음으로 넘어갈 수 있습니다.

사용법도 정말 편리합니다. 한 번씩 해보시길 정말 추천드립니다!!

 

chatGPT가 가지고 있는 능력, 무섭기도 하고, 획기적입니다.

chatGPT에게 자바스크립트를 활용하여 계산기를 만드는 코드를 짜달라고 부탁했습니다.

결과가 무척 놀랍습니다. 코딩 부트캠프 다닐 때 계산기 만드느라 그 고생을 했는데, 챗지피티만 있으면 코드 짜는 것도 문제가 없네요. 주석까지 달아주다니...

 

단순 챗봇 수준이 아닙니다. 매우 똑똑한 컴퓨터와 대화하는 것 같았습니다. 한국어, 영어... 지구상의 모든 언어가 가능한 것 같습니다. 바로 접속하셔서 '영화 아바타에 대해 어떻게 생각하나요?"라고 질문해 보세요. 사람이 글을 쓰는 건지, 기계가 글을 쓰는 건지... 전혀 구분이 안 갑니다.


<!DOCTYPE html>
<html>
  <head>
    <title>chatGPT로 만든 계산기</title>
  </head>
  <body>
    <h1>chatGPT로 만든 계산기</h1>
    <input type="text" class="screen">
    <br>
    <button class="button" value="1">1</button>
    <button class="button" value="2">2</button>
    <button class="button" value="3">3</button>
    <button class="button" value="+">+</button>
    <br>
    <button class="button" value="4">4</button>
    <button class="button" value="5">5</button>
    <button class="button" value="6">6</button>
    <button class="button" value="-">-</button>
    <br>
    <button class="button" value="7">7</button>
    <button class="button" value="8">8</button>
    <button class="button" value="9">9</button>
    <button class="button" value="*">*</button>
    <br>
    <button class="button" value="0">0</button>
    <button class="button" value="/">/</button>
    <button class="button" value="C">C</button>
    <button class="button" value="=">=</button>
    
    <script>
      // 버튼 클릭 이벤트 추가
      var buttons = document.querySelectorAll('.button');
      var screen = document.querySelector('.screen');

      for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {
          // C 버튼 클릭 시 화면 초기화
          if (this.value == 'C') {
            screen.value = '';
          }
          // = 버튼 클릭
          else if (this.value == '=') {
            screen.value = eval(screen.value);
          }
          // 기타 숫자나 연산자 버튼 클릭
          else {
            screen.value += this.value;
          }
        });
      }
    </script>
  </body>
</html>
.calculator {
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 240px;
  margin: 0 auto;
  padding: 10px;
}

.screen {
  width: 100%;
  height: 40px;
  font-size: 20px;
  text-align: right;
  margin-bottom: 10px;
}

table {
  width: 100%;
}

td {
  padding: 5px;
}

button {
  width: 100%;
  height: 40px;
  font-size: 20px;
  border-radius: 4px;
  border: none;
  margin: 1px;
}

.button {
  background-color: #f2f2f2;
}

.operator {
  background-color: #4CAF50;
  color: white;
}

.clear {
  background-color: #f44336;
  color: white;
}

.equals {
  background-color: #555555;
  color: white;
}
// 버튼 클릭 이벤트 추가
var buttons = document.querySelectorAll('.button');
var screen = document.querySelector('.screen');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    // C 버튼 클릭 시 화면 초기화
    if (this.value == 'C') {
      screen.value = '';
    }
    // = 버튼 클릭
    else if (this.value == '=') {
      screen.value = eval(screen.value);
    }
    // 기타 숫자나 연산자 버튼 클릭
    else {
      screen.value += this.value;
    }
  });
}

 

댓글