716 測定値

このJavascriptコードはランダムな引用を生成します

に Emmanuel Okolie 6m2024/04/25

長すぎる; 読むには

バニラ JavaScript を使用してランダム引用プロジェクトを構築する方法。

featured image - このJavascriptコードはランダムな引用を生成します

バニラ JavaScript を使用したランダム引用と聞いて、何を思い浮かべますか? 私としては、何でもありだと思います。

ランダムな引用を作成できる別のスクリプト言語もあるかもしれませんが、その中で最も有名なものの 1 つは、JavaScript を使用してランダムな引用を作成することです。

他の人の投稿を表示するソーシャルメディアアプリを見たことがあるかもしれませんが、投稿をさらに表示するにはスクロールし続けなければなりません。しかし、私たちが構築するものによると、新しい引用を表示するにはボタンをクリックする必要があります。

注: このチュートリアルでは、API を使用します。API は、Web 上の引用をランダムに取得するために使用されます。ボタンをクリックするだけで、API は新しい引用を取得します。時間を無駄にすることなく、このガイドに飛び込んでみましょう。

前提条件

HTMLの基礎知識が必要です
CSSの基礎知識が必要です
JavaScriptの基礎知識が必要です
コードエディタ（Sublime または VS コード）なども用意してください。

ステップバイステップの JavaScript ランダム引用符ジェネレーター

ランダム引用は、API または配列からランダムに引用を取得します。この記事では、HTML、CSS、JavaScript のみを使用してランダム引用ジェネレーターをゼロから設計し、JavaScript を使用して配列から引用を生成します。以下は、ランダム引用タスクを実行するための手順ガイドです。

ステップ 1: 新しいプロジェクトを作成するこれから構築するプロジェクトには、HTML、CSS、JavaScript の 3 つのページが含まれます。したがって、各ページには次のように名前を付けます。index.html、style.css、script.js。これを実行したら、次のステップに進む準備が整います。

ステップ 2: フレームワークの構築このステップでは、プロジェクト構造を与える HTML コードをいくつか追加できます。
注: このセクションは、上記のようにフォルダーとファイルを作成した後に最初に行う作業です。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--META information--> <meta name="description" content="Random Quote Generator"> <meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API"> <meta name="author" content="EmmyKolic"> <!--End of META information--> <title>Random Quotes</title> <!--LINK CUSTOM CSS FILE--> <link rel="stylesheet" href="style.css"> <!--FONTAWESOME CDN--> <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"> </head> <body> <!-- Quote Container --> <div class="container"> <!-- Quote to be Displayed Here --> <h1> <i class="fas fa-quote-left"></i> <span class="quote" id="quote"></span> <i class="fas fa-quote-right"></i> </h1> <!-- Author to be Displayed Here --> <p class="author" id="author"></p> <hr /> <div class="button"> <!--Button to tweet the quote --> <a class="twitter" id="tweet" href="https://twitter.com/intent/tweet?text=Greetings" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a> <!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random quote is generated--> <button class="next" onclick="getNewQuote()">Next quote</button> </div> </div> <!--LINK CUSTOM JS FILE--> <script src="script.js"></script> </body> </html>

ステップ 3: クラスのスタイルの追加このセクションでは、CSS を使用してコードにスタイルを追加し、引用ジェネレーターを構築します。注: このセクションは、index.html ファイルを作成した後の次の作業です。style.css という名前の別のファイルを作成します。style.css ファイルは HTML ファイルにリンクされます。

次に、HTML のレイアウトにスタイルを設定します。以下は CSS コードです。

 * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); }

ステップ 4: 数行の JavaScript コードを組み込みます。このステップでは、いくつかの JavaScript コードを組み込み、引用ジェネレーターを構築します。注: このセクションは、このチュートリアルの重要な部分です。ここで、script.js という別のファイルを作成します。

以下のコードを確認すると、何が行われたかがはっきりとわかります。リンクを使用して API とやり取りし、url という変数内に保存しました。このガイドを簡潔にするために、script.js を確認すると、各セクションの前にコメントがあることに気付くでしょう。以下に JavaScript コードを示します。

 const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet"); const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes"; // fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json(); // Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length); //Store the quote present at the randomly generated index const quote = allQuotes[indx].text; //Store the author of the respective quote const auth = allQuotes[indx].author; if (auth == null) { author = "Anonymous"; } //function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth; //tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; }; getNewQuote();

結論

このチュートリアルはこれで終わりです。多くの価値を得られたことを願っています。Vanilla JavaScript を使用してランダムな引用プロジェクトを構築する方法について。

API を操作する方法について説明しましたが、これが API を操作する唯一の方法というわけではありません。あるいは、これが最善の方法であると言うべきでしょうか。また、JS コードからの引用を Twitter アカウントにツイートする方法についても説明しました。

このチュートリアルについて議論するだけで、多くのことがわかりました。ぜひコメントを残してください。さらにチュートリアルが必要な場合は、私をフォローしてください。

次回まで、楽しい一日をお過ごしください!

著者について

Emmanuel Okolie は、ソフトウェア開発業界で2+年以上の経験を持つフルスタック Laravel 開発者です。ソフトウェア開発、執筆、他の人への指導を融合することで、本格的なスキルを身につけました。彼のスタックはReactJs, Laravel, PHP, JavaScript,などです。

彼はフリーランサーとして働いており、クライアント向けのウェブサイトを構築したり、自分の仕事の進め方を他の人に指導するための技術マニュアルを書いたりしています。

Emmanuel Okolie はあなたと話す機会を歓迎します。Linked -In 、 Facebook 、 Github 、 Twitter 、または彼のWeb サイトにアクセスしてフォローしてください。