Skip to content

Commit 5154916

Browse files
arunkumarayinabathinaarunkumarayinabathina
committed
This keyword | call,apply,bind
1 parent 1a587ab commit 5154916

File tree

7 files changed

+243
-0
lines changed

7 files changed

+243
-0
lines changed

‎objects/app.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// const circle = {
2+
// radius: 1,
3+
// location: {
4+
// x: 1,
5+
// y: 1,
6+
// },
7+
// isVisible: true,
8+
// draw: function () {
9+
// console.log("draw");
10+
// },
11+
// };
12+
13+
// circle.draw();
14+
// Factory functions
15+
16+
function createCircle(radius) {
17+
return {
18+
radius,
19+
draw() {
20+
console.log("draw");
21+
},
22+
// draw: function () {
23+
// console.log("draw");
24+
// },
25+
};
26+
}
27+
28+
const circle1 = createCircle(1);
29+
const circle2 = createCircle(2);
30+
console.log(circle1);
31+
console.log(circle2);

‎objects/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Objects</title>
7+
</head>
8+
<body>
9+
10+
11+
<script src="./app.js"></script>
12+
</body>
13+
</html>

‎thisKeyWord/assets/fortuner.jpg‎

12.7 KB
Loading

‎thisKeyWord/assets/mahindra.jpg‎

12.6 KB
Loading

‎thisKeyWord/assets/suv.jpg‎

15.1 KB
Loading

‎thisKeyWord/example.html‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Car Booking</title>
7+
<style>
8+
body {
9+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
10+
background-color: #fafafa;
11+
color: #333;
12+
margin: 20px;
13+
text-align: center;
14+
}
15+
16+
h1 {
17+
margin-bottom: 20px;
18+
color: #2c3e50;
19+
}
20+
21+
label {
22+
margin: 0 10px;
23+
font-weight: 500;
24+
}
25+
26+
input[type="text"],
27+
input[type="number"] {
28+
padding: 6px 10px;
29+
margin-left: 5px;
30+
border-radius: 5px;
31+
border: 1px solid #ccc;
32+
outline: none;
33+
transition: border 0.2s;
34+
}
35+
36+
input[type="text"]:focus,
37+
input[type="number"]:focus {
38+
border-color: #3498db;
39+
}
40+
41+
#cars {
42+
display: flex;
43+
justify-content: center;
44+
flex-wrap: wrap;
45+
margin-top: 20px;
46+
}
47+
48+
.car-card {
49+
display: flex;
50+
flex-direction: column;
51+
align-items: center;
52+
border: 2px solid #ddd;
53+
border-radius: 12px;
54+
padding: 15px;
55+
margin: 10px;
56+
width: 150px;
57+
cursor: pointer;
58+
background-color: #fff;
59+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
60+
transition: transform 0.2s, box-shadow 0.2s;
61+
}
62+
63+
.car-card:hover {
64+
transform: translateY(-5px);
65+
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
66+
border-color: #3498db;
67+
}
68+
69+
.car-card img {
70+
width: 100%;
71+
height: 120px;
72+
object-fit: cover;
73+
border-radius: 8px;
74+
margin-bottom: 10px;
75+
}
76+
77+
.car-card p {
78+
margin: 0;
79+
font-weight: 600;
80+
color: #2c3e50;
81+
}
82+
83+
#output {
84+
margin-top: 25px;
85+
font-weight: bold;
86+
font-size: 1.1rem;
87+
color: #e74c3c;
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
<h1>Car Booking</h1>
93+
94+
<label>Name: <input type="text" id="name" /></label>
95+
<label>Age: <input type="number" id="age" /></label>
96+
97+
<div id="cars">
98+
<div class="car-card">
99+
<img src="./assets/suv.jpg" />
100+
<p>SUV</p>
101+
</div>
102+
<div class="car-card">
103+
<img src="./assets/mahindra.jpg" />
104+
<p>Mahindra</p>
105+
</div>
106+
<div class="car-card">
107+
<img src="./assets/fortuner.jpg" />
108+
<p>Fortuner</p>
109+
</div>
110+
</div>
111+
112+
<div id="output"></div>
113+
114+
<script>
115+
function bookCar(carName) {
116+
const outputDiv = document.getElementById("output");
117+
outputDiv.textContent = `${this.name} ${this.age} booked ${carName}`;
118+
}
119+
120+
function getUserData() {
121+
let name = document.getElementById("name").value;
122+
let age = document.getElementById("age").value;
123+
return {
124+
name,
125+
age,
126+
};
127+
}
128+
129+
document.querySelectorAll(".car-card").forEach((card) => {
130+
card.addEventListener("click", () => {
131+
const user = getUserData();
132+
const carName = card.querySelector("p").textContent;
133+
// Using call
134+
bookCar.call(user, carName);
135+
136+
// Using apply
137+
// bookCar.apply(user, [carName]);
138+
139+
// Using bind
140+
// const boundBooking = bookCar.bind(user, carName);
141+
// boundBooking();
142+
});
143+
});
144+
</script>
145+
</body>
146+
</html>

‎thisKeyWord/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>This Keyword</title>
7+
</head>
8+
<body>
9+
<center>
10+
<h1>This Keyword</h1>
11+
</center>
12+
13+
<script>
14+
// let user = {
15+
// name: "Arun",
16+
// age: 22,
17+
// };
18+
19+
// function data(name, age) {
20+
// this.name = name;
21+
// this.age = age;
22+
// }
23+
24+
// obj1 = new data("Arun", 22);
25+
// obj2 = new data("Kumar", 23);
26+
27+
// console.log(obj1, obj2);
28+
29+
// call,apply,bind
30+
31+
let printDetails = function (location) {
32+
console.log(`${this.firstName} ${this.lastName} from ${location}`);
33+
};
34+
let driver1 = {
35+
firstName: "Arun",
36+
lastName: "Kumar",
37+
};
38+
// driver1.printDetails();
39+
let driver2 = {
40+
firstName: "Kiran",
41+
lastName: "Kumar",
42+
};
43+
let driver3 = {
44+
firstName: "Ravi",
45+
lastName: "Kumar",
46+
};
47+
// printDetails.apply(driver1, ["Hyderabad"]);
48+
49+
let printer = printDetails.bind(driver1, "Hyd");
50+
printer();
51+
</script>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)