JS-full-course/dom-projects.html at main · Favadh/JS-full-course · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM-Projects</title>
</head>
<body>
  <p>YouTube Subscribe Button</p>

  <button class="js-subscribe" onclick="
    Subscription();
  ">
    subscribe
  </button>


  <p>Amazon Shipping Calculator</p>

  <input class="js-amount" placeholder="Cost of Order" onkeydown="
    let key = event.key;  // 'event' is a built-in Object by JS, it'll have all the info about the happened event including the key we pressed. so we gonna use this technique to get the key when the user presses.

    keyCheck(key);
  ">

  <button onclick="
    Calculatoin();
  ">Calculate</button>

  <p class="js-output"></p>


  <!--
    clicks, keydowns are events.
    onclick, onkeydown are event listeners.

    event listeners check for any events, and they run JS codes if any events are happened.

    There are more Event Listeners :-

      onclick       = click
      onkeydown     = key press
      onscroll      = scrolling
      onmouseenter  = hovering over
      onmouseleave  = stop hovering over
      and more........


      every event listener can use the 'event' object.
   -->


  <script>

    // for youtube subscribe button:
    function Subscription()
    {
      const js_button = document.querySelector('.js-subscribe').innerText;

      if(js_button === 'subscribe')
      {
        document.querySelector('.js-subscribe').innerHTML = 'subscribed';
      }
      else
      {
        document.querySelector('.js-subscribe').innerHTML = 'subscribe';
      }
    }


    function Calculatoin()
    {
      let cost = document.querySelector('.js-amount').value;

      /*
        ".value" is a new property of the HTML element, and it'll help us to get whatever the user inserted into the textbox inside "<input>".
        ".value" will only work with "<input>" ig.
        but the value will always return the text in string format, so we're gonna have to transform the value from string format to number format.

        And there's a built-in function, Number(). This will transform any kind of datatype into number datatype.

        "String()" this will transform any kind of datatype into string datatype.
      */

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

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

    }


    function keyCheck(key)
    {
      if(key === 'Enter')
      {
        Calculatoin();
      }
    }


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