hujung hadapan webtutorial cssMembina Penjana Petikan Rawak: Panduan Langkah demi Langkah dengan Kod
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.htmldalam 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!
Pembaca Skrin Demystifying: Borang & Amalan Terbaik DiaksesMar 08, 2025 am 09:45 AMIni adalah jawatan ke -3 dalam siri kecil yang kami lakukan dalam kebolehcapaian bentuk. Jika anda terlepas jawatan kedua, lihat "Menguruskan Fokus Pengguna dengan: Fokus-Visible". Dalam
Buat borang hubungan JavaScript dengan rangka kerja pintarMar 07, 2025 am 11:33 AMTutorial ini menunjukkan mewujudkan bentuk JavaScript yang berpandangan profesional menggunakan rangka kerja pintar (nota: tidak lagi tersedia). Walaupun kerangka itu sendiri tidak tersedia, prinsip dan teknik tetap relevan untuk pembina bentuk lain.
Menambah bayang -bayang kotak ke blok dan elemen WordPressMar 09, 2025 pm 12:53 PMCSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Bekerja dengan Caching GraphqlMar 19, 2025 am 09:36 AMSekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama andaMar 15, 2025 am 11:08 AMAPI Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
CSS Scrollbars Custom Custom: PameranMar 10, 2025 am 11:37 AMDalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik
Tunjukkan, jangan beritahuMar 16, 2025 am 11:49 AMBerapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Apa yang ada perintah npm?Mar 15, 2025 am 11:36 AMPerintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
