開発者の皆さん、こんにちは!今日は、私が最近取り組んだ、楽しくてシンプルなプロジェクトである Advice Generator Web サイトを共有できることを嬉しく思います。このプロジェクトは、外部 API からランダムなアドバイスを取得し、Web ページに表示します。これは、API の操作とインタラクティブな Web アプリケーションの構築を練習するのに最適な方法です。
Advice Generator Web サイトは、ユーザーがボタンをクリックするだけでランダムなアドバイスを取得できる簡単なアプリケーションです。 Advice Slip API を使用してアドバイスを取得し、Web ページに表示します。
プロジェクトの構造を簡単に見てみましょう:
Advice-Generator/ ├── index.html ├── style.css └── script.js
プロジェクトを開始するには、次の手順に従います:
リポジトリのクローンを作成します:
git clone https://github.com/abhishekgurjar-in/Advice-Generator.git
プロジェクト ディレクトリを開きます:
cd Advice-Generator
プロジェクトを実行します:
HTML ファイルには、アドバイスを取得するボタンやアドバイスを表示するセクションなど、Web ページの基本構造が含まれています。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Advice Generator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Advice Generator</h1> <p id="advice">Click the button to get a piece of advice!</p> <button id="adviceBtn">Get Advice</button> </div> <script src="script.js"></script> </body> </html>
CSS ファイルは、Web ページを視覚的に魅力的なものにするためにスタイルを設定します。
body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .container { text-align: center; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } button { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007BFF; color: #fff; border: none; border-radius: 5px; margin-top: 20px; } button:hover { background-color: #0056b3; }
JavaScript ファイルは API からアドバイスを取得し、DOM を更新します。
document.getElementById('adviceBtn').addEventListener('click', fetchAdvice); function fetchAdvice() { fetch('https://api.adviceslip.com/advice') .then(response => response.json()) .then(data => { document.getElementById('advice').innerText = `Advice #${data.slip.id}: ${data.slip.advice}`; }) .catch(error => { console.error('Error fetching advice:', error); }); }
ここで Advice Generator Web サイトのライブデモをチェックできます。
Advice Generator Web サイトの構築は楽しくて勉強になりました。これは、API の操作とインタラクティブな Web アプリケーションの構築を練習するのに役立ちました。このプロジェクトが私と同じように楽しくて有益だと感じていただければ幸いです。自由にリポジトリのクローンを作成し、コードを試してみてください。コーディングを楽しんでください!
以上がアドバイスジェネレーター Web サイトの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。