Membina Penjana Petikan Rawak: Panduan Langkah demi Langkah dengan Kod-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Membina Penjana Petikan Rawak: Panduan Langkah demi Langkah dengan Kod

DDD

Jan 22, 2025 am 04:46 AM

Building a Random Quotes Generator: A Step-by-Step Guide with Code

Tutorial ini membimbing anda membina aplikasi Penjana Petikan Rawak yang praktikal, sesuai untuk mempelajari asas pengekodan. Kami akan merangkumi setiap langkah dengan contoh kod terperinci, memudahkan pemula untuk mengikutinya.

Gambaran Keseluruhan Projek

Apl ini mendapatkan semula petikan rawak daripada API awam, memaparkannya dan membenarkan pengguna menyalin atau berkongsinya. Mari kita pecahkan proses dan terokai logik kod.

Langkah 1: Struktur HTML

Kita mulakan dengan mencipta reka letak HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Quotes Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- Content will be added here -->
    </div>
    <script src="index.js"></script>
</body>
</html>

Ini menyediakan struktur asas, termasuk elemen untuk memaparkan petikan, butang untuk petikan baharu dan ikon untuk menyalin dan berkongsi.

Langkah 2: Pengendalian CORS dengan Proksi

Untuk mengakses API luaran, kami memerlukan penyelesaian CORS (Cross-Origin Resource Sharing). Pelayan proksi Express.js yang mudah mengendalikan perkara ini:

// proxy.js
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();

app.use(cors());

app.get("/api/quote", async (req, res) => {
    try {
        const response = await fetch("https://qapi.vercel.app/api/random");
        const data = await response.json();
        res.json(data);
    } catch (error) {
        res.status(500).json({ error: "API fetch failed" });
    }
});

const PORT = 4000;
app.listen(PORT, () => console.log(`Proxy running on http://localhost:${PORT}`));

Proksi tempatan ini mengambil petikan dan mengelakkan isu CORS.

Langkah 3: Mengambil Petikan dengan JavaScript

Butang "Petikan Baharu" mencetuskan pengambilan petikan:

// index.js
const quoteDisplay = document.getElementById("quote");
const authorDisplay = document.getElementById("author");

async function getQuote() {
    try {
        const response = await fetch('http://localhost:4000/api/quote');
        const data = await response.json();
        quoteDisplay.textContent = data.quote || "No quote found.";
        authorDisplay.textContent = data.author || "Unknown";
    } catch (error) {
        console.error("Quote fetch error:", error);
        quoteDisplay.textContent = "Error fetching quote.";
    }
}

Skrip ini mengambil data, mengemas kini petikan dan pengarang dalam UI.

Langkah 4: Kefungsian Salin

API Papan Klip membolehkan penyalinan petikan:

// copyQuote.js
async function copyQuote() {
    try {
        const quoteText = `${quoteDisplay.textContent} - ${authorDisplay.textContent}`;
        await navigator.clipboard.writeText(quoteText);
        alert("Copied to clipboard!");
    } catch (error) {
        console.error("Copy failed:", error);
    }
}

Mengklik ikon salin menyalin petikan dan pengarang.

Langkah 5: Kongsi Fungsi

API Navigator memudahkan perkongsian:

// shareQuote.js
async function shareQuote() {
    const quoteText = `${quoteDisplay.textContent} - ${authorDisplay.textContent}`;
    try {
        await navigator.share({ text: quoteText });
    } catch (error) {
        console.error("Share failed:", error);
        // Fallback for unsupported browsers
        alert(`Share this quote: ${quoteText}`);
    }
}

Ini mengendalikan perkongsian, memberikan sandaran untuk penyemak imbas yang kekurangan navigator.share.

Langkah 6: Menggayakan dengan CSS

CSS menggayakan apl untuk daya tarikan visual dan responsif (gaya contoh ditiadakan untuk ringkas).

Langkah 7: Melancarkan Apl

Klon repositori: (ganti dengan URL repositori sebenar anda)
Pasang kebergantungan: npm install
Mulakan pelayan proksi: node proxy.js
Buka index.html dalam penyemak imbas anda.

Struktur Projek

index.html: UI Utama
proxy.js: pelayan proksi CORS
index.js: Pengambilan petikan dan paparan
copyQuote.js: Kefungsian salin
shareQuote.js: Kongsi fungsi
styles.css: Penggayaan

Kredit API

Petikan disediakan oleh API Petikan.

Kesimpulan

Tutorial ini merangkumi pembinaan Penjana Petikan Rawak, menunjukkan penyepaduan API, pengendalian CORS dan API penyemak imbas. Ini merupakan latihan yang bagus untuk mempelajari interaksi API, asas JavaScript dan API penyemak imbas. Maklum balas adalah dialu-alukan!

GitHub | LinkedIn | X

Atas ialah kandungan terperinci Membina Penjana Petikan Rawak: Panduan Langkah demi Langkah dengan Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Apakah grid CSS?Apr 30, 2025 pm 03:21 PM

CSS Grid adalah alat yang berkuasa untuk mewujudkan susun atur web yang rumit dan responsif. Ia memudahkan reka bentuk, meningkatkan kebolehcapaian, dan menawarkan lebih banyak kawalan daripada kaedah yang lebih lama.

Apakah CSS Flexbox?Apr 30, 2025 pm 03:20 PM

Artikel membincangkan CSS Flexbox, kaedah susun atur untuk penjajaran yang cekap dan pengedaran ruang dalam reka bentuk responsif. Ia menerangkan penggunaan Flexbox, membandingkannya dengan grid CSS, dan butiran sokongan penyemak imbas.

Bagaimanakah kita boleh membuat laman web kami responsif menggunakan CSS?Apr 30, 2025 pm 03:19 PM

Artikel ini membincangkan teknik untuk membuat laman web responsif menggunakan CSS, termasuk tag Meta Viewport, grid fleksibel, media cecair, pertanyaan media, dan unit relatif. Ia juga meliputi menggunakan grid CSS dan Flexbox bersama -sama dan mengesyorkan rangka kerja CSS

Apakah harta saiz kotak CSS?Apr 30, 2025 pm 03:18 PM

Artikel ini membincangkan harta saiz kotak CSS, yang mengawal bagaimana dimensi elemen dikira. Ia menerangkan nilai seperti kotak kandungan, kotak sempadan, dan kotak padding, dan kesannya terhadap reka bentuk susun atur dan penjajaran bentuk.

Bagaimanakah kita boleh menghidupkan CSS?Apr 30, 2025 pm 03:17 PM

Artikel membincangkan membuat animasi menggunakan CSS, sifat utama, dan menggabungkan dengan JavaScript. Isu utama adalah keserasian penyemak imbas.

Bolehkah kita menambah transformasi 3D ke projek kami menggunakan CSS?Apr 30, 2025 pm 03:16 PM

Artikel membincangkan menggunakan CSS untuk transformasi 3D, sifat utama, keserasian penyemak imbas, dan pertimbangan prestasi untuk projek web. (Kira -kira aksara: 159)

Bagaimana kita boleh menambah kecerunan dalam CSS?Apr 30, 2025 pm 03:15 PM

Artikel ini membincangkan menggunakan kecerunan CSS (linear, radial, mengulangi) untuk meningkatkan visual laman web, menambah kedalaman, fokus, dan estetika moden.

Apakah unsur-unsur pseudo dalam CSS?Apr 30, 2025 pm 03:14 PM

Artikel membincangkan unsur-unsur pseudo dalam CSS, penggunaannya dalam meningkatkan gaya HTML, dan perbezaan dari kelas pseudo. Menyediakan contoh praktikal.

See all articles