JavaScript/09-domProjects.html at main · me-ishan7/JavaScript · 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
110
111
112
113
114
115
116
117
118
119
<!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>
  <style>
    /* Youtube subscribe button Style */
    .subscribe-button {
      border: none;
      background-color: black;
      color: white;
      padding: 10px 15px 10px 15px;
      border-radius: 50px;
      cursor: pointer;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .is-subscribed {
      background-color: rgb(240, 240, 240);
      color: black;
    }

    /* AMAZON SHIPPING CALCULATOR STYLE */

    .cost-input {
      font-size: 16px;
      padding: 5px;
    }
    .cost-label {
      font-size: 18px;
      font-weight: bold;
    }
    .calculate-button {
      border: none;
      background-color: orange;
      color: white;
      padding: 10px 15px 10px 15px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
    }
    .errorAlert {
      color: red;
      font-weight: bold;
    }
  </style>

  <body>
    <h2>Youtube Subscribe Button</h2>

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

    <h2>Amazon Shipping Calculator</h2>
    <p>Orders under $40 = +$10 Shipping</p>
    <p>Orders over $40 = FREE Shipping</p>

    <label for="orderCost" class="cost-label">Enter Order Amount: </label>
    <input
      type="number"
      class="js-amount-input cost-input"
      name="orderCost"
      placeholder="Cost of Order"
      onkeydown="handleCostKeyDown(event)"
    />

    <button onclick="CalculateCost()" class="calculate-button">
      Calculate
    </button>
    <p class="js-total-cost"></p>
    <p class="js-error-msg errorAlert"></p>

    <script>
      function handleCostKeyDown(event) {
        if (event.key === "Enter") {
          CalculateCost();
        }
      }
      function CalculateCost() {
        let amountValue = Number(
          document.querySelector(".js-amount-input").value
        );

        if (isNaN(amountValue) || amountValue <= 0) {
          document.querySelector(".js-total-cost").innerHTML = "";
          let errorMsg = document.querySelector(".js-error-msg");
          errorMsg.innerHTML = "Error: Please enter a valid amount";
          // alert("Please enter a valid amount");
          return;
        }
        document.querySelector(".js-error-msg").innerHTML = "";
        amountValue =
          amountValue < 40 ? (amountValue * 100 + 10 * 100) / 100 : amountValue;

        document.querySelector(
          ".js-total-cost"
        ).innerHTML = `$${amountValue}(Including Shipping)`;
      }

      function Subscribe() {
        const buttonElement = document.querySelector(".js-subscribe-button");
        if (buttonElement.innerText === "Subscribe") {
          buttonElement.innerText = "Subscribed";
          buttonElement.classList.add("is-subscribed");
        } else {
          buttonElement.innerText = "Subscribe";
          buttonElement.classList.remove("is-subscribed");
        }
      }
    </script>
  </body>
</html>