建立建議生成網站

介紹

各位開發者大家好！今天，我很高興與大家分享我最近從事的一個有趣而簡單的專案：建議生成器網站。該項目從外部 API 獲取隨機建議並將其顯示在網頁上。這是練習使用 API 和建立互動式 Web 應用程式的好方法。

項目概況

建議生成器網站是一個簡單的應用程序，用戶只需單擊按鈕即可獲得隨機建議。它使用 Advice Slip API 取得建議並將其顯示在網頁上。

特徵

• 取得建議：從建議單 API 擷取隨機建議。
• 顯示建議：顯示建議以及建議編號。
• 互動式按鈕：使用者可以透過點擊按鈕來取得新建議。

使用的技術

• HTML：用於網頁的結構。
• CSS：用於設計網頁樣式。
• JavaScript：用於從 API 取得資料並更新 DOM。

專案結構

以下是專案結構的快速瀏覽：

Advice-Generator/
├── index.html
├── style.css
└── script.js

安裝

要開始該項目，請按照以下步驟操作：

1. 複製儲存庫：
   

   git clone https://github.com/abhishekgurjar-in/Advice-Generator.git
   

2. 開啟專案目錄:
   

   cd Advice-Generator
   

3. 運行項目:

   • 您可以在本機伺服器上運行它，也可以簡單地在網頁瀏覽器中開啟index.html 檔案。

用法

1. 在網頁瀏覽器中開啟網站。
2. 點選「取得建議」按鈕取得新建議。
3. 享受智慧！

程式碼說明

超文本標記語言

HTML 檔案包含網頁的基本結構，包括取得建議的按鈕和顯示建議的部分。

    <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">


    <div class="container">
        <h1 id="Advice-Generator">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>

CSS

CSS 檔案對網頁進行樣式設計，使其具有視覺吸引力。

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

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);
        });
}

現場演示

您可以在此處查看建議生成器網站的現場演示。

結論

建立建議生成器網站是一次有趣且具有教育意義的體驗。它幫助我練習使用 API 和建立互動式 Web 應用程式。我希望您能像我一樣覺得這個項目既有趣又資訊豐富。請隨意克隆存儲庫並使用程式碼。快樂編碼！

製作人員

• 專案使用 Advice Slip API。

作者

• 阿布舍克·古賈爾
  • GitHub 簡介

以上是建立建議生成網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！