function_library.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Function library example</title>
  <style>
    input {
      font-size: 2em;
      margin: 10px 1px 0;
    }
  </style>
</head>
<body>

  <input class="numberInput" type="text">
  <p></p>

  <script>
    const input = document.querySelector('.numberInput');
    const para = document.querySelector('p');

    function squared(num) {
        return num * num
    }

    function cubed(num) {
        return num * num * num
    }

    function factorial(num) {
        let x = num
        while (x > 1) {
            num *= x-1
            x--
        }
        return num
    }

    function animal(num) {
        num = "miao"
    }

    input.onchange = function() {
        const num = input.value 
        if (isNaN(num)) {
            para.textContent = 'You need to enter a number!'
        } else {
            para.textContent = num + ' squared is ' + squared(num) + '. ' +
                               num + ' cubed is ' + cubed(num) + '. ' + 
                               num + ' factorial is ' + factorial(num) + '. '
                               num + ' in cat language is ' + animal(num) + '.';
        }
    }

  </script>
</body>
</html>