Fetch API 및 DOM 조작을 사용하여 견적 생성 애플리케이션 만들기.

소개
JavaScript는 매우 동적인 웹 언어이며 그 뛰어난 특성 중 하나는 프런트 엔드 개발자가 API 엔드포인트를 사용하는 데 도움이 된다는 것입니다. 이 기사에서는 공개 API를 기반으로 간단한 견적 생성 애플리케이션을 만들 것입니다. API 링크는 [ https://type.fit/api/quotes ]입니다. 탐색하여 속성을 이해할 수 있습니다.
데이터의 외부 수준은 특정 작성자 및 인용 속성을 가진 다른 개체를 포함하는 배열 내에 중첩된 개체임을 알 수 있습니다.
앱은 다음 개념을 사용합니다.

1. DOM 조작.

2. 이벤트 리스너.

3. API를 가져옵니다.

4. CRUD

프로젝트를 저장할 빈 폴더를 만듭니다.
폴더에는 index.js 파일과 index.html 파일이 있어야 합니다. 작은 응용 프로그램에 사용자 지정 스타일을 추가하려는 경우 style.css를 가질 수도 있습니다.
다음 코드 블록을 추가하여 가져오기 요청을 만듭니다.

fetch ('https://type.fit/api/quotes')
.then(res=>res.json())
.then(data=>{data.forEach(quoteObject => {.then(data=>{data.forEach(quoteObject => {
    const quoteList = document.getElementById('quote-list');
    const quoteEl = document.createElement('li');
    const spanAuthor = document.createElement('p');
    quoteEl.innerText = `${quoteObject.text}`;
    spanAuthor.innerText = `${quoteObject.author}`;
    spanAuthor.className = 'quote-span';
    quoteEl.appendChild(spanAuthor);
    quoteList.appendChild(quoteEl);
})
})
}

코드 블록은 호출 요청을 한 다음 DOM 조작을 수행하여 페이지에 모든 인용문과 작성자를 표시합니다.

모든 인용문을 표시한 후 인용문과 저자를 무작위로 표시할 수 있습니다.
Math.floor(Math.random()을 적용해야 합니다.
*data.length) 메서드를 사용하여 배열에서 무작위로 견적을 가져옵니다.
그런 다음 DOM 조작을 사용하여 해당 인용문과 저자를 html로 전달합니다.

document.getElementById('new-quote').addEventListener('click', function (e){
    fetch('https://type.fit/api/quotes')
    .then(response=>response.json())
    .then (data => {
    const randomQuoteIndex = Math.floor(Math.random() * data.length);
    const quoteText = data[randomQuoteIndex].text;
    let author = data[randomQuoteIndex].author;
 quoteEl.textContent = quoteText;
    quoteAuthorEl.textContent = author;
}
)

CRUD 작업.
CRUD는 저장된 데이터 개체에 대한 생성, 읽기, 업데이트 및 삭제 작업의 약어입니다.
CRUD는 응용 프로그램이 수행할 수 있어야 하는 기본 작업이라고도 합니다.
업데이트는 PUT, POST 및 PATCH 동사를 사용합니다.
다음 부분에서는 이제 프로젝트 폴더 내에 db.json 파일을 생성합니다.
그런 다음 json에 새 따옴표를 게시하기 위해 다음 코드 블록을 추가합니다.
코드를 작성하기 전에 명령json-server --watch db.json을 사용하여 서버가 실행 중인지 확인하십시오.
그런 다음 다음 헤더를 추가하여 POST 요청을 만듭니다.
아래 코드는 json 서버에 대한 새 견적 및 작성자 게시물을 생성합니다.

const post = {inputQuote, inputAuthor}
const configurationObject =   {
        method: 'POST', 
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(post),
      }
      fetch(url, configurationObject)
      .then(res=>res.json())
      .then(results=>
        console.log("successful addition"))
        e.target.reset()
})

다음 코드 블록을 사용하여 json 파일에서 레코드를 삭제할 수 있습니다.

function deleteQuote(){
document.getElementById('delete-form').addEventListener('submit', function(){
    const id = document.getElementById('id').value;
    fetch('http://localhost:3000/quotes/' + id, {
      method: 'DELETE',
    })
    .then(res => res.json()) // or res.json()
    .then(res => console.log(res))
})
    }

아래는 전체 프로젝트 코드가 있는 저장소 링크입니다.
[ https://github.com/cesarWrites/phase-1-project ]