09-dom-projects.html

<!DOCTYPE html>
<html>

<head>
  <title>DOM Projects</title>
  <style>

  </style>
</head>

<body>
  <p>YouTube Subscribe Button</p>
  <button onclick="subscribe();
      " class="js-sub-button"> Subscribe</button>

  <p> Amazon Shipping Calculator </p>
  <p> Orders under $40 </p>
  <input placeholder="Cost of order" class="js-cost-input" onkeydown="handleCostKeydown(event);">
  <button onclick="
  calculateTotal();"> Calculate</button>
  <p class="js-total-cost"> </p>


  <script>
function handleCostKeydown(event) {
  if (event.key === 'Enter') {calculateTotal();}
}


    function subscribe() {
      const subButtonLM = document.querySelector('.js-sub-button');

      if (subButtonLM.innerText === 'Subscribe') { subButtonLM.innerHTML = 'Subscribed' }
      else { subButtonLM.innerHTML = 'Subscribe' }
    }


    function calculateTotal() {
      const inputElement = document.querySelector('.js-cost-input');
      let cost = Number(inputElement.value);

      if (cost < 40) { cost = cost + 10; }
      else {
        cost = cost;
      }

      document.querySelector('.js-total-cost').innerHTML = `$${cost}`;
    };

  </script>
</body>

</html>