[9/11, 5:33 PM] ‪+91 82668 33460‬: ----------------------------------display all products--------------------------------------

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
//add your $scope variable products here with below provided product details.
$scope.products = [{name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0},
{name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0},
{name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0}
];
});

/*
-----------------
Product Details
-----------------
product1
{name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0},

product2
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0

product3
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0

*/

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

//add to cart

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
$scope.quantity=0;
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0
},
]
$scope.addToCart = function(){
alert("Product added to Cart successfully");
return "success";
}
});

-------------------------------------------------------------------------------------------------------------------------------

internals

------------------------------------------------------------------------------

sqaure root and cube root using services

// Add your code here!

var myApp = angular.module('myApp', []);

// define MathService here
myApp.service('MathService', function() {
//define all the arithmetic functions here like add, subtract. multiply and divide here
this.multiply = function(num1,num2){
return num1*num2;
}
});

// define CalculatorService here which uses Math service
myApp.service('CalculatorService', function(MathService) {
// consume MathService multiply function for getting square and cube of the parameter
this.square = function(a) {
return MathService.multiply(a,a);
};
this.cube = function(a) {
return MathService.multiply(a,MathService.multiply(a,a));
};

});

// define CalculatorController here
myApp.controller('CalculatorController', function($scope, CalculatorService) {
$scope.answer = 0;
$scope.num=0;
// consume CalculatorService- square and cube function for getting square of the input
// set the result in scope variable answer
$scope.Square = function() {
$scope.answer = CalculatorService.square($scope.num);
}

$scope.Cube = function() {
$scope.answer= CalculatorService.cube($scope.num);
}
});

--------------------------------------------------------------------------

cube with factory

var myApp = angular.module('myApp', []);

myApp.factory('MathFactory', function() {
//define all the arithmetic functions here like add, subtract. multiply and divide here
var test={};
test.multiply = function(num1,num2){
return num1*num2;
}
return test;
});

// define CalculatorService here which uses Math service
myApp.factory('CalculatorFactory', function(MathFactory) {
// consume MathService multiply function for getting square and cube of the parameter
var res={};
res.square = function(a) {
return MathFactory.multiply(a,a);
};
res.cube = function(a) {
return MathFactory.multiply(a,MathFactory.multiply(a,a));
};
return res;
});

// define CalculatorController here
myApp.controller('CalculatorController', function($scope, CalculatorFactory) {
$scope.answer = 0;
$scope.num=0;
// consume CalculatorService- square and cube function for getting square of the input
// set the result in scope variable answer
$scope.Square = function() {
$scope.answer = CalculatorFactory.square($scope.num);
};

$scope.Cube = function() {
$scope.answer= CalculatorFactory.cube($scope.num);
};
});

---------------------------------------------

try it out with constants

var myApp = angular.module('myApp', []);
var res={};
res.cmp_url='TCS';
res.cmp_md='tcs';
res.cmp1_url='TCS';
res.cmp1_md='tcs';
res.cmp2_url='TCS';
res.cmp2_md='tcs';

myApp.constant('app_api',res);
// define CalculatorController here
myApp.controller('mainCtrl', function($scope,app_api) {
console.log(app_api);
$scope.app_api = app_api;
});

--------------------------------------------------------------------

scope and rootScope

// Write your code here.
var myApp = angular.module('myApp', []);

myApp.controller('RController', function($scope,$rootScope){
$scope.color = 'Red';$rootScope.color = 'White';
});

myApp.controller('GController', function($scope,$rootScope){
$scope.color = 'Blue';$rootScope.color = 'White';
});

myApp.controller('BController', function($scope,$rootScope){
$rootScope.color = 'White';
$scope.color='';
});

jQuery

_------------------------------------------------------------------------

EVENT HANDLING

function login() {
var user = $("#username").val();
var pass = $("#password").val();
if(user == "admin" && pass == "password"){
alert("You are a valid user");
}else{
alert("You are not a valid user")
}
};

---------------------------------------------------------------------------

Addition of number

function add() {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
var res = parseInt(num1)+parseInt(num2)
console.log(num1+" + "+num2+" = "+res);
$("#total").val(res);
};

------------------------------------------------------

DOM manipulation

function login() {
var user = $("#username").val();
var pass = $("#password").val();
if(user == "admin" && pass == "password"){
doRedirect("home.html");
}else{
alert("You are not a valid user")
}
};

------------------------------------------------------------------------

Animations

function login() {
var user = $("#username").val();
var pass = $("#password").val();
if(user == "admin" && pass == "password"){
doRedirect("home.html");
}else{
alert("You are not a valid user")
}
};

function hover1(){

$("item1-des").slideToggle();
};

function hover2(){
$("item2-des").slideToggle();

};

function big(){
$("#buy").animate({height:"300px",width : "300px"});

};

function doRedirect(href) {

window.location = href;

};

-------------------------------------------------------

Ajax call

function login() {
var user = $("#username").val();
var pass = $("#password").val();
if(user == "admin" && pass == "password"){
doRedirect("home.html");
}else{
alert("You are not a valid user")
}
};

function hover1(){

$("#item1-des").slideToggle();
};

function hover2(){
$("#item2-des").slideToggle();

};

function big(){
$("#buy").animate({height:"300px",width : "300px"});

};

function load_des() {
$("#item1-des").load("https://codepen.io/anon/pen/KyRbKM.html");

};

function doRedirect(href) {

window.location = href;

};

_------_----------------------------------------------------------------------------------

JavaScript

Generate random characters

var element= document.getElementById('num').value;
var val = Math.random().toString(36).replace('0.','').substr(0,element);
document.getElementById('result').innerHTML=val;
console.log(val);
//Type your code here.
return val;

---------------------------------------------

Fibonacci Series

function fibonacciSequence(input) {

var v1=0,v2=1,v3;
var res=[0,1];

for(var i = 3;i<=input+1;i++){

v3=v1+v2;

v1=v2;

v2=v3;
res.push(v3);
}

return res;
}

-------------------------

Dropdown

function runList(){
//Type your code here.
var select = document.getElementById('list');
var option = document.createElement('option');

option.innerHTML="japan";
option.value="japan";

select.appendChild(option);
}

------------------------------------------------------------------------------------

to read user data from from

function myFunction() {
// Type your code here.
var name = document.getElementById("myname").value;
var phone = document.getElementById("myphone").value;
var country = document.getElementById("mycontry").value;
var mail = document.getElementById("mymail").value;
var res=name+","+phone+","+country+","+mail;
alert(res);
return res;//Enter your return statement here
}

----------------------------------------------------

simple calculator

function update(value) {
//Type the code here.
var out = document.getElementById("screen").value;
out = out+""+value;
document.getElementById("screen").value = out;
}

function result() {
//Type the code here.
var out = document.getElementById("screen").value;
out = eval(out);
document.getElementById("screen").value = out;
}

function reset() {
//Type the code here.
document.getElementById("screen").value = "";
}
[9/14, 8:45 AM] ‪+91 82668 33460‬: angular diectives

-----------------------------------------------------------------

get user detail $http

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
//Define scope variable users here
$scope.users;
//Use http service that consumes https://jsonplaceholder.typicode.com/users
$scope.users=$http.get('https://jsonplaceholder.typicode.com/users');
});

---------------------------------------------------------------------------------------

form validations

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
$scope.dtsinCart=0;
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0
},
];
$scope.addToCart=function(){
alert('Product Added to Cart successfully');
return "success";
}
//add your code for registerUser which return successful message
$scope.registerUser = function(){
alert('Registration Successful');
return "successful";
}

});

-----------------------------------------------------

display product image

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.quantity=0;
//Add image property to the products and the image should have the url of images
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image:'img/cycle.jpg',
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image:'img/cycle.jpg',
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image:'img/cycle.jpg',
quantity:0
},
]
$scope.addToCart=function(){
alert('Product Added to Cart successfully')
return "success";

}
});

-----------------------------------------------------------------------------------------

hello with angular js

var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl',function($scope){
$scope.fullName = "Harry Potter";
});

------------------------------------------------------------------

sort and search product

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
$scope.priceFilter='';
$scope.dtsinCart=0;
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: 2500,
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: 500,
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: 1000,
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0
}

];
$scope.addToCart=function(){
alert('Product Added to Cart successfully')
return "success";
}
//create scope variable options that has 'Low Price to High' and 'High Price to Low' values.
$scope.options = ['Low Price to High' , 'High Price to Low'];

//add selectPriceFilter function that assign scope priceFilter to true / false based on condition
$scope.selectPriceFilter = function(){};

});

-----------------------------------------------------------------------------------------------------------------------------

even or oddd

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//add your code here
$scope.number1=9;
$scope.number2=9;
$scope.odd_even = function(number){
return number%2==0?'even':'odd';
};
});

------------------------------------------------------

hello name

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//write your code here
$scope.fullName='anuj';
});

-------------------------------------------------------------------

firstname lastname

Hello {{first_name+" "+last_name}} !

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//write your code here
$scope.first_name ='mean';
$scope.last_name ='mom';
});

------------------------------------------------------------------------

display all products

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
//add your $scope variable products here with below provided product details.
$scope.products = [{name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0},
{name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0},
{name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0}
];
});

/*
-----------------
Product Details
-----------------
product1
{name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0},

product2
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0

product3
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0

*/

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

//add to cart

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var imgPath = "img/";
$scope.quantity=0;
$scope.products = [
{
name : "Happy Cycle",
discount:"20%",
price: "2500",
brand : "Wheels",
addedToCart:false,
image : imgPath + "cycle.jpg",
quantity:0
},
{
name : "Kids Shoes",
discount:"10%",
price: "1460",
brand : "Feel Good",
addedToCart:false,
image : imgPath + "shoes.jpg",
quantity:0
},
{
name : "Polo Baby Care Dress",
discount:"20%",
price: "2500",
brand : "Super Hero",
addedToCart:false,
image : imgPath + "shirt.jpg",
quantity:0
},
];
$scope.addToCart = function(){
alert("Product added to Cart successfully");
return "success";
}
});

-------------------------------------------------------------------------------------------------------------------------------

internals

------------------------------------------------------------------------------

sqaure root and cube root using services

// Add your code here!

var myApp = angular.module('myApp', []);

// define MathService here
myApp.service('MathService', function() {
//define all the arithmetic functions here like add, subtract. multiply and divide here
this.multiply = function(num1,num2){
return num1*num2;
}
});

// define CalculatorService here which uses Math service
myApp.service('CalculatorService', function(MathService) {
// consume MathService multiply function for getting square and cube of the parameter
this.square = function(a) {
return MathService.multiply(a,a);
};
this.cube = function(a) {
return MathService.multiply(a,MathService.multiply(a,a));
};

});

// define CalculatorController here
myApp.controller('CalculatorController', function($scope, CalculatorService) {
$scope.answer = 0;
$scope.num=0;
// consume CalculatorService- square and cube function for getting square of the input
// set the result in scope variable answer
$scope.Square = function() {
$scope.answer = CalculatorService.square($scope.num);
}

$scope.Cube = function() {
$scope.answer= CalculatorService.cube($scope.num);
}
});

--------------------------------------------------------------------------

cube with factory

var myApp = angular.module('myApp', []);

myApp.factory('MathFactory', function() {
//define all the arithmetic functions here like add, subtract. multiply and divide here
var test={};
test.multiply = function(num1,num2){
return num1*num2;
}
return test;
});

// define CalculatorService here which uses Math service
myApp.factory('CalculatorFactory', function(MathFactory) {
// consume MathService multiply function for getting square and cube of the parameter
var res={};
res.square = function(a) {
return MathFactory.multiply(a,a);
};
res.cube = function(a) {
return MathFactory.multiply(a,MathFactory.multiply(a,a));
};
return res;
});

// define CalculatorController here
myApp.controller('CalculatorController', function($scope, CalculatorFactory) {
$scope.answer = 0;
$scope.num=0;
// consume CalculatorService- square and cube function for getting square of the input
// set the result in scope variable answer
$scope.Square = function() {
$scope.answer = CalculatorFactory.square($scope.num);
};

$scope.Cube = function() {
$scope.answer= CalculatorFactory.cube($scope.num);
};
});

---------------------------------------------

try it out with constants

var myApp = angular.module('myApp', []);
var res={};
res.cmp_url='';
res.cmp_md='';
res.cmp1_url='';
res.cmp1_md='';
res.cmp2_url='';
res.cmp2_md='';

myApp.constant('app_api',res);
// define CalculatorController here
myApp.controller('myCtrl', function($scope,app_api) {
console.log(app_api);
$scope.app_api = app_api;
$scope.cmp_name='';
});

--------------------------------------------------------------------

watch

// write your code here
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl',function($scope){
$scope.fullName = "Harry Potter";
});

--------------------------------------------------------------------

scope and rootScope

// Write your code here.
var myApp = angular.module('myApp', []);

myApp.controller('RController', function($scope,$rootScope){
$scope.color = 'Red';$rootScope.color = 'White';
});

myApp.controller('GController', function($scope,$rootScope){
$scope.color = 'Blue';$rootScope.color = 'White';
});

myApp.controller('BController', function($scope,$rootScope){
$rootScope.color = 'White';
$scope.color='';
});

jQuery

_------------------------------------------------------------------------

EVENT HANDLING

function login() {
var user = $("#username").val();
var pass = $("#password").val();
if(user == "admin" && pass == "password"){
alert("You are a valid user");
}else{
alert("You are not a valid user")
}
};

---------------------------------------------------------------------------

Addition of number

function add() {
var num1 = $("#num1").val();
var num2 = $("#num2").val();
var res = parseInt(num1)+parseInt(num2)
console.log(num1+" + "+num2+" = "+res);
$("#total").val(res);
};

------------------------------------------------------

DOM manipulation

function login() {
var user = $("#username").val();
var pass = $("#password").val();
if(user == "admin" && pass == "password"){
doRedirect("home.html");
}else{
alert("You are not a valid user")
}
};

------------------------------------------------------------------------

Animations

function login() {
var user = $("#username").val();
var pass = $("#password").val();
if(user == "admin" && pass == "password"){
doRedirect("home.html");
}else{
alert("You are not a valid user")
}
};

function hover1(){

$("item1-des").slideToggle();
};

function hover2(){
$("item2-des").slideToggle();

};

function big(){
$("#buy").animate({height:"300px",width : "300px"});

};

function doRedirect(href) {

window.location = href;

};

-------------------------------------------------------

Ajax call

function login() {
var user = $("#username").val();
var pass = $("#password").val();
if(user == "admin" && pass == "password"){
doRedirect("home.html");
}else{
alert("You are not a valid user")
}
};

function hover1(){

$("#item1-des").slideToggle();
};

function hover2(){
$("#item2-des").slideToggle();

};

function big(){
$("#buy").animate({height:"300px",width : "300px"});

};

function load_des() {
$("#item1-des").load("https://codepen.io/anon/pen/KyRbKM.html");

};

function doRedirect(href) {

window.location = href;

};

_------_----------------------------------------------------------------------------------

JavaScript

Generate random characters

var element= document.getElementById('num').value;
var val = Math.random().toString(36).replace('0.','').substr(0,element);
document.getElementById('result').innerHTML=val;
console.log(val);
//Type your code here.
return val;

---------------------------------------------

Fibonacci Series

function fibonacciSequence(input) {

var v1=0,v2=1,v3;
var res=[0,1];

for(var i = 3;i<=input+1;i++){

v3=v1+v2;

v1=v2;

v2=v3;
res.push(v3);
}

return res;
}

-------------------------

Dropdown

function runList(){
//Type your code here.
var select = document.getElementById('list');
var option = document.createElement('option');

option.innerHTML="japan";
option.value="japan";

select.appendChild(option);
}

------------------------------------------------------------------------------------

to read user data from from

function myFunction() {
// Type your code here.
var name = document.getElementById("myname").value;
var phone = document.getElementById("myphone").value;
var country = document.getElementById("mycontry").value;
var mail = document.getElementById("mymail").value;
var res=name+","+phone+","+country+","+mail;
alert(res);
return res;//Enter your return statement here
}

----------------------------------------------------

simple calculator

function update(value) {
//Type the code here.
var out = document.getElementById("screen").value;
out = out+""+value;
document.getElementById("screen").value = out;
}

function result() {
//Type the code here.
var out = document.getElementById("screen").value;
out = eval(out);
document.getElementById("screen").value = out;
}

function reset() {
//Type the code here.
document.getElementById("screen").value = "";
}