Mood Mirror – A Smart Color-Shifting Background Based on Typing Mood

by Vijay Pancholi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mood Mirror</title>
  </style>
</head>
<body>

  <div class="container">
    <h1>Mood Mirror – What's On Your Mind?</h1>
    <h4>Try Typing below example: </h4>

    <p>"I feel so happy and joyful!"</p>

    <div> "This world is full of darkness."</p>

    <p>"I'm in love with the stars ✨"</p>

    <p>"Everything is chaos and madness!"</p> 
    <textarea id="moodInput" placeholder="Type your thoughts..."></textarea>
  </div>
  
</body>
</html>

CSS

html, body {
      height: 100%;
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      transition: background 0.5s ease;
    }

    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100vh;
      padding: 30px;
      text-align: center;
    }

    textarea {
      width: 100%;
      max-width: 600px;
      height: 150px;
      margin: auto;
      padding: 15px;
      font-size: 1.1rem;
      border-radius: 10px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    h1 {
      margin-bottom: 20px;
      font-size: 2rem;
      color: white;
    }

JavaScript

const textarea = document.getElementById('moodInput');

    const moodColors = {
      happy: 'linear-gradient(to right, #fbd786, #f7797d)',
      sad: 'linear-gradient(to right, #a1c4fd, #c2e9fb)',
      angry: 'linear-gradient(to right, #ff4e50, #f9d423)',
      love: 'linear-gradient(to right, #ff758c, #ff7eb3)',
      calm: 'linear-gradient(to right, #43cea2, #185a9d)',
      dark: 'linear-gradient(to right, #232526, #414345)',
      chaos: 'linear-gradient(to right, #8360c3, #2ebf91)',
      default: 'linear-gradient(to right, #ffffff, #dddddd)'
    };

    function detectMood(text) {
      text = text.toLowerCase();

      if (/love|romantic|crush|heart|kiss/.test(text)) return 'love';
      if (/happy|joy|awesome|yay|great/.test(text)) return 'happy';
      if (/sad|cry|down|depressed|blue/.test(text)) return 'sad';
      if (/angry|mad|hate|furious/.test(text)) return 'angry';
      if (/calm|peace|relax|breathe/.test(text)) return 'calm';
      if (/dark|alone|gloomy|void/.test(text)) return 'dark';
      if (/crazy|chaos|random|madness/.test(text)) return 'chaos';

      return 'default';
    }

    textarea.addEventListener('input', () => {
      const mood = detectMood(textarea.value);
      document.body.style.background = moodColors[mood];
    });