Skip to content

Commit c88d96a

Browse files
vibhor376vibhor376
committedOct 4, 2021
Commit
1 parent 41c56a1 commit c88d96a

27 files changed

+1084
-57
lines changed
 

‎.vscode/settings.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"editor.wordWrap": "on",
3+
"editor.mouseWheelZoom": true
4+
}

‎ajax.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10+
11+
<title>Ajax Tutorial</title>
12+
</head>
13+
<body>
14+
<h1>Ajax</h1>
15+
<button type="button" class="btn btn-secondary" id="fetchBtn">Fetch Data</button>
16+
<div class="container">
17+
<h1>Employee List</h1>
18+
<button type="button" class="btn btn-primary" id="populateBtn">Populate</button>
19+
<ul id="list">
20+
21+
</ul>
22+
</div>
23+
<!-- Optional JavaScript -->
24+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
25+
<script src="js/ajax.js"></script>
26+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
27+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
28+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
29+
</body>
30+
</html>

‎fruits.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"fruits":[
3+
{"name":"Apple", "price":"65/kg"},
4+
{"name":"Banana", "price":"30/kg"},
5+
{"name":"Mango", "price":"90/kg"},
6+
{"name":"Watermelon", "price":"120/kg"},
7+
{"name":"Grapes", "price":"100/kg"},
8+
{"name":"Peaches", "price":"70/kg"}
9+
]
10+
}

‎index.html

+13
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 http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vibhor</title>
8+
</head>
9+
<body>
10+
<script src="js/tut-12.js"></script>
11+
12+
</body>
13+
</html>

‎js/ajax.js

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
//Ajax
2+
3+
let fetchBtn=document.getElementById('fetchBtn');
4+
fetchBtn.addEventListener('click',buttonHandler);
5+
6+
function buttonHandler() {
7+
console.log('You have clicked the fetchBtn');
8+
9+
// Instantiate the object
10+
let xhr = new XMLHttpRequest();
11+
12+
// Open the object
13+
// xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);//async value is true
14+
15+
16+
//Use this for post request
17+
xhr.open('POST','http://dummy.restapiexample.com/api/v1/create',true);
18+
xhr.getResponseHeader('Content-type','application/json');
19+
// xhr ready states
20+
// learn more about xhr ready states here - https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
21+
22+
xhr.onreadystatechange = function(){
23+
// console.log("xhr state is ", xhr.readyState);
24+
}
25+
//What to do on progress (optional)
26+
xhr.onprogress = function() {
27+
console.log('On progress');
28+
}
29+
30+
//What to do when response is ready
31+
xhr.onload = function(){
32+
if(this.status==200){//Http status code which means OK
33+
console.log(this.responseText);
34+
}else{
35+
console.log('Some eror occured');
36+
}
37+
}
38+
//You can refer this to know more about http status codes
39+
// https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
40+
41+
//send the data
42+
paramater = `{"name":"test34sad545","salary":"123","age":"23"}`;
43+
xhr.send(paramater);
44+
console.log('Done');//this statement is printed first because async value is true
45+
46+
}
47+
48+
let populateBtn= document.getElementById('populateBtn');
49+
populateBtn.addEventListener('click', populateHandler);
50+
51+
function populateHandler() {
52+
console.log('You have clicked the populateBtn');
53+
54+
// Instantiate the object
55+
let xhr = new XMLHttpRequest();
56+
57+
// Open the object
58+
xhr.open('GET', 'https://reqres.in/api/users?page=2', true);//async value is true
59+
60+
//What to do on progress (optional)
61+
xhr.onprogress = function() {
62+
console.log('On progress');
63+
}
64+
65+
//What to do when response is ready
66+
xhr.onload = function(){
67+
if(this.status==200){//Http status code which means OK
68+
let obj=JSON.parse(this.responseText);
69+
// console.log(obj);
70+
let list=document.getElementById('list');
71+
html="";
72+
obj=obj.data;
73+
console.log(obj);
74+
for (key in obj) {
75+
// console.log(key);
76+
html+=`<li> ${obj[key].first_name}</li>`;
77+
}
78+
list.innerHTML=html;
79+
// console.log(html);
80+
}else{
81+
console.log('Some eror occured');
82+
}
83+
}
84+
//send the data
85+
xhr.send();
86+
console.log('Done');//this statement is printed first because async value is true
87+
88+
}

‎js/tut-17.js

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
11
//More on JavaScript events
22

33
let btn=document.querySelector('input#btn');
4-
// console.log(btn);
5-
// btn.addEventListener('click',func1);
6-
// btn.addEventListener('dblclick',func2);
7-
// btn.addEventListener('mousedown',func3);
8-
// function func1(e){
9-
// console.log('Thanks for clicking the button',e);
10-
// e.preventDefault();
11-
// }
12-
// function func2(e){
13-
// console.log('Thanks for clicking the button twice',e);
14-
// e.preventDefault();
15-
// }
16-
// function func3(e){
17-
// console.log('Thanks it is a mousedown ',e);
18-
// e.preventDefault();
19-
// }
4+
console.log(btn);
5+
btn.addEventListener('click',func1);
6+
btn.addEventListener('dblclick',func2);
7+
btn.addEventListener('mousedown',func3);
8+
function func1(e){
9+
console.log('Thanks for clicking the button',e);
10+
e.preventDefault();
11+
}
12+
function func2(e){
13+
console.log('Thanks for clicking the button twice',e);
14+
e.preventDefault();
15+
}
16+
function func3(e){
17+
console.log('Thanks it is a mousedown ',e);
18+
e.preventDefault();
19+
}
2020

21-
// document.querySelector('.dummy').addEventListener('mouseenter',func4);
21+
document.querySelector('.dummy').addEventListener('mouseenter',func4);
2222

23-
// function func4(e){
24-
// console.log('You entered dummy');
25-
// }
26-
// document.querySelector('.dummy').addEventListener('mouseleave',func5);
23+
function func4(e){
24+
console.log('You entered dummy');
25+
}
26+
document.querySelector('.dummy').addEventListener('mouseleave',func5);
2727

28-
// function func5(e){
29-
// console.log('You exited dummy');
30-
// }
28+
function func5(e){
29+
console.log('You exited dummy');
30+
}
3131

32-
// document.querySelector('.container').addEventListener('mousemove',func6);
32+
document.querySelector('.container').addEventListener('mousemove',func6);
3333

34-
// function func6(e){
35-
// console.log(e.offsetX,e.offsetY);
36-
// console.log('You triggered mosue event');
37-
// document.body.style.backgroundColor=`rgb(${e.offsetX},${e.offsetY},101)`;
38-
// }
34+
function func6(e){
35+
console.log(e.offsetX,e.offsetY);
36+
console.log('You triggered mosue event');
37+
document.body.style.backgroundColor=`rgb(${e.offsetX},${e.offsetY},101)`;
38+
}
3939

4040
let dumb=document.querySelector('.dumb');
4141
dumb.children[1].addEventListener('click',func7);

‎js/tut-22.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
//Object Literal, Constructors and Object Oriented JavaScript
2+
3+
4+
let car = {
5+
name: 'BMX X5',
6+
topspeed: '200 kmph',
7+
run: function () {
8+
console.log('BMW is running on track')
9+
}
10+
}
11+
// console.log(car);
12+
13+
// We have already seen constructors like these:
14+
//new Date()
15+
16+
// Creating a constructor for cars
17+
function generalCar(givenName, givenSpeed) {
18+
this.name = givenName;
19+
this.topspeed = givenSpeed;
20+
this.run = function () {
21+
console.log(`${this.name} is running`)
22+
}
23+
this.analyze = function () {
24+
console.log(`This car is slower by ${250 - this.topspeed} Kmph than Mercedes.`)
25+
}
26+
}
27+
let car1 = new generalCar('BMW', 200);
28+
let car2 = new generalCar('Audi', 210);
29+
console.log(car1.run());
30+
console.log(car2.analyze());

‎js/tut-23.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
//Object Prototype
2+
3+
// Object literal : Object.prototype
4+
let obj={
5+
name: "vibhor",
6+
age: "19",
7+
address: "House No-376,Sector 11-D"
8+
}
9+
10+
function Obj(givenName) {
11+
this.name = givenName;
12+
}
13+
let obj2=new Obj('Vibhor');
14+
console.log(obj2);
15+
Obj.prototype.getName = function() {
16+
return this.name;
17+
}
18+
console.log(obj2.getName());//Vibhor
19+
Obj.prototype.setName=function (newName) {
20+
this.name=newName;
21+
}
22+
obj2.setName('Akshat');
23+
console.log(obj2.getName());//Akshat

‎js/tut-24.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
//Prototype Inheritance in JavaScript
2+
3+
const proto={
4+
slogan: function () {
5+
return 'Eat Code Sleep Repeat';
6+
},
7+
changeName: function (newName) {
8+
this.name= newName;
9+
}
10+
}
11+
//This creates vibhor object
12+
const vibhor=Object.create(proto);
13+
vibhor.role="Programmer";
14+
vibhor.name='Joy';
15+
vibhor.changeName('Joy');
16+
console.log(vibhor);
17+
18+
19+
// This also creates a vibhor object
20+
const vibhor1=Object.create(proto,{
21+
name:{value:"vibhor",writable:true},
22+
role:{value:"programmer"},
23+
});
24+
vibhor1.changeName('Vibhor');
25+
// console.log(vibhor1);
26+
27+
//Employee constructor
28+
function Employee(name, salary, experience) {
29+
this.name= name;
30+
this.salary=salary;
31+
this.experience=experience;
32+
}
33+
34+
//Slogan
35+
Employee.prototype.slogan = function () {
36+
return `this company is the best. Regards, ${this.name}`
37+
}
38+
// create and object from a constructor
39+
let Joy= new Employee("Joy",1000000000,0);
40+
// console.log(Joy.slogan());
41+
42+
function Programmer(name,salary, experience, language) {
43+
Employee.call(this, name ,salary, experience);
44+
};
45+
46+
// Inherit the prototype
47+
Programmer.prototype =Object.create(Employee.prototype);
48+
49+
//Manually set the constructor
50+
Programmer.prototype.consturctor = Programmer;
51+
52+
let akshat = new Programmer("Akshat", 1999999,0, "JavaScript");
53+
console.log(akshat);

‎js/tut-25.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// Classes and Inheritance
2+
3+
class Employee {
4+
constructor(givenName, givenExperience, givenDivision) {
5+
this.name = givenName;
6+
this.experience = givenExperience;
7+
this.division = givenDivision;
8+
}
9+
slogan() {
10+
return `I am ${this.name} and I am a proud employee of this company.`;
11+
}
12+
joiningYear() {
13+
return 2021 - this.experience;
14+
}
15+
static add(a, b) {
16+
return a + b;//Static is a method of class which does not use objects of class
17+
}
18+
}
19+
20+
let vibhor = new Employee("Vibhor", 1, "Technical");
21+
// console.log(vibhor.slogan());
22+
// console.log(vibhor.joiningYear());
23+
// console.log(Employee.add(4,5));
24+
25+
//Inheritance in Class
26+
class Programmer extends Employee {
27+
constructor(givenName, givenDivision, givenExperience, language, github) {
28+
super(givenName, givenExperience, givenDivision);//constructor of class from which this class is inherited
29+
this.language = language;
30+
this.github = github;
31+
}
32+
favoriteLanguage() {
33+
if (this.language == 'Python') {
34+
return 'Python';
35+
} else {
36+
return 'JavaScript';
37+
}
38+
}
39+
static multiply(a, b) {
40+
return a * b;
41+
}
42+
}
43+
44+
akshat = new Programmer("Akshat", 3, "Management", "JavaScript", "akshatcoder_12");
45+
console.log(akshat);
46+
console.log(akshat.language);
47+
console.log(akshat.github);

0 commit comments

Comments
 (0)
Please sign in to comment.