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.

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

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!