Image generater

7,150 huzaifa527

Open In Editor Publish Your Code

Image generater

Recommended

27 November 2024

Responsive Image Slider

12 December 2024

Image Slider for Blogspot CSS3

9 September 2024

Lume Image Carousel

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