WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
HTML
CSS
JS
<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>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<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>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...