建立建議生成網站-js教程-PHP中文網

建立建議生成網站

PHPz

發布： 2024-08-08 06:50:52

原創

597 人瀏覽過

Building an Advice Generator Website

介紹

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

項目概況

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

特徵

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

使用的技術

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

專案結構

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

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

登入後複製

安裝

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

複製儲存庫：

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

登入後複製

開啟專案目錄:
```
cd Advice-Generator
```
登入後複製
運行項目:
- 您可以在本機伺服器上運行它，也可以簡單地在網頁瀏覽器中開啟index.html 檔案。

用法

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

程式碼說明

超文本標記語言

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

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

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

登入後複製