建立建議生成網站

介紹

各位開發者大家好！今天，我很高興與大家分享我最近從事的一個有趣而簡單的專案：建議生成器網站。該項目從外部 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 檔案包含網頁的基本結構，包括取得建議的按鈕和顯示建議的部分。

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7Advice Generator6e916e0f7d1e588d4f442bf645aedb2f
    468dcf7b0ee61aef03af1a1fbe6725fc
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
        4a249f0d628e2318394fd9b75b4636b1Advice Generator473f0a7621bec819994bb5020d29372a
        763cfba416dfc5411b624194ed788e86Click the button to get a piece of advice!94b3e26ee717c64999d7867364b1b4a3
        59863cd1e20719ad0426694918b5bfefGet Advice65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    84cf5d7ad8199c88ca1d921cae010baf2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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中文網其他相關文章！