JavaScript/lesson-04/website.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
87
<!-- in this lesson: -->
<!-- ------------------- -->
<!--

    Lesson 4 : HTML CSS Review & Console.log

    1. Reviewed basics of HTML & CSS.
    2. Load JavaScript inside HTML file <script>,onclick=""
    3. Comments
    4. console.log

-->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>HTML & CSS REVIEW</title>
		<style>
			/*
            This is a comment
        */
			.red-button {
				background-color: red;
				color: white;
				border: none;
			}

			.yellow-button {
				background-color: yellow;
				color: black;
				border: none;
			}
		</style>
	</head>

	<body>
		<!-- 🟨This will ---Run 2nd -When we click button -->
		<button title="Good job!" class="red-button" onclick="alert('good job');">Click and get alert</button>
		<p>
			Lorem ipsum dolor, sit amet consectetur adipisicing elit.🟩<button title="Good job!" class="yellow-button">hello</button> Quisquam itaque esse n atque, assumenda, et suscipit
			praesentium?Quos mollitia minus officia fuga!
		</p>

		<button id="myButton">Click Me</button><br /><br />

		<form action="" id="myForm">
			<label for="name"></label>
			<input type="text" id="name" name="name" placeholder="enter name " /><br /><br />
			<label for="email"></label>
			<input type="email" id="email" name="email" placeholder="enter email" /><br /><br />
			<input type="submit" value="submit" />
		</form>

		<script>
			console.log(2 + 2)
			console.log("some" + "text")

			console.log("This is a message in the console.")

			var button = document.getElementById("myButton")
			document.getElementById("myButton").addEventListener("click", function () {
				// console.log("Button clicked!")
				if (button.innerHTML === "Click Me") {
					button.innerHTML = "Clicked"
				} else {
					button.innerHTML = "Click Me"
				}
			})

			document.getElementById("myForm").addEventListener("submit", function (event) {
				event.preventDefault()
				var name = document.getElementById("name").value
				var email = document.getElementById("email").value
				console.log("Name : " + name)
				console.log("Email : " + email)
			})

			function greet(name) {
				return "Hello, " + name + "!"
			}
			// Calling the function
			var message = greet("Deep")
		</script>
	</body>
</html>