プログラミング初心者です。ドットインストールで割り勘電卓を作っています。
（https://dotinstall.com/lessons/go_dutch_js_v3/42808）
下記プログラム実行したところ、

一人NaN円だとNaN円足りません。 一人NaN円だとNaN円余ります。

と表示され、payLess、short,payMore,overの変数が反映されません。どこが間違っているのか指摘して頂けないでしょうか。

(function (){
 'usr strict';


  var price = document.getElementById('price');
  var num = document.getElementById('num');
  var unit = document.getElementById('unit');
  var btn = document.getElementById('btn');
  var result = document.getElementById('result');
  var reset = document.getElementById('reset');

  

  btn.addEventListener('click', function() {
   
  var payLess;
  var short;
  var payMore;
  var over;
  var str;
   
  payLess = Math.floor(price.value / num.value / unit.value) * unit.value;
  short = price.value - (payLess * num.value);
  payMore = Math.ceil(price.value / num.value /unit.value)* unit.value;
  over = Math.abs(price.value - (payMore * num.value));
  str =
     ' 一人' + payLess + '円だと' + short + '円足りません。' +
      ' 一人' + payMore + '円だと' + over + '円余ります。';
    result.textContent = str;
  });
})();
body {
 background: #ccc;
 font-size: 16px;
 font-family: Arial, sans-serif;
}

.container {
 width: 500px;
 margin: 25px auto;
}

#price,
#num,
#unit {
 font-size: 14px;
 box-sizing: border-box;
 padding: 10px;
 height: 40px;
 border-radius: 5px;
 border: none;
 margin-right: 10px;

}

#price {
 width: 140px;
}

#unit,
#num {
 width: 110px;
}

#btn{
 cursor: pointer;
 display: inline-block;
 box-sizing: border-box;
 width: : 110px;
 height: 40px;
 padding: 10px;
 background: #3897fd;
 font-size: 14px;
 text-align: : center;
 color: #fff;

}
.input-area {
 font-size:0;
 margin-bottom: 10px;
}

.result-area {
 background: #f8f8f8;
 padding: 10px;
 height:130px;
 border-radius: 5px;
 position: relative;
}

#result {
 margin: 0px;
}

#reset {
 text-decoration: underline;
 cursor: pointer;
 position: absolute;
 bottom: 10px;
 right: 10px;
   }
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charaset ='utf-8'>
<title>割り勘電卓</title>
<link rel='stylesheet' href="css/styles.css">

</head>

<body>

<div class='container'>
 <div class = 'input-area'>
  <input type='text' id='price' placeholder="金額"> 
  <input type='text' id='num' placeholder="人数">
  <select id='unit'>
   <option value "10">１０円単位</option>
   <option value "100" selected>１００円単位</option> <!-- selected is deafult   --> 
   <option value "1000">１０００円単位</option>
  </select>
        <div id='btn'>計算</div>
    </div>
    <div class='result-area'>
    <p id='result'>ここに結果を表示します</p>
    <div id='reset'>もういちど計算する？</div>
   </div>
</div>
<script src='js/main.js'></script>
</body>
</html>