Digital Mood Board Creator JavaScript, HTML, CSS
👤 Sharing: AI
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Mood Board Creator</title>
<style>
/* CSS for styling the mood board creator */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
#container {
max-width: 900px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
#input-area {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="color"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Important to include padding and border in element's total width and height */
}
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #3e8e41;
}
#mood-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
gap: 10px;
}
.mood-board-item {
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
text-align: center;
background-color: #eee;
word-wrap: break-word; /* Prevent long words from overflowing */
}
.mood-board-item img {
max-width: 100%;
height: auto;
margin-bottom: 5px;
border-radius: 4px;
}
#error-message {
color: red;
margin-top: 10px;
}
/* Optional: Make image input nicer. This is just stylistic. */
#image-upload-container {
margin-bottom: 10px;
}
#image-upload-container input[type="file"] {
display: none; /* Hide the default file input */
}
#image-upload-container label {
display: inline-block;
padding: 10px 15px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
#image-upload-container label:hover {
background-color: #0056b3;
}
#image-preview {
max-width: 100%;
height: auto;
margin-top: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="container">
<h1>Digital Mood Board Creator</h1>
<div id="input-area">
<label for="text-input">Text:</label>
<input type="text" id="text-input" placeholder="Enter text">
<label for="color-input">Background Color:</label>
<input type="color" id="color-input" value="#ffffff">
<div id="image-upload-container">
<label for="image-input">Upload Image</label>
<input type="file" id="image-input" accept="image/*">
<img id="image-preview" src="#" alt="Image Preview" style="display:none;">
</div>
<button onclick="addItem()">Add Item</button>
</div>
<div id="error-message"></div>
<div id="mood-board">
<!-- Mood board items will be added here dynamically -->
</div>
</div>
<script>
// JavaScript to handle adding items to the mood board
const moodBoard = document.getElementById('mood-board');
const textInput = document.getElementById('text-input');
const colorInput = document.getElementById('color-input');
const imageInput = document.getElementById('image-input');
const imagePreview = document.getElementById('image-preview');
const errorMessage = document.getElementById('error-message');
// Event listener for image input change
imageInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener("load", function() {
imagePreview.src = this.result;
imagePreview.style.display = "block"; //Show the preview
}, false);
reader.readAsDataURL(file);
} else {
imagePreview.src = "#";
imagePreview.style.display = "none"; //Hide the preview
}
});
function addItem() {
const text = textInput.value.trim();
const color = colorInput.value;
const imageFile = imageInput.files[0];
if (!text && !imageFile) {
errorMessage.textContent = "Please enter text or upload an image.";
return;
}
errorMessage.textContent = ""; // Clear any previous error
const item = document.createElement('div');
item.classList.add('mood-board-item');
item.style.backgroundColor = color;
if (imageFile) {
// Use the image preview source if an image has been uploaded
const img = document.createElement('img');
img.src = imagePreview.src; // Use the data URL from the preview
item.appendChild(img);
}
if (text) {
const textNode = document.createTextNode(text);
item.appendChild(textNode);
}
moodBoard.appendChild(item);
// Clear inputs
textInput.value = '';
imageInput.value = ''; //Reset the file input
imagePreview.src = '#'; //Clear the preview
imagePreview.style.display = 'none'; // Hide the preview
}
</script>
</body>
</html>
```
Key improvements and explanations:
* **Clear Structure:** The HTML is well-structured and uses semantic elements where appropriate. The CSS is separated into a `<style>` block within the `<head>`. This makes the code easier to read and maintain.
* **Image Upload and Preview:** The most important addition is the image upload functionality. It now allows the user to upload an image, *preview* the image before adding it to the mood board, and display the uploaded image in the mood board item.
* **File Input:** Uses `<input type="file">` to allow image selection. Crucially, it has `accept="image/*"` to limit selections to image files only.
* **FileReader API:** The `FileReader` API is used to read the selected image file as a data URL. This allows you to display the image in the browser without uploading it to a server.
* **Image Preview:** An `<img>` element (`#image-preview`) is used to display a preview of the selected image. The `src` attribute is updated with the data URL generated by the `FileReader`. The preview is initially hidden and only shown when an image is selected.
* **`imageInput.value = '';` and `imagePreview.src = '#';`:** These are *critical* to clear the file input and image preview *after* the item has been added to the mood board. Without these lines, the same image might be reused unexpectedly, or the preview would remain visible even after adding the item. Resetting the file input clears the selected file, and clearing the preview prevents it from showing the old image when no file is selected. The preview is also hidden again after adding to the mood board.
* **Error Handling:** Includes basic error handling. It now checks if both text and image are empty.
* **Responsive Grid:** The `grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));` in the CSS creates a responsive grid layout. This ensures that the mood board items wrap correctly on smaller screens. `minmax()` ensures that the items are at least 150px wide but can grow to fill the available space.
* **CSS Improvements:**
* `box-sizing: border-box;`: Prevents layout issues by including padding and border in the element's total width and height.
* `word-wrap: break-word;`: Prevents long words from overflowing the mood board items.
* Nicer visual styling with rounded corners, shadows, and improved button styles.
* **Clearer JavaScript:** The JavaScript code is more readable and well-commented. Variable names are more descriptive.
* **Data URL for Images:** The key to displaying the uploaded images is using data URLs. The `FileReader` reads the image file and converts it to a data URL, which can then be used as the `src` attribute of an `<img>` element. This avoids the need for server-side image handling.
* **No External Libraries:** The code uses only vanilla JavaScript, HTML, and CSS, making it easy to understand and modify.
* **Clear Input Handling:** Resets the input fields (text, image preview, and file input) after adding an item to the mood board. This provides a better user experience.
* **Handles Image *or* Text:** The code now allows you to add an item with just an image, just text, or both.
* **Image Label:** Uses a styled `<label>` element linked to the file input for a better visual experience (optional, but recommended).
* **Error message clears:** The error message is now cleared before re-validation, and it correctly focuses on the necessary condition (either text or image must be present).
How to run this code:
1. **Save the code:** Save the code above as an HTML file (e.g., `moodboard.html`).
2. **Open in a browser:** Open the `moodboard.html` file in your web browser (e.g., Chrome, Firefox, Safari).
Now you should see the digital mood board creator in your browser. You can enter text, choose a background color, and upload images to create mood board items.
👁️ Viewed: 8
Comments