HTML、CSS、JavaScript を使用してランダムな引用ジェネレーターを構築するにはどうすればよいですか?-jsチュートリアル-php.cn

HTML、CSS、JavaScript を使用してランダムな引用ジェネレーターを構築するにはどうすればよいですか?

PHPz

リリース： 2023-08-24 20:41:04

転載

1089 人が閲覧しました

如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？

このチュートリアルでは、HTML、CSS、JavaScript を使用して、API (type.fit) からランダムな参照を生成するプロジェクトを構築します。

手順

いくつかの基本的な手順に従います。

HTML 要素とテンプレートを作成します。
使用します。スタイル CSS の追加
JavaScript ロジック

HTML 要素とテンプレートの作成

最初のステップは、HTML 要素とテンプレートを作成することです。。まずアイテムを表示するボックスを追加し、クリックするとボックス内に新しいランダムな引用符を表示するボタンを追加します。次に、span タグを使用して引用記号タイプのフォントの素晴らしいアイコンを表示します。

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Random quote generator using HTML, CSS and JavaScript</title>
</head>
<body>
   <div class="boxSize">
   <h1>
   <i class="fas fa-quote-left"></i>
   <span class="QuoteText" id="QuoteText"></span>
   <i class="fas fa-quote-right"></i>
   </h1>
   <p class="QuoteWR" id="author"></p>
   <hr/>
   <div class="QuoteBtn">
   <button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button>
   </div>
   </div>
</body>
</html>

ログイン後にコピー

CSS を使用したスタイルの追加

次に、作成した HTML プロジェクトにスタイルを追加します。ボックスのシャドウ、パディング、マージンなどのプロパティをボックスに追加します。作成者には筆記体フォントファミリを使用し、見栄えを良くするためにボックスと本文に背景色も追加します。

余分なファイルの作成を避けるために内部 CSS に取り組みますが、CSS と JavaScript 用の外部ファイルを作成することは良い習慣であると考えられます。

アプリケーションで font Awesome アイコンを使用するために、頭に CDN Font Awesome リンクを追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

ログイン後にコピー

CSS

body{
   min-height:100vh;
   transition: 0.5s;
   display: flex;
   background-color: #A4E5E0;
   align-items: center;
   justify-content: center;

}
.boxSize {
   margin: 10px;
   border-radius: 10px;
   width: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
   background-color: rgba(255, 255, 255, 0.3);
}
.fa-quote-left, .fa-quote-right {
   font-size: 35px;
   color: blue;
}
.QuoteText {
   text-align: center;
   font-size: 40px;
   font-weight: bold;
}
.author {
   margin:10px;
   text-align: right;
   font-size: 25px;
   font-style: italic;
   font-family: cursive;
}
.QuoteBtn {
   width: 100%;
   display: flex;
   margin-top:10px;
}
.GenerateQuote_next {
   font-size:18px;
   border-radius: 5px;
   cursor:pointer;
   padding: 10px;
   margin-top: 5px;
   font-weight: bold;
   color: white;
   background-color: #2C5E1A
}
.GenerateQuote_next:hover{
   background-color: black;
}

ログイン後にコピー

JavaScript ロジック

ロジック部分がシーンに表示されます。この部分は JavaScript になります。どの要素がどのような動作をし、使用するかを定義します。データを取得および表示するための API それでは、JavaScript 関数を詳しく見てみましょう。

手順

作業を完了するには、次の手順に従う必要があります。 -

type.fit API から見積もりデータを取得します。
#受信したデータは配列に格納されます。
「randomIdx」という名前のランダムなインデックス変数を取得します。
次に、「randomIdx」の最大サイズを引用リストの長さに設定します。
生成されたランダムインデックスを使用して引用と著者を取得する
次に、取得した値をプロジェクト要素に割り当てます。

JavaScript

var url="https://type.fit/api/quotes";
const response=await fetch(url);
const Quote_list = await response.json();
const randomIdx = Math.floor(Math.random()*Quote_list.length);
const quoteText=Quote_list[randomIdx].text;
const auth=Quote_list[randomIdx].author;
if(!auth) author = "Anonymous";
console.log (quoteText);
console.log (auth);

ログイン後にコピー

JavaScript 関数コードを埋め込んで機能させましょう。

例 - 完全なプログラム

以下は、ランダム引用ジェネレーターを構築するための完全なプログラムです。




   Ramdom quote generator using HTML, CSS and JavaScript
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
   


   
   
      
      
      
   
   

   
   
   
   
   
   <script>
      const GenerateQuote = async () =>{
         var url="https://type.fit/api/quotes";

         const response=await fetch(url);
         const Quote_list = await response.json();
         const randomIdx = Math.floor(Math.random()*Quote_list.length);
         const quoteText=Quote_list[randomIdx].text;
         const auth=Quote_list[randomIdx].author;
         
         if(!auth) author = "Anonymous";
         document.getElementById("QuoteText").innerHTML=quoteText;
         document.getElementById("author").innerHTML="~ "+auth;
      }
      GenerateQuote();
   </script>

ログイン後にコピー

以上、見積もり生成アプリの作成について学びました。お役に立てば幸いです。

以上がHTML、CSS、JavaScript を使用してランダムな引用ジェネレーターを構築するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。