Membina Laman Web Penjana Nasihat

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

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

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

2. Buka direktori projek:
   

   cd Advice-Generator
   

3. Jalankan projek:

   • Anda boleh sama ada menjalankannya pada pelayan setempat atau hanya membuka fail index.html dalam penyemak imbas web.

Penggunaan

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

Penerangan Kod

HTML

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

    <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

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

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

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!

Kredit

• Projek ini menggunakan API Slip Nasihat.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Membina Laman Web Penjana Nasihat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!