JavaScript에서 임의 인용 생성기를 만드는 방법

우리 중 많은 사람들이 자신에게 동기를 부여하기 위해 인용문을 읽습니다. 그러나 원하는 경우 고유한 견적 생성기를 만들 수 있습니다. 농담이 아냐. 기본적인 html, css 및 javascript를 알고 있다면 임의 인용 생성기를 쉽게 만들 수 있습니다.

이제 견적을 어디서 받을지 궁금하실 것입니다. 두 가지 방법이 있습니다. 프로젝트에 모든 견적을 수동으로 추가할 수 있습니다. 그러나 많은 문제가 있습니다.

이것을 쉽게 할 수 있는 또 다른 방법이 있습니다. API 링크를 사용하여 다른 웹사이트에서 콘텐츠를 가져올 수 있습니다.

JavaScript 견적 생성기

여기에서 API를 사용하여 견적 생성기 자습서를 공유했습니다. 일부 html, css 및 javascript를 사용하여 이 Random Quote Generator를 쉽게 만들 수 있습니다. Watch its live demo 작동 방식을 알아보십시오.

HTML 코드

다음 html을 사용하여 모든 정보를 추가했습니다. 제목, 디스플레이 및 생성 버튼이 있습니다.

<div class="wrapper">
<!-- heading -->
  <h2>Random Quote Generator</h2>

  <div class="container">
<!-- result box -->
    <div class="display">
      <p id="quote">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,magni.</p>
      <h3 id="author">Lorem, ipsum.</h3>
    </div>
<!-- generate button -->
    <button id="btn">Get Quote</button>

  </div>
</div>

CSS 코드

이제 디자인할 차례입니다. 이를 위해 일부 기본 CSS가 사용되었습니다.

첫 번째 웹 페이지를 디자인하고 배경 색상을 추가했습니다.

그런 다음 여기의 제목이 디자인됩니다.

Quote Generator 의 배경을 희게 하고 강조하기 위해 상자 그림자 배열이 만들어졌습니다.

그러면 결과 상자의 텍스트가 디자인됩니다.

모두 끝에 버튼이 디자인되어 있습니다. 버튼background-color: # 17203d과 텍스트 색상은 흰색입니다.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

body {
background-color: #aed7eb;
}

.wrapper {
width: 400px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}

.wrapper h2{
  padding: 10px;
  width: 100%;
  color: rgb(3, 64, 153);
  text-align: center;
  margin: 0px 30px 50px 0px;
  background: white;
}

.container {
width: 100%;
position: relative;
border-radius: 5px;
text-align: center;
background-color: #ffffff;
padding: 50px 30px;
box-shadow: 0 20px 65px rgba(87, 11, 16, 0.3);
}

.display{
   box-shadow: 0 0 20px rgba(0,139,253,0.25);
   padding: 10px;
   border: 1px solid rgba(9, 82, 158, 0.29);
}

.container p {
color: #142350;
line-height: 2;
font-size: 19px;
}
.container h3 {
font-weight: 600;
color: #570c9d;
margin: 35px 0 10px 35%;
text-transform: capitalize;
}

.container h3::before{
  content: "- ";
  color: rgb(12, 94, 210);
}

.container button {
background-color: #17203d;
border: none;
font-size: 18px;
font-weight: 600;
color: #ffffff;
cursor: pointer;
padding: 15px 45px;
border-radius: 5px;
margin-top: 40px;
}

자바스크립트

html과 css를 알고 있다면 위의 코드는 그리 어렵지 않습니다. 하지만 이제 JavaScript를 사용하여 견적 생성기를 활성화해야 합니다.

먼저 일부 id 함수의 상수가 결정되었습니다.

그런 다음 api 링크를 사용하여 모든 데이터가 수집되었습니다. 그런 다음 데이터는 'url'에 저장됩니다.

그런 다음 모든 계산을 'getQuote'에 저장합니다. 여기에서는 인용문과 저자 이름만 가져온 다음 정보가 'innerText'의 도움으로 웹 페이지에 표시되도록 정렬되었습니다.

마지막에 버튼 및 onload 기능이 활성화되었습니다.

//refer div
let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");
//api link
 const url = "https://api.quotable.io/random";

 let getQuote = () => {
//fetch all data
   fetch(url)
     .then((data) => data.json())
     .then((item) => {
//innerText is used to print the plain text information
        quote.innerText = item.content;
        author.innerText = item.author;
     });
 };
//Activate the calculation at page load(onload)
 window.addEventListener("load", getQuote);
//active the button 
 btn.addEventListener("click", getQuote);

위의 html, css 및 javascript를 이해하는 데 어려움이 없기를 바랍니다.

이 Random Quote Generator가 마음에 드는지 의견을 말하십시오. 문제가 있으면 댓글로 알려주시면 됩니다.