명언 생성기.

  <div class="quote-container" id="quote-container"></div>

quote-container라는 클래스와 아이디를 가진 div 태그가 된다.

윈도우의 주석 단축키는 ctrl+?

이미 div태그 안에 있으므로 간단하게 .quote-text만 치면 자동적으로 div 태그가 생성된다.

<div class="quote-container" id="quote-container">
      <!-- 명언 -->
      <div class="quote-text"></div>
  </div>

아이콘 라이브러리를 사용하기 때문에 아이콘 위치에 fas라고 하는 태그를 붙여줘야 한다. (아이콘 라이브러리의 자체 클래스.)

명언을 외부에서 받기 (js 분석.)

const proxyUrl = 'https://whispering-tor-04671.herokuapp.com/'
  const apiUrl = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';

"quoteText":"승리는 가장 끈기 있는 자의 것입니다. ", "quoteAuthor":"Napoleon Bonaparte "

위처럼 명언과 그 저자의 키를 가진 객체 형식으로 값을 준다.

명언 가져오기는 비동기적으로 (언제든지 요청에 따라 나와야 하므로) 상요되는 async를 써서 가져온다.
기본 문법:
async function 함수명() {
await 비동기처리메서드_명();
}

그리고 api를 제대로 가져왔는지를 알기 위해서 try catch문을 사용한다.

try { //예외발생할 가능성이 있는 문장 }
catch(Exception1 e1) {
//Exception1이 발생했을 경우, 이를 처리하지 위한 문장적는다.
//보통 이곳에 예외메세지를 출력하고 로그로 남김.
설명.

그리고 try문 안에는 api가 들어왔는지를 확인하기 위해서 fetch를 쓰도록 하자.
fetch는 api를 호출하는 함수다.
fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환. 반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject합니다.
설명

try{const response = await fetch(apiUrl);라고 적어두자.
api를 확실히 가져올때까지 기다리도록 await가 작동해서 정상작동한다.

apiQuotes = await response.json();는 이렇게 받은 api의 json을 전달한다. 제대로 저장할 수 있게 위에다가 let apiQuotes = [];로 빈배열을 만들어준다.

이제 명언들의 객체를 전달받게 되지만 문제는 우리가 화면에 보여주고 싶은 건 이중에 무작위로 뽑아낸 단 하나의 명언이라는 것이다.

난수를 뽑는 math.random 활용.

//명언 배열에서 랜덤값 추출.
const quote = apiQuotes[Math.floor(Math.random()* apiQuotes.length)]

가져온 명언을 문서상으로 전달.
authorText.textContent = quote.author;
quoteText.textContent = quote.text;

추가하기-- 저자가 없는 경우도 있다. 그럴때는 그냥 공란으로 두는 것이 아니라 '알 수 없음'이라고 표기해 주도록하자.
if 조건문으로 표시.
if(!quote.author){
authorText.textContent = "알 수 없음";
}else{
authorText.textContent = quote.author;
}

문장의 길이를 분류하기: 50자 이상은 긴 문장으로 처리.
if(quote.text.length > 50){
quoteText.classList.add('long-quote');
} else {
quoteText.classList.remove('long-quote');
}
긴문장 클래스를 추가하는 조건문.
css에 의해 긴문장은 크기가 작고 짧문장은 커짐.

트위터 연결

function tweetQuote() {
  const quote = quoteText.innerText;
  const author = authorText.innerText;
  const twitterUrl = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;
  window.open(twitterUrl, '_blank');
}

트워터로 트윗 날리는 코드에 백틱을 쓴 문장으로 저자와 명언을 전달. 윈도우창에서 트위터가 새 탭에 열리도록 함.

로딩 애니메이션

 <div class="loader" id="loader"></div>

로딩 만들기.

const loader = document.getElementById('loader');(css에서 디자인이 마치면 js로 불러오기.)
로딩 함수를 만들자.

function loading(){
loader.hidden = false;
quoteContainer.hidden = true;
}
숨겨진 로더는 보이게 하고 나머지는 안보이게 가려둠.
로딩이 끝나면 그 반대.
function complete(){
quoteContainer.hidden = false;
loader.hidden = true;
}
이런 로딩이 실행될 떄는 새 명언을 가져올때와 그걸 출력할 때. 즉
async function getQuote() {
loading();

function newQuote(){
loading();
아래에서 실행이 된다.

여기까지의 코드.