ساختن یک تولید کننده نقل قول تصادفی: راهنمای گام به گام با کد

const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();

// Enable CORS
app.use(cors());

// Define a route for proxying API requests
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: "Failed to fetch data from API" });
    }
});

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

const quote = document.querySelector(".quote");
const author = document.querySelector(".author");

async function generateQuote() {
    const url = 'http://localhost:4000/api/quote';

    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const result = await response.json();
        quote.textContent = result.quote || "No quote available.";
        author.textContent = result.author || "Author Unknown";
    } catch (error) {
        console.error("Error fetching quote:", error);
        quote.textContent = "Failed to fetch quote. Try again later.";
    }
}

async function copyQuote() {
    try {
        let quote = document.querySelector(".quote").textContent;
        let author = document.querySelector(".author").textContent;

        await navigator.clipboard.writeText(`${quote} - ${author}`);
        alert("Content copied to clipboard");
    } catch (error) {
        console.error('Failed to copy:', error);
    }
}

async function shareQuote() {
    let quote = document.querySelector(".quote").textContent;
    let author = document.querySelector(".author").textContent;

    const quoteContent = `${quote} - ${author}`;
    const message = encodeURIComponent(quoteContent);

    if (window.screen.width < 768 || navigator.userAgent.match(/Android|iOS/)) {
        window.open(`whatsapp://send?text=${message}`, '_blank');
    } else {
        window.open(`https://web.whatsapp.com/send?text=${message}`, '_blank');
    }
}

html, body {
    background: rgb(171,129,205);
    background: linear-gradient(0deg, rgba(171,129,205,1) 0%, rgba(34,42,104,1) 100%);         
    margin: 0;
    padding: 0;
    height: 100%;    
}

main {
    flex: 1; /* Fills available space */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.title, .subheading {
    align-items: center;
    text-align: center;
    color: #fafffd
}

.subheading {
    align-items: center;
    text-align: center;
    color: #fa824c
}

p {
    text-align: center; 

}

.quote-generator, .quote-box, .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 100 auto;
    margin-top: 50px;
}

.quotebox   {
    width: 300px auto;    
    height: 200px auto;    
    margin-top: 100px;
    padding: 10px;
    border: 2px solid #9fd356;
    overflow: auto;
    border-radius: 20px;    
}

.quote  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 100 auto;
    color: #fafffd;        
}

.quote-button {
    padding: 15px;
    margin: 15px;
    border-radius: 5px;
    background-color: #e2adf2;
    color: black;
    font-size: larger;    
}

.copyquote, .sharequote {
    display: flex;
}

.author {
    color: #9fd356;;    
}

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 200px;
    margin: 200px;    
}

.footer-left {
    font-size: 20px;    
    float: center;    
}



.footer-right {
  margin-top:20px;
  float:center;  
}

a.menu:hover {
    border-radius: 2px;
    font-size: 20px;    
}

.icon-style {
    height:60px;
    margin-left:20px;
    margin-top:5px;
}

.icon-style:hover {
    background-color: #ab81cd;
    padding:5px;
    border-radius: 15px;
    transition: 0.5s;
    transition-duration: 0.25s;
    color: azure;
}

   git clone https://github.com/yourusername/random-quotes-generator.git
   cd random-quotes-generator

   npm install

   node proxy.js