Select your mood to reflect your inner vibes
13 | 14 | 21 | 22 |How are you feeling today?
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /javascript/script.js: -------------------------------------------------------------------------------- 1 | const moods = { 2 | happy: { 3 | quote: "Happiness is not by chance, but by choice.", 4 | background: "linear-gradient(to right, #f9d423, #ff4e50)", 5 | emojis: ["😊", "😄", "😁"] 6 | }, 7 | sad: { 8 | quote: "Tears come from the heart and not from the brain.", 9 | background: "linear-gradient(to right, #4b6cb7, #182848)", 10 | emojis: ["😢", "😞", "😔"] 11 | }, 12 | anxious: { 13 | quote: "You don't have to control your thoughts. You just have to stop letting them control you.", 14 | background: "linear-gradient(to right, #6a11cb, #2575fc)", 15 | emojis: ["😟", "😰", "😣"] 16 | }, 17 | calm: { 18 | quote: "Calm mind brings inner strength and self-confidence.", 19 | background: "linear-gradient(to right, #00c9ff, #92fe9d)", 20 | emojis: ["😌", "🧘♂️", "🌿"] 21 | }, 22 | excited: { 23 | quote: "Excitement is the more practical synonym for happiness.", 24 | background: "linear-gradient(to right, #fc00ff, #00dbde)", 25 | emojis: ["🤩", "😆", "🎉"] 26 | } 27 | }; 28 | 29 | const moodSelector = document.getElementById("mood-selector"); 30 | const quoteElement = document.getElementById("quote"); 31 | const emojiContainer = document.getElementById("emoji-container"); 32 | const body = document.body; 33 | 34 | moodSelector.addEventListener("change", () => { 35 | const selected = moodSelector.value; 36 | const mood = moods[selected]; 37 | 38 | body.style.background = mood.background; 39 | 40 | quoteElement.style.opacity = 0; 41 | setTimeout(() => { 42 | quoteElement.textContent = mood.quote; 43 | quoteElement.style.opacity = 1; 44 | }, 300); 45 | 46 | emojiContainer.innerHTML = ""; 47 | mood.emojis.forEach((emoji, i) => { 48 | const span = document.createElement("span"); 49 | span.textContent = emoji; 50 | span.style.margin = "10px"; 51 | span.style.animationDelay = `${i * 0.3}s`; 52 | emojiContainer.appendChild(span); 53 | }); 54 | }); 55 | -------------------------------------------------------------------------------- /javascript/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Poppins', sans-serif; 9 | height: 100vh; 10 | background: linear-gradient(to bottom, #dfe9f3, #ffffff); 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | text-align: center; 16 | transition: background 1s ease-in-out; 17 | } 18 | 19 | h1 { 20 | font-size: 3rem; 21 | color: #333; 22 | margin-bottom: 10px; 23 | } 24 | 25 | .description { 26 | font-size: 1.2rem; 27 | color: #666; 28 | margin-bottom: 30px; 29 | } 30 | 31 | select { 32 | padding: 12px 20px; 33 | font-size: 1.2rem; 34 | border-radius: 10px; 35 | border: 2px solid #999; 36 | background: #fff; 37 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 38 | } 39 | 40 | #quote { 41 | margin-top: 30px; 42 | font-size: 1.5rem; 43 | font-style: italic; 44 | max-width: 80%; 45 | color: #444; 46 | transition: opacity 0.5s ease-in-out; 47 | } 48 | 49 | #emoji-container span { 50 | display: inline-block; 51 | font-size: 2.5rem; 52 | animation: float 3s ease-in-out infinite; 53 | } 54 | 55 | @keyframes float { 56 | 0% { transform: translateY(0); opacity: 1; } 57 | 50% { transform: translateY(-15px); opacity: 0.7; } 58 | 100% { transform: translateY(0); opacity: 1; } 59 | } 60 | 61 | footer { 62 | position: absolute; 63 | bottom: 15px; 64 | font-size: 0.9rem; 65 | color: #999; 66 | } 67 | --------------------------------------------------------------------------------