Skip to content

Commit 9bd33a8

Browse files
tonycletustonycletus
committed
Added source code
1 parent bd757de commit 9bd33a8

File tree

10 files changed

+325
-0
lines changed

10 files changed

+325
-0
lines changed

‎(Episode 28) -Creating Objects using a constructor function/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Learn JavaScript</title>
6+
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body>
10+
11+
12+
13+
<script src="main.js"></script>
14+
</body>
15+
</html>

‎(Episode 28) -Creating Objects using a constructor function/main.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
function Employee(name, salary, bonus, loan) {
3+
this.name = name;
4+
this.salary = salary;
5+
this.bonus = bonus;
6+
this.loan = loan;
7+
8+
this.getTotalPay = function(totalpay){
9+
totalpay = this.salary + this.bonus;
10+
document.write("<li> The Total pay for " + this.name + " is $" + totalpay);
11+
}
12+
13+
this.afterLoan = function(totalpay) {
14+
totalpay = (this.salary + this.bonus) - this.loan;
15+
document.write("<li> The Tolal pay for " +this.name+ " after loan is $" + totalpay);
16+
}
17+
}
18+
19+
var john = new Employee("John Halt", 5000, 500.5);
20+
john.getTotalPay();
21+
22+
var jane = new Employee("Jane Smith", 4000, 400, 200);
23+
jane.getTotalPay();
24+
25+
jane.afterLoan();

‎(Episode 28) -Creating Objects using a constructor function/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
Powered by: Code To Create CTC
3+
Coder: Tony Cletus
4+
*/
5+
6+
/*Clear out the default margin, padding and border*/
7+
*{
8+
margin: 0;
9+
padding: 0;
10+
border: 0;
11+
}
12+
13+
/*Body Design*/
14+
15+
body{
16+
background-color: #004;
17+
font: 23px Tahoma;
18+
margin: 100px 200px;
19+
color: #fff;
20+
}
21+
22+
p{
23+
margin-bottom: 40px;
24+
margin-top: 50px;
25+
width: 100%;
26+
}
27+
28+
li {
29+
margin-bottom: 20px;
30+
width: 100%;
31+
}
32+
33+
/*button and input resizing*/
34+
button, input{
35+
padding: 10px;
36+
color: #000;
37+
font: 17px;
38+
border-radius: 10px;
39+
}
40+
41+
/*Button background changes over hover*/
42+
button:hover{
43+
background-color: #94ffa1;
44+
}

‎(Episode 29) - Creating Objects using Prototype & Dynamic Prototype Pattern/exercise.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
This is A Take Home Exercise that you can work on aside
3+
the examples used in the video tutorial.
4+
a. Study it and advance.
5+
b. Try to convert this code to Dynamic Prototype Pattern
6+
7+
Note: THIS EXAMPLE IS AN OBJECT ORIENTED APPROACH TO MIMICKING
8+
A PIZZA DELIVERY PROGRAM. (PROTOTYPE PATTERN IS USED HERE.)
9+
10+
*/
11+
12+
13+
var orderCounter = 0;
14+
15+
var pizza = function() {};
16+
17+
pizza.prototype.customer = "empty";
18+
pizza.prototype.topping = "empty";
19+
pizza.prototype.crustType = "empty";
20+
21+
pizza.prototype.takeOrder = function() {
22+
document.write("<p> <li>");
23+
document.write("Hello " + this.customer + ", Here is \
24+
your order of " + this.crustType + " topped\
25+
with " + this.topping);
26+
orderCounter = orderCounter + 1;
27+
};
28+
29+
var ann = new pizza();
30+
ann.customer = "Ann";
31+
ann.topping = "Thin";
32+
ann.crustType = "Pesto";
33+
ann.takeOrder();
34+
35+
var tony = new pizza();
36+
tony.customer = "Tony";
37+
tony.topping = "Crust";
38+
tony.crustType = "Pepperoni";
39+
tony.takeOrder();
40+
41+
var getSumOrder = function(itemCount) {
42+
document.write("<p> Total Sold = " + itemCount * 7.5);
43+
}
44+
45+
getSumOrder(orderCounter);

‎(Episode 29) - Creating Objects using Prototype & Dynamic Prototype Pattern/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Learn JavaScript</title>
6+
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body>
10+
11+
12+
13+
<script src="main.js"></script>
14+
</body>
15+
</html>

‎(Episode 29) - Creating Objects using Prototype & Dynamic Prototype Pattern/main.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
PROTOTYPE PATTERN
3+
------------------
4+
Helps to create a lightweight Object
5+
6+
Problem: 1. You cannot create properties and methods on one line.
7+
2. It Creates confusion when you have properties as an object create with many Objects.
8+
*/
9+
10+
function employeeProto () {}
11+
12+
employeeProto.prototype.name = "no name";
13+
employeeProto.prototype.salary = 0;
14+
employeeProto.prototype.bonus = 0;
15+
16+
employeeProto.prototype.getTotalPay = function(totalpay) {
17+
totalpay = this.salary + this.bonus;
18+
document.write("<li> The Total pay for " + this.name + " is $" + totalpay);
19+
}
20+
21+
var staff1 = new employeeProto();
22+
staff1.name = "John Halt";
23+
staff1.salary = 5000;
24+
staff1.bonus = 500.5;
25+
staff1.getTotalPay();
26+
27+
var staff2 = new employeeProto();
28+
staff2.name = "Jane Smith";
29+
staff2.salary = 4000;
30+
staff2.bonus = 400;
31+
staff2.getTotalPay();
32+
33+
//To check if property exist either in object or prototype space
34+
console.log('name' in staff1);
35+
//To check if property exist only in the object
36+
console.log(staff1.hasOwnProperty('name'));
37+
//Check the Specs of the Blue-print for our object
38+
console.dir(employeeProto);
39+
40+
41+
42+
/*
43+
DYNAMIC PROTOTYPE PATTERN
44+
-------------------------
45+
Helps to write more efficient, reusable and clean code.
46+
*/
47+
48+
function employeeDynamic (name, salary, bonus) {
49+
this.name = name;
50+
this.salary = salary;
51+
this.bonus = bonus;
52+
53+
if (this.getTotalPay !== 'function') {
54+
employeeDynamic.prototype.getTotalPay = function(totalpay) {
55+
totalpay = this.salary + this.bonus;
56+
document.write("<li> The Total pay for " + this.name + " is $" + totalpay);
57+
}
58+
}
59+
}
60+
61+
var staff1 = new employeeDynamic("Jane", 4000, 400.50);
62+
staff1.getTotalPay();
63+
64+
var staff2 = new employeeDynamic("John", 5000, 500.50);
65+
staff2.getTotalPay();

‎(Episode 29) - Creating Objects using Prototype & Dynamic Prototype Pattern/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
Powered by: Code To Create CTC
3+
Coder: Tony Cletus
4+
*/
5+
6+
/*Clear out the default margin, padding and border*/
7+
*{
8+
margin: 0;
9+
padding: 0;
10+
border: 0;
11+
}
12+
13+
/*Body Design*/
14+
15+
body{
16+
background-color: #004;
17+
font: 23px Tahoma;
18+
margin: 100px 200px;
19+
color: #fff;
20+
}
21+
22+
p{
23+
margin-bottom: 40px;
24+
margin-top: 50px;
25+
width: 100%;
26+
}
27+
28+
li {
29+
margin-bottom: 20px;
30+
width: 100%;
31+
}
32+
33+
/*button and input resizing*/
34+
button, input{
35+
padding: 10px;
36+
color: #000;
37+
font: 17px;
38+
border-radius: 10px;
39+
}
40+
41+
/*Button background changes over hover*/
42+
button:hover{
43+
background-color: #94ffa1;
44+
}

‎(Episode 30) - Standard buitl-in objects (Date Object)/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Learn JavaScript</title>
6+
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body>
10+
11+
12+
13+
<script src="main.js"></script>
14+
</body>
15+
</html>

‎(Episode 30) - Standard buitl-in objects (Date Object)/main.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var people = new Array("Tom", "Eddy", "Luther");
2+
console.log(people[1]);
3+
4+
//Date Object
5+
/*
6+
PROPERTIES: A YEAR, A MONTH, A DAY, HOUR, MINUTE, SECONDS, MILLLISECONDS
7+
METHODS: getfullyear(), getDay(), getTime(), getTime(), getHours(), getMinutes(), getSeconds()
8+
*/
9+
10+
11+
var d = new Date();
12+
13+
console.log(d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());

‎(Episode 30) - Standard buitl-in objects (Date Object)/style.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
Powered by: Code To Create CTC
3+
Coder: Tony Cletus
4+
*/
5+
6+
/*Clear out the default margin, padding and border*/
7+
*{
8+
margin: 0;
9+
padding: 0;
10+
border: 0;
11+
}
12+
13+
/*Body Design*/
14+
15+
body{
16+
background-color: #004;
17+
font: 23px Tahoma;
18+
margin: 100px 200px;
19+
color: #fff;
20+
}
21+
22+
p{
23+
margin-bottom: 40px;
24+
margin-top: 50px;
25+
width: 100%;
26+
}
27+
28+
li {
29+
margin-bottom: 20px;
30+
width: 100%;
31+
}
32+
33+
/*button and input resizing*/
34+
button, input{
35+
padding: 10px;
36+
color: #000;
37+
font: 17px;
38+
border-radius: 10px;
39+
}
40+
41+
/*Button background changes over hover*/
42+
button:hover{
43+
background-color: #94ffa1;
44+
}

0 commit comments

Comments
 (0)