JavaScript/lesson-09/dom-projects.html at main · deep100x/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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>09 - DOM Projects</title>
	</head>

	<body>
		<!--

            🟨Clicks & Keydowns => Events
		    🟨OnClick & OnKeyDown => Event Listeners

            EVENT LISTENERS :-

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

        -->

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

		<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

		<h2>Rock Paper Scissor Game</h2>
		<a href="./RockPaper.html" target="_blank">click here</a>

		<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

		<h2>Amazon Shipping Calculator</h2>
		<p>Orders under Rs.499 = +Rs.40 shipping</p>
		<p>Orders over 499 = FREE shipping</p>
		<input placeholder="cost of order" onkeydown="handleCostKeydown(event)" if(event.key === 'Enter'){calculateTotal();} class="js-cost-input" />
		<button onclick="calculateTotal()">Calculate</button>
		<p class="js-total-cost"></p>

		<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

		<script>
			//🟨Type Coetion   -   Automatic Type Covertion
			String(25)
			console.log("25" - 5) //20
			console.log("25" + 5) //255

			// browser
			window.document
			window.console.log("window")
			window.alert

			//🟨
			function handleCostKeydown(event) {
				if (event.key === "Enter") {
					calculateTotal()
				}
			}

			//🟨
			function calculateTotal() {
				const inputElement = document.querySelector(".js-cost-input")
				let cost = Number(inputElement.value)

				if (cost < 499) {
					cost = cost + 40
				}

				document.querySelector(".js-total-cost").innerHTML = `Rs .${cost}`
			}

			//🟨
			function subscribe() {
				const buttonElement = document.querySelector(".js-subscribe-button")

				if (buttonElement.innerText === "Subscribe") {
					buttonElement.innerHTML = "Subscribed"
				} else {
					buttonElement.innerHTML = "Subscribe"
				}
			}
		</script>
	</body>
</html>