Membina Laman Web Penjana Nasihat-tutorial js-php.cn

Membina Laman Web Penjana Nasihat

PHPz

Lepaskan： 2024-08-08 06:50:52

asal

688 orang telah melayarinya

Building an Advice Generator Website

pengenalan

Helo, rakan pembangun! Hari ini, saya teruja untuk berkongsi projek yang menyeronokkan dan ringkas yang baru-baru ini saya usahakan: tapak web Penjana Nasihat. Projek ini mengambil nasihat rawak daripada API luaran dan memaparkannya pada halaman web. Ini cara yang bagus untuk berlatih bekerja dengan API dan membina aplikasi web interaktif.

Gambaran Keseluruhan Projek

Tapak web Penjana Nasihat ialah aplikasi mudah yang membolehkan pengguna mendapatkan nasihat rawak dengan mengklik butang. Ia menggunakan API Slip Nasihat untuk mendapatkan nasihat dan memaparkannya di halaman web.

Ciri-ciri

Mengambil Nasihat: Mendapat semula nasihat rawak daripada Advice Slip API.
Memaparkan Nasihat: Menunjukkan nasihat bersama-sama dengan nombor nasihat.
Butang Interaktif: Pengguna boleh mendapatkan nasihat baharu dengan mengklik butang.

Teknologi yang Digunakan

HTML: Untuk struktur halaman web.
CSS: Untuk menggayakan halaman web.
JavaScript: Untuk mengambil data daripada API dan mengemas kini DOM.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

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

Salin selepas log masuk

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Advice-Generator
```
Salin selepas log masuk
Jalankan projek:
- Anda boleh sama ada menjalankannya pada pelayan setempat atau hanya membuka fail index.html dalam penyemak imbas web.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Klik butang "Dapatkan Nasihat" untuk mendapatkan nasihat baharu.
Nikmati hikmahnya!

Penerangan Kod

HTML

Fail HTML mengandungi struktur asas halaman web, termasuk butang untuk mendapatkan nasihat dan bahagian untuk memaparkan nasihat.

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

Salin selepas log masuk

CSS

Fail CSS menggayakan halaman web untuk menjadikannya menarik secara visual.

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

Salin selepas log masuk

JavaScript

Fail JavaScript mengambil nasihat daripada API dan mengemas kini 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);
        });
}

Salin selepas log masuk

Demo Langsung

Anda boleh menyemak demo langsung tapak web Penjana Nasihat di sini.

Kesimpulan

Membina tapak web Penjana Nasihat merupakan pengalaman yang menyeronokkan dan mendidik. Ia membantu saya berlatih bekerja dengan API dan membina aplikasi web interaktif. Saya harap anda mendapati projek ini menyeronokkan dan bermaklumat seperti yang saya lakukan. Jangan ragu untuk mengklon repositori dan bermain-main dengan kod. Selamat mengekod!