<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>条件语句示例2</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        font-family: monospace;
        transition: background-color 200ms ease-in;
      }

      body {
        width: 700px;
        margin: 0 auto;
      }

      p {
        font-size: 1.5rem;
        text-align: center;
      }

      div {
        display: block;
        width: 300px;
        margin: 0 auto;
      }

      input {
        width: 70%;
      }

      button {
        width: 27%;
      }

    </style>
  </head>
  <body>
    <p>你今天心情如何？[开心|难过|生气]</p>
    <div><input type="text"> <button>确定</button></div>
    <p class="output"></p>
  </body>

  <script>
    const inputTxt = document.querySelector('input');
    const btn = document.querySelector('button');
    const outputTxt = document.querySelector('.output');
    const html = document.querySelector('html');

    inputTxt.focus();

    btn.onclick = function() {
      const final = inputTxt.value;
      if(final === '开心') {
        outputTxt.textContent = '你开心，我快乐！';
        html.style.backgroundColor = 'khaki';
      } else if(final === '难过') {
        outputTxt.textContent = '别难过，一切都会过去！';
        html.style.backgroundColor = 'lightblue';
      } else if(final === '生气') {
        outputTxt.textContent = '人生就像一场戏，恩怨何必太在意！';
        html.style.backgroundColor = 'indianred';
      } else {
        outputTxt.textContent = '我不太明白……';
        html.style.backgroundColor = 'beige';
      }
    }

  </script>
</html>
