ChatGPT를 통해 간편 YOUTUBE 검색기 만들기

날로 늘어가는 AI 인공지능 시대에서 chtGPT를 작게나마 사용할 줄 안다는 것은 그것이 개발업무가 아니더라도 큰 도움이 된다. 이번엔 YOUTUBE를 직접 들어가지 않아도 바로 유튜브를 검색할 수 있는 기능을 만들어 보았다. 거기에 더하여 YOUTUBE에서 실시간 인기 동영상을 확인할 수 있는 버튼을 추가하여 만들어 보았다. 

 

 

YouTube 검색

 

첫 번째 질문

• html을 통해서 text를 받을 수 있는 input 박스를 만들고 그 옆에 클릭이 가능한 버튼을 만들어줘
• 버튼을 클릭하면 input 박스에 입력한 text 가 https://www.youtube.com/ 라는 사이트로 접속해서 검색한 결과를 보여주게 연결해 줘

다음과 같은 질문을 던졌을 때 돌아오는 코드를 실행시켰을 땐, 아래의 이미지와 같다(HTML은 Real-time HTML Editor이라는 사이트에서 진행하였다. )

https://htmledit.squarefree.com/

Real-time HTML Editor

 

 

 

두 번째 질문

• 이번엔 버튼만 남겨두고 버튼을 클릭했을 때 https://www.youtube.com/ 에서 실시간 인기 동영상을 바로 보여주게 연결해 줘

세 번째 질문

 

• 이 소스 안에 방금 만들어준 실시간 인기 동영상 보기 버튼도 추가해 줘 물론기능도 잘 작동하게 그리고 지금 입력한 소스에서도 INPUT 박스와 검색 버튼을 CSS를 사용해서 근사하게 꾸며줘

 

중간중간 요소들의 CSS를 수정해 달라는 요청도 추가하여 위와 같은 결과를 가지고 오게 되었다.

네 번째 질문

 

그래도 요소들이 심심해 보여서 추가적인 CSS를 요청해 보았다.