ChatGPT Content Generator

AI Tools Arena Labs Small — AI Tools Arena Labs

ChatGPT Content Generator is a simple app that generates random quotes with random image backgrounds. You can improve it yourself, like changing it to a random video background.

WARNING

Image and quote copyrights belong to the API provider.
This app is intended for educational purposes only. Use it at your own risk!

Try This App

ChatGPT Prompt

CREATE A HTML5 RANDOM QUOTES GENERATOR, USE FREE EXTERNAL API, WITHOUT API KEY, IN 1 HTML FILE, TITLE "QUOTE OF THE DAY" BUTTON CAPTION "NEW QUOTE",AUTO HEIGHT AND WIDTH FOR QUOTES PLACEHOLDER, I DON'T HAVE WEB SERVER, CREATE FOR LOCAL ONLY
ADD BEAUTIFUL CSS3 DESIGN, 
ADD 5 SECONDS ONLOAD CSS3 RANDOM ANIMATION,  
ADD RANDOM IMAGE BACKGROUND FROM PEXELS API, WITHOUT API KEY,I DON'T HAVE WEB SERVER, CREATE FOR LOCAL ONLY

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote of the Day</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            background-image: url('https://source.unsplash.com/random');
            background-size: cover;
            background-repeat: no-repeat;
        }
        
        #quote-container {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            max-width: 80%;
            width: 400px;
        }
        
        #quote {
            font-size: 24px;
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        #author {
            font-size: 18px;
            font-style: italic;
            color: #4CAF50;
            margin-top: 20px;
        }
        
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px 2px;
            cursor: pointer;
            border-radius: 25px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #3f8a41;
        }
        
        @media screen and (max-width: 480px) {
            #quote-container {
                width: 90%;
            }
        }

        /* Animation */
        .animated {
            animation-duration: 5s;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .fadeIn {
            animation-name: fadeIn;
        }

    </style>
</head>
<body>
    <div id="quote-container">
        <div id="quote" class="animated fadeIn"></div>
        <div id="author" class="animated fadeIn"></div>
        <button id="new-quote" onclick="getNewQuote()">New Quote</button>
    </div>
    <script>
        function getNewQuote() {
            fetch('https://api.quotable.io/random')
                .then(response => response.json())
                .then(data => {
                    const quoteElement = document.getElementById('quote');
                    const authorElement = document.getElementById('author');
                    quoteElement.classList.remove('animated', 'fadeIn');
                    authorElement.classList.remove('animated', 'fadeIn');
                    
                    setTimeout(() => {
                        quoteElement.textContent = data.content;
                        authorElement.textContent = '— ' + data.author;
                        quoteElement.classList.add('animated', 'fadeIn');
                        authorElement.classList.add('animated', 'fadeIn');
                }, 100);
            })
            .catch(error => {
                console.error('Error fetching quote:', error);
                document.getElementById('quote').textContent = 'Oops! Something went wrong. Please try again.';
                document.getElementById('author').textContent = '';
            });
    }

    getNewQuote();
</script>
</body>
</html>

Related

1 thought on “ChatGPT Content Generator”

Contact Form