URL to Image Tool
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #ffffff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
color: #4CAF50;
margin-bottom: 20px;
}
.url-input {
width: 80%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
background-color: #45a049;
}
.image-container {
margin-top: 20px;
display: none;
}
.hidden {
display: none;
}
img {
width: 100%;
border-radius: 5px;
max-width: 100%;
margin-bottom: 10px;
}
.error-message {
color: red;
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
.download-btn {
margin-top: 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 10px 20px;
}
.download-btn:hover {
background-color: #0056b3;
}
.download-btn i {
margin-right: 5px;
}
function loadImage() {
const imageUrl = document.getElementById('imageUrl').value;
const image = document.getElementById('image');
const errorMessage = document.getElementById('errorMessage');
const downloadBtn = document.getElementById('downloadBtn');
const imageContainer = document.getElementById('imageContainer');
if (!imageUrl) {
errorMessage.classList.add('hidden');
imageContainer.classList.add('hidden');
return;
}
// Reset everything before loading a new image
image.src = "";
errorMessage.classList.add('hidden');
imageContainer.classList.add('hidden');
// Check if the URL is valid and load image
image.src = imageUrl;
image.onload = function() {
imageContainer.classList.remove('hidden');
downloadBtn.classList.remove('hidden');
};
image.onerror = function() {
errorMessage.classList.remove('hidden');
imageContainer.classList.add('hidden');
downloadBtn.classList.add('hidden');
};
}
document.getElementById('downloadBtn').addEventListener('click', function() {
const image = document.getElementById('image');
const link = document.createElement('a');
link.href = image.src;
link.download = 'downloaded-image';
link.click();
});
