자바스크립트를 다루다보면 카운트다운 코드가 필요할 때가 있습니다. 그럴때 우리는 구글을 열고 여기 저기 돌아다녀서 정보를 얻습니다. 오늘 저는 구글을 먼저 열지 않고, ChatGPT를 먼저 열었습니다. 그리고 말을 걸었지요. "100일 카운트하는 코드를 알려줘바" 그리고 ChatGPT는 정말 기가막히게 제게 답변을 주었습니다. 나의 검색시간과 공부시간을 3배 이상 단축시켜주는 느낌입니다.
다음의 코드는 ChatGPT에게 물어본 결과 화면입니다. 기가 막히네요. 자바스크립트를 아무것도 모르는 사람은 사용할 수 없겠지만, 어느 정도 지식 있는 사람은 정말 신세계입니다. 아주 고맙습니다.
ChatGPT에게 코드를 물어볼 생각을 하게 된 경위는 이렇습니다. 개인적인 기록을 적는 공간이 있습니다. 나름의 목표를 세우고, 작심을 했습니다. 100일동안 말이지요. 오늘이 딱 8일째 되는 날이고, 어제 검색했으니 어제 기준으로는 7일째 되는 날입니다. 아뭏든 아래 제 블로그 왼쪽 사진 메인 화면에 D-Day가 표시되면 좋겠다는 생각을 했습니다. 동적으로 텍스트를 보여주려면 자바스크립트를 사용해야 합니다.
카운트를 하는, 즉 100일이 날짜 계산을 알아보기 위해 먼저 네이버에 접속했습니다. 제가 21일날 결심했으니 그 날로부터 100일이 언제인지 확인하기 위해서입니다.
먼저 테스트를 해봅니다. 다음과 같이 21일 기준으로 7일째 되는 날을 확인합니다. 100일 계산할 때 시작하는 날짜를 포함할 것인지에 따라 달라지니까요.
최종적으로 21일 기준일부터 100일 째 되는 날이 5월 31일임을 확인합니다. 그 날이 제 D-Day입니다.
이제 ChatGPT 사이트로 갑니다.
다음과 같이 ChatGPT에게 물어보았습니다. "javascript 100일 날짜 계산 코드" 라고 입력하고 검색해 보았습니다. 어떻게 응답할 지 궁금하지 않나요?
와우~~~ 정말 잘 알려줍니다. 개인 과외가 따로 없습니다. 친절하게 아래 설명도 해줍니다.
그래서 저도 코드를 확인해 봅니다. 물론 자바스크립트에 대한 기본 지식이 있어야 잘 활용할 수 있을 것입니다. 하지만 모르면 하나씩 물어보면서 공부해도 될 듯 합니다.
ChatGPT를 통해 물어본후, 제가 테스트한 코드는 다음과 같습니다.
<h1>100일 카운트하기</h1>
<p>오늘로부터 100일은?</p>
<p id="count">100</p>
<script>
// 현재 날짜 생성
var today = new Date();
// 100일 후의 날짜 계산
var after100Days = new Date(today.getTime() + 100 * 24 * 60 * 60 * 1000);
// 결과 출력
console.log("100일 후의 날짜: " + after100Days.toLocaleDateString());
document.getElementById("count").innerHTML = "100일 후의 날짜: " + after100Days.toLocaleDateString();
</script>
이러한 코드는 브라우저에서 다음과 같이 출력됩니다. 어제 기준으로 100일 되는 날이 출력된 모습입니다. 어제 27일 기준으로 100일후는 6월 7일이네요. (어제 테스트하고 글은 오늘 쓰는 중)
이번에는 다시 검색해봅니다. 신기하게도 다시 같은 물음을 했지만 결과는 다른 모습입니다. 물어볼 때마다 다른 결과를 보여줍니다. 서울 가는 방법이 다양한 길이 있듯이, 코드도 다양한 방법이 있습니다. 놀랍습니다. 공부의 시간이, 업무의 효율이 극대화 되는 모습이 그려집니다.
물어본 결과 ChtGPT 가 다음의 코드를 가르쳐주었습니다. 100일 카운트하는 코드입니다.
<body>
<h1>100일 카운트하기</h1>
<p>오늘로부터 100일은?</p>
<p id="count">100</p>
<script>
// 현재 날짜 생성
let today = new Date();
console.log(today);
// 100일 추가
let after100days = new Date(today.getTime() + 100 * 24 * 60 * 60 * 1000);
// YYYY년 MM월 DD일 형식으로 출력
let year = after100days.getFullYear();
let month = after100days.getMonth() + 1;
let day = after100days.getDate();
console.log(`${year}년 ${month}월 ${day}일`);
document.getElementById("count").innerHTML = year +"년 "+ month + "월 "+ day +"일";
</script>
</body>
100일 카운트하는 결과는 같지만 코드가 다릅니다. 재미있습니다. ChatGPT를 어떻게 활용하면 될지 알게되니, 짜릿합니다. 질문을 잘 하면 검색의 시간을 줄여주고, 지식을 효율적으로 습득할 수 있습니다. 와우~~
보통 이러한 코드를 모를 때 열심히 구글링해서 지식을 보완하고, 쌓게 됩니다. 늘 구글 검색이지요. 검색하다가 누군가 괜찮은 코드를 올려놓으면 테스트해보고, 활용합니다. 때로 내가 필요한 스타일이 아닌 경우 다시 검색하지요.
자바스크립트에게 날짜 카운트를 검색하는 모습입니다. 다양한 방법을 알려주고 있습니다.
ChatGPT가 다음의 코드를 알려줍니다.
ChatGPT에게 얻은 코드입니다.
<body>
<script>
// 예시: 2023년 3월 31일까지 남은 시간을 카운트다운
const futureDate = new Date('2023-03-31');
function countdown() {
const now = new Date();
const timeDiff = futureDate.getTime() - now.getTime();
// 시간 차이를 일, 시, 분, 초 단위로 변환
const daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
const hoursDiff = Math.floor((timeDiff % (1000 * 3600 * 24)) / (1000 * 3600));
const minutesDiff = Math.floor((timeDiff % (1000 * 3600)) / (1000 * 60));
const secondsDiff = Math.floor((timeDiff % (1000 * 60)) / 1000);
console.log(`남은 시간: ${daysDiff}일 ${hoursDiff}시간 ${minutesDiff}분 ${secondsDiff}초`);
// 1초마다 카운트다운 실행
setTimeout(countdown, 1000);
}
countdown();
</script>
</body>
결과는 다음과 같이 콘솔창에 출력됩니다.
다시 다른 방식을 살펴봅니다.
ChatGPT 에게 물어본 코드를 바탕으로 다음과 같이 응용해보았습니다.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#count {z-index: 1; font-weight: bold; font-size: 20px; position: fixed; top: 300px; left: 100px;}
</style>
</head>
<body>
<h1>100일 카운트하기</h1>
<p>2023년 2월 21일부터 100일 카운트</p>
<p id="count">100</p>
<script>
// 예시: 현재 날짜와 2023년 3월 31일 사이의 시간 차이 계산
const now = new Date();
const futureDate = new Date('2023-05-31');
const timeDiff = futureDate.getTime() - now.getTime();
// 시간 차이를 일 단위로 변환
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
console.log(`남은 일 수: ${daysDiff}`);
document.getElementById("count").innerHTML = 100 - daysDiff + "일차";
</script>
</body>
위의 코드를 통하여 2월 21일 기준으로 100일 카운트를 보여주는 코드를 완성했습니다.
제 블로그에 적용하는 모습입니다. 티스토리는 html 및 css, javascript를 마음대로 넣을 수 있어 편리합니다. 다음과 같이 html 및 css, javascript를 추가하였습니다.
어제 캡쳐한 화면입니다. 다음과 같이 2월 21일 기준으로 100일 카운트를 보여주고 있습니다.
오늘 아침에는 어제 코드를 다시 수정하였습니다. 다음과 같이 오른쪽 상단에 D-Day를 보여주도록 css를 수정했습니다. 시작일로부터 몇일 되었는지, 남은 날짜는 어떠한지 보여주는 결과화면입니다. 맘에 듭니다. 100일의 여정동안 발전할 나의 모습에 뿌듯해집니다. 살이 많이 빠지겠지요^^ 오늘도 가족들은 마지막 방학을 위해 치킨을 달렸지만, 저는 참았습니다. 와우~~ (치킨은 내일 아침 먹기로~~)
최종 코드는 다음과 같습니다.
head 부분에 추가한 css는 다음과 같습니다.
/* count me */
#count1 {color: white; z-index: 100; font-size: 18px; position: fixed; top: 70px; right: 30px; border-radius: 40px; background: #000; width: 50px; height: 50px; text-align: center; line-height: 50px;}
#count2 {color: white; z-index: 101; font-size: 18px; position: fixed; top: 123px; right: 30px; border-radius: 40px; background: #f00; width: 50px; height: 50px; text-align: center; line-height: 50px;}
body 밑 본문에 추가한 자바스크립트 코드는 다음과 같습니다. 100일째 되는 5월 31일로부터 D-Day를 카운트하는 코드입니다. 날짜 객체를 생성하고, 기준일로부터 시간 차이를 일단위로 변환합니다. 동적으로 요소를 생성한 뒤, 해당 텍스트를 출력합니다. 와우~ 이 코드를 정말 순식간에 만들었습니다. ChatGPT 덕분에 말이지요. 앞으로 요긴하게 ChatGPT가 사용될 수 있을 듯 합니다.
<!-- count -->
<script>
// 예시: 현재 날짜와 2023년 5월 31일 사이의 시간 차이 계산
const now = new Date();
const futureDate = new Date('2023-05-31');
let timeDiff = futureDate.getTime() - now.getTime();
// 시간 차이를 일 단위로 변환
let daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
// 새로운 div 요소 만들기
var newDiv1 = document.createElement("div");
var newDiv2 = document.createElement("div");
// div에 텍스트 추가하기
newDiv1.id = "count1";
newDiv2.id = "count2";
var divText1 = document.createTextNode("D+"+ (100 - daysDiff));
var divText2 = document.createTextNode("D-"+ (daysDiff));
newDiv1.appendChild(divText1);
newDiv2.appendChild(divText2);
// body 요소에 새로운 div 추가하기
document.body.appendChild(newDiv1);
document.body.appendChild(newDiv2);
</script>
'ChatGPT활용' 카테고리의 다른 글
| 자바스크립트 변수 ChatGPT에게 물어보다! (0) | 2023.03.06 |
|---|---|
| ChatGPT 활용해 자바스크립트 상단으로 이동하는 코드 만들기(스크롤탑) (0) | 2023.03.05 |
