<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Input</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom font for a clean look */
body {
font-family: "Inter", sans-serif;
}
/* Define the simple pulse animation */
@keyframes pulse-once {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.02); opacity: 0.95; }
100% { transform: scale(1); opacity: 1; }
}
.animate-pulse-once {
animation: pulse-once 0.5s ease-out;
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
<div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-md border border-gray-200">
<h1 class="text-3xl font-extrabold text-gray-800 mb-6 text-center">
Select Your Favorite Fruit
</h1>
<div class="mb-6">
<label for="fruit-select" class="block text-gray-700 text-lg font-medium mb-2">
Choose a fruit:
</label>
<div class="relative">
<select
id="fruit-select"
class="block appearance-none w-full bg-gray-50 border border-gray-300 text-gray-900 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out cursor-pointer"
onchange="displaySelection()"
>
<option value="" disabled selected class="text-gray-500">Please select an option</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="strawberry">Strawberry</option>
</select>
<!-- Custom arrow for the dropdown -->
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
</div>
</div>
<div id="selection-display" class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-lg text-center text-lg font-semibold min-h-[64px] flex items-center justify-center shadow-inner mb-6">
<!-- Selected fruit will be displayed here -->
Your selection will appear here.
</div>
<button
onclick="downloadCsv()"
class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75"
>
Download Selected Fruit as CSV
</button>
</div>
<script>
/**
* @file This script handles the logic for the dropdown selection display
* and the CSV download functionality.
*/
/**
* Displays the currently selected option from the dropdown in the 'selection-display' div.
*/
function displaySelection() {
// Get the select element by its ID
const selectElement = document.getElementById('fruit-select');
// Get the display div by its ID
const displayDiv = document.getElementById('selection-display');
// Get the selected value
const selectedValue = selectElement.value;
// Get the text of the selected option
const selectedText = selectElement.options[selectElement.selectedIndex].text;
// Check if a valid option (not the disabled placeholder) is selected
if (selectedValue) {
// Update the display div with the selected text
displayDiv.textContent = `You selected: ${selectedText}`;
// Add a brief animation for visual feedback
displayDiv.classList.add('animate-pulse-once');
setTimeout(() => {
displayDiv.classList.remove('animate-pulse-once');
}, 500);
} else {
// If no valid option is selected (e.g., initial state or reset), show a default message
displayDiv.textContent = "Your selection will appear here.";
}
}
/**
* Generates and downloads a CSV file with the currently selected fruit.
*/
function downloadCsv() {
const selectElement = document.getElementById('fruit-select');
const selectedText = selectElement.options[selectElement.selectedIndex].text;
// Check if a fruit is actually selected (not the disabled placeholder)
if (selectElement.value === "") {
alert("Please select a fruit before downloading!");
return;
}
// Define the CSV content.
// "Fruit" is the header, and selectedText is the data.
const csvContent = "Fruit\n" + selectedText;
// Create a Blob object from the CSV content
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
// Create a temporary URL for the Blob
const url = URL.createObjectURL(blob);
// Create a temporary anchor element
const a = document.createElement('a');
a.href = url;
a.download = 'selected_fruit.csv'; // Set the filename for the download
// Append the anchor to the body (not visible) and programmatically click it to trigger download
document.body.appendChild(a);
a.click();
// Clean up: remove the anchor and revoke the object URL
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>