Image generater html code for free
index.html
1
<html>2
<head>3
<title>Image Generator App</title>4
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">5
</head>6
<body>7
<div class="container text-center">8
<h1>Image Generator App</h1>9
<p>Enter text to generate an image:</p>10
<input type="text" id="textInput" class="form-control mb-3" placeholder="Enter text">11
<button onclick="generateImage()" class="btn btn-primary">Generate Image</button>12
<div id="imageContainer" class="mt-3"></div>13
</div>14
15
<script>16
function generateImage() {17
const text = document.getElementById('textInput').value;18
const imageContainer = document.getElementById('imageContainer');19
20
// You can make an AJAX call here to fetch image based on text input21
// For demonstration purposes, let's just display a placeholder image22
const placeholderImageUrl = 'https://source.unsplash.com/featured/?' + text;23
24
const imageElement = document.createElement('img');25
imageElement.setAttribute('src', placeholderImageUrl);26
imageElement.setAttribute('class', 'img-fluid');27
28
imageContainer.innerHTML = '';29
imageContainer.appendChild(imageElement);30
}31
</script>32
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>33
</body>34
</html>35
styles.css
1
/* Replace with your CSS Code 2
(Leave empty if not needed) */ 3
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
