Skip to content

Commit 316c4ae

Browse files
mcomimcomi
committed
Creando repositorio de batch 11 Devf FrontEnd Profesional
0 parents  commit 316c4ae

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2592
-0
lines changed

‎cart/app.js

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
(function (){
2+
3+
angular
4+
.module('myCart', [])
5+
.controller('cartCtrl', cartCtrl);
6+
7+
function cartCtrl () {
8+
var cart = this;
9+
10+
cart.collection = [
11+
{
12+
'img': 'http://placehold.it/250x250',
13+
'name': 'producto 1',
14+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
15+
'price': 299,
16+
'quantity': 0
17+
},
18+
{
19+
'img': 'http://placehold.it/250x250',
20+
'name': 'producto 2',
21+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
22+
'price': 299,
23+
'quantity': 0
24+
},
25+
{
26+
'img': 'http://placehold.it/250x250',
27+
'name': 'producto 3',
28+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
29+
'price': 299,
30+
'quantity': 0
31+
},
32+
{
33+
'img': 'http://placehold.it/250x250',
34+
'name': 'producto 4',
35+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
36+
'price': 299,
37+
'quantity': 0
38+
},
39+
{
40+
'img': 'http://placehold.it/250x250',
41+
'name': 'producto 5',
42+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
43+
'price': 299,
44+
'quantity': 0
45+
},
46+
{
47+
'img': 'http://placehold.it/250x250',
48+
'name': 'producto 6',
49+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
50+
'price': 299,
51+
'quantity': 0
52+
},
53+
{
54+
'img': 'http://placehold.it/250x250',
55+
'name': 'producto 7',
56+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
57+
'price': 299,
58+
'quantity': 0
59+
},
60+
{
61+
'img': 'http://placehold.it/250x250',
62+
'name': 'producto 8',
63+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
64+
'price': 299,
65+
'quantity': 0
66+
},
67+
{
68+
'img': 'http://placehold.it/250x250',
69+
'name': 'producto 9',
70+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
71+
'price': 299,
72+
'quantity': 0
73+
},
74+
{
75+
'img': 'http://placehold.it/250x250',
76+
'name': 'producto 10',
77+
'description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum eros sit amet pulvinar aliquet.',
78+
'price': 299,
79+
'quantity': 0
80+
}
81+
]
82+
}
83+
84+
})()

‎cart/index.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="myCart">
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
6+
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
8+
9+
<head>
10+
<title>Cart</title>
11+
</head>
12+
<body ng-controller="cartCtrl as cart">
13+
14+
<div class="container">
15+
<input ng-model="search.name">
16+
17+
<!-- <div class="row">
18+
<div class="col md6">
19+
<card></card>
20+
</div>
21+
<div class="col md6">
22+
<card></card>
23+
</div>
24+
</div> -->
25+
</div>
26+
<div class="container">
27+
<div class="row">
28+
<div class="col m3" ng-repeat="c in cart.collection | filter:search | orderBy: 'id'">
29+
<div class="card">
30+
<div class="card-image">
31+
<img ng-src="{{c.img}}" alt="">
32+
<span class="card-title">{{ c.name }}</span>
33+
</div>
34+
<div class="card-content">
35+
<h4>{{ c.price | currency }}</h4>
36+
</div>
37+
<div class="card-action">
38+
<p>{{ c.description }}</p>
39+
<button class="btn-large waves-effect waves-light red"><i class="material-icons">shopping_cart</i> Add to cart</button>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
47+
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
48+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
49+
<script src="app.js"></script>
50+
</body>
51+
</html>

‎exe1/app.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
(function(){
2+
'use strict';
3+
4+
var hello = {
5+
templateUrl: './partials/hello.html',
6+
controller: helloCtrl
7+
};
8+
9+
angular
10+
.module('myApp',[])
11+
.component('hello', hello)
12+
.controller('firstCtrl', firstCtrl);
13+
14+
function firstCtrl () {
15+
var first = this;
16+
17+
first.name = 'Manuel';
18+
first.change = change;
19+
20+
function change () {
21+
first.name = "Comi";
22+
}
23+
}
24+
25+
function helloCtrl () {
26+
var hello = this;
27+
hello.saludo = "Controlador en componente"
28+
}
29+
30+
31+
})();

‎exe1/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="myApp">
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
6+
<head>
7+
<title>Exe1</title>
8+
</head>
9+
<body>
10+
11+
<hello></hello>
12+
13+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
14+
<script src="app.js"></script>
15+
</body>
16+
</html>

‎exe1/input.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
6+
<head>
7+
<title>Exe1</title>
8+
</head>
9+
<body>
10+
<input id="c">
11+
<p id="p"></p>
12+
<script type="text/javascript">
13+
var input = document.getElementById('c');
14+
var p = document.getElementById('p');
15+
input.addEventListener("click", function(){
16+
p.value = input.value;
17+
});
18+
</script>
19+
</body>
20+
</html>

‎exe1/partials/hello.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div ng-controller="firstCtrl as first">
2+
<h2>{{first.name}}</h2>
3+
<button ng-click="first.change()">Change</button>
4+
Lorem ipsum
5+
<h3>{{$ctrl.saludo}}</h3>
6+
</div>

‎exe2/app.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
(function () {
2+
'use strict';
3+
var card = {
4+
templateUrl : './partials/card.html',
5+
controller : firstCtrl
6+
}
7+
8+
angular
9+
.module('ejercicio', [])
10+
.component('card', card)
11+
12+
function firstCtrl () {
13+
var texto = this;
14+
}
15+
16+
})();

‎exe2/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="ejercicio">
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
6+
<!--Import Google Icon Font-->
7+
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
8+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
9+
<head>
10+
<title>Ejercicio 2</title>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="row">
15+
<div class="col md6">
16+
<card></card>
17+
</div>
18+
<div class="col md6">
19+
<card></card>
20+
</div>
21+
</div>
22+
23+
</div>
24+
25+
26+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
27+
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
28+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
29+
<script src="app.js"></script>
30+
</body>
31+
</html>

‎exe2/partials/card.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="card">
2+
<div class="card-image waves-effect waves-block waves-light">
3+
<img class="activator" src="http://materializecss.com/images/office.jpg">
4+
</div>
5+
<div class="card-content">
6+
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
7+
<p><a href="#">This is a link</a></p>
8+
</div>
9+
<div class="card-reveal">
10+
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
11+
<p>Here is some more information about this product that is only revealed once clicked on.</p>
12+
</div>
13+
</div>

‎marvel/app.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
(function () {
2+
'use strict';
3+
4+
angular
5+
.module('marvel',['ngResource'])
6+
7+
8+
})()

‎marvel/component/hero.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="container">
2+
<div class="row">
3+
<div class="col s3 m3 l3" ng-repeat="hero in $ctrl.char">
4+
<div class="card">
5+
<div class="card-image">
6+
<img ng-src="{{hero.thumbnail.path+'.'+hero.thumbnail.extension}}" alt="">
7+
</div>
8+
<div class="card-action">
9+
<p>{{hero.name}}</p>
10+
</div>
11+
</div>
12+
</div>
13+
</div>
14+
</div>

‎marvel/component/marvel.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
( function () {
2+
'use strict';
3+
4+
var hero = {
5+
templateUrl: "./component/hero.html",
6+
controller: marvelCtrl
7+
}
8+
9+
angular
10+
.module('marvel')
11+
.component('hero', hero);
12+
13+
marvelCtrl.$inject = ['apiMarvel'];
14+
15+
function marvelCtrl (apiMarvel) {
16+
var hero = this;
17+
18+
hero.char = null;
19+
20+
hero.dataMarvel = apiMarvel.get()
21+
.$promise.then(function (response) {
22+
hero.char = response.data.results;
23+
})
24+
}
25+
26+
})()

‎marvel/factory/factory.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
(function () {
2+
'use strict';
3+
4+
angular
5+
.module('marvel')
6+
.factory('apiMarvel', apiMarvel);
7+
8+
apiMarvel.$inject = ['$resource'];
9+
function apiMarvel ($resource) {
10+
var apikey = 'd1036518906dbf1807b4d73b2777a3c4';
11+
var hash = '8bc7fd76f6e096af608c67fb1a540604';
12+
return $resource('http://gateway.marvel.com/v1/public/characters?ts=1&apikey='+ apikey +'&hash='+ hash);
13+
}
14+
})();

‎marvel/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="marvel">
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
6+
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
8+
9+
<head>
10+
<title>Marvel</title>
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
<hero></hero>
16+
</div>
17+
18+
19+
<script src="lib/angular.min.js"></script>
20+
<script src="lib/angular-resource.min.js"></script>
21+
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
23+
<script src="app.js"></script>
24+
<script src="factory/factory.js"></script>
25+
<script src="component/marvel.js"></script>
26+
</body>
27+
</html>

‎marvel/lib/angular-resource.min.js

+15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)