[JS] 인용구 생성기(quotable generator)

안녕하세요 오늘 만들려고 하는 건 인용구를 랜덤으로 생성해주는 앱입니다. 

https://github.com/lukePeavey/quotable

GitHub - lukePeavey/quotable: Random Quotes API

이API를 사용해서 아주 쉽고 간단한 랜덤 인용구를 생성시킬 수 있습니다. 

 

---

페이지를 열게 되면 "Quote of the day"라는 제목으로 아래 " "안에는 인용구 밑에는 작가 이름이 생성이 됩니다. 

지난 번에 했을 때는 잘됐는데 지금은 잘 안되고 있는게 아마 API문제인것 같아요.. 해결 방법을 아직은 잘 몰라서 일단 그냥 했습니다

 

New Quote버튼을 누르면 새로운 인용이 생성되고 

Tweet을 누르면 X와 연결되서 바로 Tweet할 수 있게 했습니다. 

 

전X계정이 없어서 저건 굳이 안하긴 했는데 글 많이 쓰시는 분들에게는 유용할 수  있다고 생각합니다. 

---

자 그럼 코드를 확인 해봅시다. 

요소선택 

const quote = document.getElementById("quote");
const author = document.getElementById("author");
const api_url = "https://api.quotable.io/random";

- quote와 author 요소를 선택해서 나중에 인용구와 저자를 표시할 수 있게 합니다. 

- api_url은 랜덤으로 인용구를 가져올 API의 UR을 정의하는 것입니다. 

비동기 함수로 API호출 및 데이터 처리 

async function getquote(url) {
  const response = await fetch(url);
  var data = await response.json();
  console.log(data);
  quote.innerHTML = data.content;
  author.innerHTML = data.author;
}

getquote(api_url);

 

- get quote 함수는 API로부터 인용구 데이터를 비동기적으로 가져옵니다. 

- API는 fetch를 통해 API로부터 데이터를 가져오고 await로 비동기 작업이 완료될 때까지 기다립니다. 

- 데이터 처리는 가져온 데이터를 JSON형식으로 변환하여 인용구와 저자를 HTML요소에 표시합니다. 

 

트위공유 기능 구현

function tweet() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      quote.innerHTML +
      " ---- by " +
      author.innerHTML,
    "Tweet Window",
    "width=600,height=300"
  );
}

- tweet함수는 현재 표시된 인용구를 트위터(X)화면에 공유하기 위한 새로운 창을 여는 과정입니다. 

- 트윗 메시지 구성: 인용구와 저자를 포함한 트윗 메시지를 작성하고 window.open을 사용해 트윗 작성 창을 엽니다. 

 

-아, 트위터 공유 기능은

https://developer.x.com/en/docs/x-for-websites/tweet-button/overview

Guides

해당 사이트의 코드를 가져와서 추가하였습니다. 

 

버튼을 누를때마다 새로운 인용들이 생성되는게 꽤 재밌더라구요 !