[혼공JS] 미니 프로젝트- 명언 생성기

아시겠냐구요 혼공족장님 저는 말하는 감자라구요

 

어쩌다 보니 혼공단을 통해 책 한권을 거의 모두 공부하게 되었습니다.

아시다싶이 저는 입문과정만 완성했지 말하는 감자 수준입니다.

옆에있는 우리 집 예삐(시고르자브종, 4살)이 코드를 처도 더 잘만들겁니다.

하지만 여기서 멈출수 없고 chatgpt에게 일자리를 빼앗기지 않으려면 성장해야하지 않겠습니까.

이번에 그래서 입문과정을 마무리를 지으면서 프로젝트를 스스로 학습하면서 다시금 복습하고 나아가 행복 코딩을 하는 개발자가 되려고 합니다.

 

프로젝트 시작

chatgpt의 추천 - 1

랜덤 명언 생성기 : 오픈 API에서 랜덤 명언을 가져와 웹 페이지에 표시합니다. 이 프로젝트는 API 요청 및 DOM 업데이트에 익숙해지는 데 도움이 됩니다.

 

오픈 api

오픈 api 는 무엇이고 어찌 사용할 수 있나요?

오픈 api란 누구나 사용할 수 있게 공개되어 데이터를 사용하여 어플리케이션을 제작할 수 있다고 합니다.

어쨋든 명언 openapi를 찾아보면 영어로 출력하는 api가 있네요.

https://api.quotable.io/random

이 링크를 누르면 계속 다른 명언 객체가 튀어나옵니다.

이를 활용하면 될꺼같은데.... 어떻게 사용하지....

 

데이터 주고받기

데이터를 주고 받는 방법은 AJAX 와 Fetch 방법이 있습니다.

AJAX의 경우 JQuery가 필수로 사용해야한다고 하고

Fetch의 경우 자바스크립트 내장되어 있으니 Fetch로 사용해보겠습니다.

사용법 : https://ko.javascript.info/fetch  참고

fetch

fetch(url, options)
  .then(response => response.json())
  .then(result => /* 결과 처리 */)
  요런식으로 사용가능함

그러면 직접 사용해보면 어떤 응답이 나올까요?

요런식으로 객체로 출력해주네요!

바로 사용해봅시다

군침이 싹 도는군요

기능 상세

버튼을 누를 때마다 랜덤한 명언이 생성됩니다. 

그냥하면 심심하니 백그라운드 컬러도 같이 변경해준다.

 

구현방식 : 1번 버튼을 누른다 -- DOM 조작 이벤트 리스너 사용 click시 함수 호출

                2번 Fetch로 명언을 받아오고 지정된 태그를 조작하여 글을 출력한다.

                3번 백그라운드도 변경하는 함수를 호출하여 버튼을 누를때마다 랜덤하게 변경한다.

 

코드

    <script>
        document.getElementById('btn').addEventListener('click', generateQuote);
        // 명언 생성 함수
        function generateQuote() {
            //fetch 메소드로 객체를 받아옵니다.
            fetch('https://api.quotable.io/random')
                .then(response => response.json())
                .then(result => {
                    document.getElementById('quote').textContent = `"${result.content}" - ${result.author}`;
                    //백그라운드도 같이 변경되게 만든다.
                    changeBackgroundColor();
                })
                //에러가 나오면 에러 메세지가 출력된다고 한다.
                .catch((error) => console.log("error:", error));
        }

        function changeBackgroundColor() {
            //컬러 배열
            const colors = ['#FF7F50', '#20B2AA', '#9370DB', '#32CD32', '#7FFFD4', '#4682B4', '#8A2BE2'];
            // Math.floor를 사용하여 소수점 버림 , 랜덤하게 숫자를 뽑고, colors[랜덤인덱스] 로 배경화면이 바뀐다
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            document.body.style.background = `${randomColor}`;
        }
    </script>

 

난수 생성하기 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random

(분명 배웠던거 같은데 생각이 안나서 참고했습니다.)

 

실제로 눌러보세요!