ランダムな引用ジェネレータを作成する方法

私たちの多くは自分自身を動機づけるために引用をお読みください.しかし、必要に応じて、あなた自身の引用ジェネレータを作成することができます.冗談じゃない.いくつかの基本的なHTML、CSSとJavaScriptを知っていれば、簡単にランダムな引用ジェネレータを作成することができます.
今、あなたは私たちが引用を得るだろう疑問に思っています.これを行うには2つの方法があります.手動でプロジェクトにすべての引用符を追加することができます.しかし,多くの問題がある.
あなたが簡単にこれを行う別の方法があります.他のウェブサイトからAPIリンクを使用してコンテンツを取得できます.

JavaScript引用ジェネレータ

ここではAPIを使用して引用ジェネレータのチュートリアルを共有している.簡単にいくつかのHTML、CSSとJavaScriptでこのランダムな引用ジェネレータを作成することができます.それがどのように働くかについて学ぶ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がこれに使用されている.

私は最初のWebページを設計し、背景色を追加しました.

それから、ここの見出しは設計されます.

ボックスシャドウアレンジメントを白くし、引用ジェネレータの背景を強調した.

次に、結果ボックスのテキストが設計されます.

すべての終わりにボタンが設計されています.ボタンの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を理解するのに苦労はありません.
このランダムな引用ジェネレータのようにどのようにコメントしてください.何か問題があれば、あなたはコメントでお知らせください.