Un code par agilecloud61

1,960 agilecloud61

Ouvrir dans l'éditeur Publiez votre code

Un code par agilecloud61

Recommandé

15 May 2025

Le code de Mete

27 June 2025

Un code de Mete

31 May 2025

Un code par alejandrokundrah

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