Back
Learn how to design an enchanting input field inspired by a mood ring that changes hues based on the words you type.
div to center our input field and an input element where the user can type:
<div class="mood-ring-container">
<input type="text" aria-label="Mood Ring Input" oninput="updateMoodRing(this.value)" class="mood-ring-input" placeholder="Type your thoughts...">
</div>
This HTML snippet creates a div to house our input field classed mood-ring-container for styling purposes. The input field uses semantic HTML attributes type and aria-label for accessibility and an oninput event to trigger our JavaScript function updateMoodRing.updateMoodRing attaches a color-changing effect to user input, inspired by mood rings:
function updateMoodRing(value) {
const input = document.querySelector('.mood-ring-input');
const moodData = ['happy', 'calm', 'excited', 'anxious', 'angry', 'sad'];
const colors = [
'linear-gradient(135deg, rgba(255,223,0,0.9), rgba(243,156,18,0.9))',
'linear-gradient(135deg, rgba(0,255,222,0.9), rgba(0,251,181,0.9))',
'linear-gradient(135deg, rgba(255,87,34,0.9), rgba(233,30,99,0.9))',
'linear-gradient(135deg, rgba(100,25,255,0.9), rgba(123,31,162,0.9))',
'linear-gradient(135deg, rgba(255,0,0,0.9), rgba(221,75,57,0.9))',
'linear-gradient(135deg, rgba(44,62,80,0.9), rgba(52,73,94,0.9))'
];
let index = moodData.indexOf(value.toLowerCase().trim());
if (index !== -1) {
input.style.background = colors[index];
} else {
input.style.background = 'linear-gradient(135deg, rgba(189,195,199,0.9), rgba(149,165,166,0.9))';
}
}
We use an anonymous function which finds keywords like "happy" or "excited" in the text and changes the background accordingly. If no matching keyword is found, a neutral gradient is applied.
.mood-ring-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: rgba(255,255,255,0.3);
backdrop-filter: blur(20px);
border-radius: 15px;
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}
This styling employs a backdrop-filter to create a blurred glassy effect, offering a modern flair. A box shadow provides depth that enhances the glass-like illusion.
The input field itself combines animation and structure:
.mood-ring-input {
border: none;
padding: 15px 20px;
border-radius: 10px;
color: #333;
font-size: 16px;
font-weight: bold;
transition: background 0.3s, color 0.3s;
outline: none;
background: linear-gradient(135deg, rgba(189,195,199,0.9), rgba(149,165,166,0.9));
color-scheme: light dark;
width: 60%;
max-width: 500px;
}
Glassmorphism makes this background style intriguing yet minimalistic without any harsh edges. Note how the transition allows smooth color shifts based on the input words.
In sum, this lovely input is both a functional tool and a beautiful element of interaction, turning simple word inputs into a visually responsive experience.<div class="mood-ring-container">
<input type="text" aria-label="Mood Ring Input" oninput="updateMoodRing(this.value)" class="mood-ring-input" placeholder="Type your thoughts...">
</div>
<script>
function updateMoodRing(value) {
const input = document.querySelector('.mood-ring-input');
const moodData = ['happy', 'calm', 'excited', 'anxious', 'angry', 'sad'];
const colors = [
'linear-gradient(135deg, rgba(255,223,0,0.9), rgba(243,156,18,0.9))',
'linear-gradient(135deg, rgba(0,255,222,0.9), rgba(0,251,181,0.9))',
'linear-gradient(135deg, rgba(255,87,34,0.9), rgba(233,30,99,0.9))',
'linear-gradient(135deg, rgba(100,25,255,0.9), rgba(123,31,162,0.9))',
'linear-gradient(135deg, rgba(255,0,0,0.9), rgba(221,75,57,0.9))',
'linear-gradient(135deg, rgba(44,62,80,0.9), rgba(52,73,94,0.9))'
];
let index = moodData.indexOf(value.toLowerCase().trim());
if (index !== -1) {
input.style.background = colors[index];
} else {
input.style.background = 'linear-gradient(135deg, rgba(189,195,199,0.9), rgba(149,165,166,0.9))';
}
}
</script>
<style>
.mood-ring-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: rgba(255,255,255,0.3);
backdrop-filter: blur(20px);
border-radius: 15px;
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}
.mood-ring-input {
border: none;
padding: 15px 20px;
border-radius: 10px;
color: #333;
font-size: 16px;
font-weight: bold;
transition: background 0.3s, color 0.3s;
outline: none;
background: linear-gradient(135deg, rgba(189,195,199,0.9), rgba(149,165,166,0.9));
color-scheme: light dark;
width: 60%;
max-width: 500px;
}
</style>
Thank you for reading this article.
Comments