Javascript를 사용하여 견적 생성기 구축

프로젝트 디렉토리 구조

|-- quote-generator
| |-- css
| | |-- style.css
| |-- js
| | |-- main.js
| |-- index.html

견적 생성기 구현

index.html

위 HTML 파일의 머리 부분에 인용구별 CSS와 멋진 글꼴 아이콘 CSS(따옴표 및 Twitter 아이콘용)가 포함되어 있습니다.

HTML의 본문에는 인용된 콘텐츠, 인용 작성자, Twitter 버튼 및 새 인용 버튼을 포함하는 인용 컨테이너 div가 추가됩니다.

New Quote 버튼을 클릭하면 AJAX 요청을 통해 다음 인용문이 생성되며, HTML 파일 본문 하단에 추가된 main.js 파일에 코드가 작성됩니다.

스타일.css

CSS 파일 상단에 추가된 Montserrat google 글꼴을 사용하고 있습니다. Quote Container div는 플렉스를 사용하여 중앙에 배치됩니다.

나머지 다른 CSS 코드는 설명이 필요 없습니다.

메인.js

위 코드는 바닐라 자바스크립트로 작성되었습니다. 각 기능에 대해 자세히 설명하겠습니다 –

짹짹짹

이 기능은 Twitter에서 인용문을 트윗하는 역할을 합니다. 인용된 텍스트와 인용 작성자를 쿼리 매개변수로 사용하여 트위터 인텐트 API를 호출합니다.

가져오기 인용

따옴표를 가져오고 따옴표에 대한 약속을 반환하는 비동기 함수입니다.

클릭 리스너는 위의 기능을 각각 호출하는 Twitter 버튼과 New Quote 버튼 위에 바인딩됩니다.

도전 과제

New Quote 버튼을 클릭할 때 다음 인용문을 표시하려면 사전에 인용문 목록이 있어야 합니다. 그렇지 않으면 UX가 정말 나빠질 것입니다.

이제 API 응답이 수신되면(예: 따옴표를 사용할 수 있게 되면) 버튼을 클릭할 때 API를 계속해서 누르는 것을 방지하기 위해 저장하고 싶을 것입니다.

Storing the response is not necessary, yes, you heard it right!

버튼을 클릭할 때마다 요청하지 않고 위의 문제를 해결하려면 cache the promise .

A promise is stateful, and as soon as it’s fulfilled, its value cannot be changed. You can use .then() multiple times to get its contents, and you’ll get the same result every time.

따라서 quotesPromise.then를 사용하면 매번 따옴표 목록을 가져오고 거기에서 따옴표 컨테이너에 표시되는 임의의 따옴표를 선택합니다.

이 튜토리얼의 전부입니다. 기사가 마음에 들면 친구 및 커뮤니티와 공유하십시오.

학습 데이터 구조? 내 다른 기사 읽기 —

https://weekendtutorial.com/에서 이러한 기사와 자습서를 더 확인하십시오.