Image generater

6,692 huzaifa527

Open In Editor Publish Your Code

Image generater

Recommended

20 February 2026

3D Image Cube Loader

28 September 2025

CSS Loading Animation with Background Image

12 December 2024

Image Slider for Blogspot CSS3

HTML

<html>
<head>
    <title>Image Generator App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container text-center">
        <h1>Image Generator App</h1>
        <p>Enter text to generate an image:</p>
        <input type="text" id="textInput" class="form-control mb-3" placeholder="Enter text">
        <button onclick="generateImage()" class="btn btn-primary">Generate Image</button>
        <div id="imageContainer" class="mt-3"></div>
    </div>

<script>
        function generateImage() {
            const text = document.getElementById('textInput').value;
            const imageContainer = document.getElementById('imageContainer');
            
            // You can make an AJAX call here to fetch image based on text input
            // For demonstration purposes, let's just display a placeholder image
            const placeholderImageUrl = 'https://source.unsplash.com/featured/?' + text;
            
            const imageElement = document.createElement('img');
            imageElement.setAttribute('src', placeholderImageUrl);
            imageElement.setAttribute('class', 'img-fluid');
            
            imageContainer.innerHTML = '';
            imageContainer.appendChild(imageElement);
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
</body>
</html>

CSS

JS