Okay, here is a simple website with a girly aesthetic that generates a random number within a user-defined interval. ✨ Random Number Sparkle ✨

✨ Random Number Sparkle ✨

Enter your number range below:

Min:

Max:

Your sparkly number is:

💖

body { background-color: #fff0f5; /* Lavender Blush */ font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; color: #553c51; /* Darker Mauve */ } .container { background-color: #ffffff; padding: 30px 40px; border-radius: 15px; box-shadow: 0 4px 15px rgba(219, 112, 147, 0.2); /* Pale Violet Red shadow */ text-align: center; border: 2px solid #ffb6c1; /* Light Pink border */ } h1 { font-family: 'Pacifico', cursive; color: #db7093; /* Pale Violet Red */ margin-bottom: 20px; font-size: 2.5em; } p { font-size: 1.1em; margin-bottom: 15px; } .input-group { margin-bottom: 15px; display: flex; justify-content: center; align-items: center; gap: 10px; } label { font-weight: bold; color: #c71585; /* Medium Violet Red */ } input[type="number"] { padding: 8px 12px; border: 1px solid #ffb6c1; /* Light Pink */ border-radius: 8px; font-size: 1em; width: 80px; text-align: center; transition: border-color 0.3s ease, box-shadow 0.3s ease; } input[type="number"]:focus { outline: none; border-color: #db7093; /* Pale Violet Red */ box-shadow: 0 0 5px rgba(219, 112, 147, 0.5); } button { background-color: #ff69b4; /* Hot Pink */ color: white; border: none; padding: 12px 25px; border-radius: 20px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-top: 10px; margin-bottom: 20px; } button:hover { background-color: #db7093; /* Pale Violet Red */ transform: scale(1.05); } #result-container { margin-top: 20px; background-color: #fff5f8; /* Lighter pink */ padding: 15px; border-radius: 10px; border: 1px dashed #ffb6c1; /* Light Pink */ } #result-container p { margin-bottom: 5px; font-size: 1em; color: #c71585; /* Medium Violet Red */ } #result-number { font-size: 3em; font-weight: bold; color: #ff1493; /* Deep Pink */ margin-top: 5px; } .error { color: #dc143c; /* Crimson */ font-weight: bold; margin-top: 15px; min-height: 1.2em; /* Reserve space */ } const minInput = document.getElementById('min-number'); const maxInput = document.getElementById('max-number'); const generateBtn = document.getElementById('generate-btn'); const resultNumberDisplay = document.getElementById('result-number'); const errorMessageDisplay = document.getElementById('error-message'); generateBtn.addEventListener('click', () => { errorMessageDisplay.textContent = ''; // Clear previous errors resultNumberDisplay.textContent = '💖'; // Reset display const min = parseInt(minInput.value, 10); const max = parseInt(maxInput.value, 10); // Input validation if (isNaN(min) || isNaN(max)) { errorMessageDisplay.textContent = 'Oops! Please enter valid numbers.'; return; } if (min > max) { errorMessageDisplay.textContent = 'Uh oh! Minimum number cannot be greater than maximum.'; return; } // Generate random number (inclusive) const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min; // Display the result resultNumberDisplay.textContent = randomNumber; });