ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、JavaScript を使用してランダムな引用ジェネレーターを構築するにはどうすればよいですか?
HTML、CSS、JavaScript を使用してランダムな引用ジェネレーターを構築するにはどうすればよいですか?
- PHPz転載
- 2023-08-24 20:41:041179ブラウズ
このチュートリアルでは、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」の最大サイズを引用リストの長さに設定します。
- 生成されたランダム インデックスを使用して引用と著者を取得する
- 次に、取得した値をプロジェクト要素に割り当てます。
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 サイトの他の関連記事を参照してください。