09-dom-projects.html

<!DOCTYPE html>
<head>
  <title>DOM Projects</title>
</head>
<body>

  <p> YouTube Subscribe Button</p>
  <button onclick="
  Subscribe();
" class="js-subscribe-button">Subscribe</button>

<p>
  Amazon Shipping Calculator
</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>

      // number to string
      String(25);

      // dont do math in the following way:
      // console.log('25'-5);
      // console.log('25'+5);

      // window represents everything in the window of the browser
      // document means the following:
      window.document
      // consolee.log is actually the following:
      window.console.log('window');

      function handleCostKeydown(event) {

        if(event.key === 'Enter'){
          calculateTotal();
        }


      }


      function calculateTotal() {

        const inputElement = document.querySelector('.js-cost-input');

        // we use innerHTML to get the inner HTML text in js, but since input element doesnt have any text we use .value

        // when we get value from DOM it is a string >> so we have to switch from string to number:
        let cost = Number(inputElement.value);

        if (cost < 40) {
          cost = cost + 10;
        }

        document.querySelector('.js-total-cost')
          .innerHTML = `$${cost}`;

      }


      function Subscribe() {

      const buttonElement = document.querySelector('.js-subscribe-button');
      // inner Text gets u the text so there is no problem if there are extra spaces before or after the name.
          if(buttonElement.innerText === 'Subscribe'){
            buttonElement.innerHTML = 'Subscribed';
          }
          else{
            buttonElement.innerHTML = 'Subscribe'; 
            }



      

      }



    </script>
</body>
</html>