💡HTML、CSS、JavaScriptのランダムな引用文ジェネレーター

この記事では、HTML、CSS、JavaScriptを使用してシンプルなランダム引用ジェネレーターを作成する方法について説明します。✨これは、初心者が3つの技術を同時に使う練習をするのに最適なプロジェクトです。記事の最後には、ランダムな引用を生成し、それらをコピーし、音声化し、Twitterで共有できるアプリケーションが完成します。さあ始めましょう！

✨ プロジェクトのデモ | 📂 GitHubでソースコードをダウンロードする

🤖アプリで コディック HTML、CSS、JavaScript、その他多くのコースを学び、ウェブ開発の旅を始めましょう！ 🌱

🛠️ 準備

コードの記述を開始する前に、次のことを確認してください。

🗒️ コードエディター：任意のテキストエディターを使用できますが、Visual Studio Codeをお勧めします。これは便利で、多くの便利な拡張機能があるためです。
🛈 ブラウザ：アプリケーションをテストするためのChromeやFirefoxなどの最新のブラウザ。
📘 HTML、CSS、JavaScriptの基礎知識：プロジェクトを理解しやすくするために基本的な知識を持っていると良いですが、準備なしでもこの記事に従うことができます。

準備ができたら、HTMLファイルからプロジェクトの作成を開始しましょう！ 🌱

🔥 10万人以上の学生が参加中

理論を読むのに疲れた？
コーディングの時間だ！

Kodik — 実践でプログラミングを学ぶアプリ。AIメンター、インタラクティブなレッスン、実際のプロジェクト。

Кодик

🗃️ ステップ1：HTMLを作成する

HTMLはアプリケーションの基礎です。将来の引用ジェネレーターの構造を記述するファイルindex.htmlを作成します。

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Генератор случайных цитат | Coursme</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>Цитата дня</header>
    <div class="content">
      <div class="quote-area">
        <i class="fas fa-quote-left"></i>
        <p class="quote">Никогда не сдавайтесь, потому что вы никогда не знаете, может быть, следующая попытка окажется успешной.</p>
        <i class="fas fa-quote-right"></i>
      </div>
      <div class="author">
        <span>__</span>
        <span class="name">Мэри Кэй Эш</span>
      </div>
    </div>
    <div class="buttons">
      <div class="features">
        <ul>
          <li class="speech"><i class="fas fa-volume-up"></i></li>
          <li class="copy"><i class="fas fa-copy"></i></li>
          <li class="twitter"><i class="fab fa-twitter"></i></li>
        </ul>
        <button>Новая цитата</button>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

このファイルでは、アプリケーションのメインフレームワークを作成しました。これには、タイトル、引用と著者を表示する領域、およびインタラクションボタンが含まれます。

🖼️ステップ2：CSSでスタイルを設定する

それでは、アプリケーションを美しくしましょう！これを行うには、CSSを使用します。ファイル style.css を作成してスタイルを追加します。

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5372F0;
}
.wrapper{
  width: 605px;
  background: #fff;
  border-radius: 15px;
  padding: 30px 30px 25px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
header{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.quote{
  font-size: 22px;
  text-align: center;
}
.author{
  font-size: 18px;
  font-style: italic;
  text-align: right;
}
button{
  border: none;
  color: #fff;
  padding: 13px 22px;
  background: #5372F0;
  border-radius: 30px;
  cursor: pointer;
}

スタイルを追加して、インターフェースを快適で楽しいものにしました。フォントを変更し、背景を設定し、ボタンとテキストのスタイルを追加しました。

💡 ステップ3：JavaScriptでロジックを追加する

今度は、JavaScriptを使用してアプリケーションに機能を追加します。ファイル script.js を作成し、次のコードを追加します。

// 必要なすべての DOM 要素を取得する
const quoteText = document.querySelector(".quote"),
    quoteBtn = document.querySelector("button"),
    authorName = document.querySelector(".name"),
    speechBtn = document.querySelector(".speech"),
    copyBtn = document.querySelector(".copy"),
    twitterBtn = document.querySelector(".twitter"),
    synth = speechSynthesis;

// ランダムな引用を取得する関数
function randomQuote() {
    quoteBtn.classList.add("loading");
    quoteBtn.innerText = "Loading Quote...";

    fetch("https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=ru")
        .then(response => response.json())
        .then(result => {
            quoteText.innerText = result.quoteText;
            authorName.innerText = result.quoteAuthor || "Unknown author";
            quoteBtn.classList.remove("loading");
            quoteBtn.innerText = "New quote";
        });
}

// ボタンのイベント
speechBtn.addEventListener("click", () => {
    if (!quoteBtn.classList.contains("loading")) {
        let utterance = new SpeechSynthesisUtterance(`${quoteText.innerText} from ${authorName.innerText}`);
        synth.speak(utterance);
    }
});

copyBtn.addEventListener("click", () => {
    navigator.clipboard.writeText(quoteText.innerText);
});

twitterBtn.addEventListener("click", () => {
    let tweetUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
    window.open(tweetUrl, "_blank");
});

quoteBtn.addEventListener("click", randomQuote);

🧐 メソッドの説明

必要なすべての DOM 要素を取得する:
- quoteText：引用文が表示される要素へのリンク。
- quoteBtn：新しい引用を生成するためのボタンへのリンク。
- authorName：引用元の名前が表示されている要素へのリンク。
- speechBtn, copyBtn, twitterBtn：引用の音声化、コピー、Twitterへの投稿を行うためのボタンへのリンク。
- synth：ブラウザの音声合成APIを使用して、引用を音声にします。
randomQuote()：この関数は、APIに対してランダムな引用を取得するためのクエリを実行し、アプリケーションに表示します。引用が読み込まれている間、ボタンは無効になり、ボタンのテキストは「Loading Quote...」に変わります。
ボタンのイベント:
- 引用の音声 （▶️）：引用ボイスボタンをクリックすると、SpeechSynthesisUtteranceオブジェクトが作成され、音声合成を使用して現在の引用を音声で再生します。
- 引用をコピー （📋）：navigator.clipboard.writeText()を使用して、現在の引用のテキストをユーザーのクリップボードにコピーします。
- Twitterで公開 （🔗）：現在の引用をTwitterに投稿するためのウィンドウを開き、引用テキストを含むツイートのURLを作成します。
- 新しい引用：ボタンをクリックすると、randomQuote()関数が呼び出され、新しい引用が読み込まれます。

💖 結果

HTML、CSS、JavaScriptを使用して、シンプルなランダム引用ジェネレーターを作成しました。✨このプロジェクトは、レイアウトとプログラミングの知識を組み合わせ、APIを操作するのに役立ちました。これで、お気に入りの引用を保存したり、独自の引用リストを作成したりするなど、より多くの機能を追加して拡張できます。ウェブ開発のさらなる研究で幸運とインスピレーションを！🌱

このプロジェクトを基に、より複雑なゲームを作成したり、このゲームの機能を拡張したりすることができます。例えば、勝利カウンターを追加したり、グラフィックスを改善したり、マルチプレイヤーゲームにしたりできます。可能性は無限大で、すべてはあなたの想像力と創造性にかかっています！

完全なソースコードと追加の改善については、 GitHub.

質問があれば、遠慮なく聞いてください。プログラミングがうまくいって、プロジェクトがいつも面白くて楽しいものでありますように！ 👊🌟

HTML、CSS、JavaScriptのランダムな引用文ジェネレーター