There are no error messages I just can’t go further. Tried different placement of code and spelling. I don’t see the problem. Please help!
app.controller(‘MainController’,[’$scope’,function($scope) {
$scope.title = “BookWorm”;
$scope.promo = “The Wonderful World of Books”;
$scope.products = [
{
name: ‘The Book of Trees’,
price: 19,
pubdate: new Date(‘2014’, ‘03’, ‘08’),
cover: ‘img/the-book-of-trees.jpg’,
likes: 0
},
{
name: ‘Program or be Programmed’,
price: 8,
pubdate: new Date(‘2013’, ‘08’, ‘01’),
cover: ‘img/program-or-be-programmed.jpg’,
likes: 0
},
{
name: ‘The Giver’,
price: 5,
pubdate: new Date(‘1993’, ‘08’, ‘09’),
cover: ‘http://vignette2.wikia.nocookie.net/thegiver/images/3/38/The_Giver.gif/revision/latest?cb=20110521235533 ’,
likes: 0
}
];
$scope.plusOne = function(index) {
$scope.products[index].likes += 1;
};
}]);
}
Your code looks correct. You can delete the last }
, everything is already closed.
Which checkpoint you can’t get passed? The last one? May I ask you to post your HTML
code? Use </>
icon to format your code.
Hi Factoradic,
I am also facing the same problem. I cant get past step 3 on ngclick I.
Here is my code.
app.controller(‘MainController’,[’$scope’, function($scope){
$scope.title=‘Top Sellers in kindle books’;
$scope.promo=“Discount of 20% on first buy”;
$scope.products=[
{
name: ‘The Book of Trees’,
price: 19,
pubdate: new Date(‘2014’, ‘03’, ‘08’),
cover: ‘img/the-book-of-trees.jpg’,
likes:0
},
{
name: ‘Program or be Programmed’,
price: 8,
pubdate: new Date(‘2013’, ‘08’, ‘01’),
cover: ‘img/program-or-be-programmed.jpg’ ,
likes:0
} ,
{
name: ‘Atlas Shrugged’,
price: 10,
pubdate: new Date(‘2013’, ‘08’, ‘01’),
cover: ‘img/program-or-be-programmed.jpg’ ,
likes:0
} ,
{
name: ‘Pallace of illusions’,
price: 5,
pubdate: new Date(‘2013’, ‘08’, ‘01’),
cover: ‘img/program-or-be-programmed.jpg’ ,
likes:0
}
];
$scope.$plusone= function(index) {
$scope.products[index].likes += 1;
};
}]);
HTML
<!doctype html>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<div ng-repeat ="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title"> {{product.name}}</p>
<p class="price"> {{product.price|currency}}</p>
<p class="date">{{product.pubdate|date}} </p>
<div class="rating">
<p class="likes" ng-click="plusone($index)">
{{product.likes}}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
Also I checked the page. The code works and the number of likes is increasing.
I’ve just got passed it. You don’t need $ before plusOne.
1 Like
Exactly just like @javasolver68317 said, name of the method is plusOne
, not $plusOne
and it’s clearly visible in the instructions:
Back in the controller after $scope.products
, attach a new property to $scope
named plusOne
. Set it equal to function. Type in the contents exactly as you see here:
function(index) {
$scope.products[index].likes += 1;
};
Let us know if your code works after this correction
After a I pasted the above issue I changed the code and removed and $ before plusone.
No It still does not.
Code looks like this now:
app.controller(‘MainController’,[’$scope’, function($scope){
$scope.title=‘Top Sellers in kindle books’;
$scope.promo=“Discount of 20% on first buy”;
$scope.products=[
{
name: ‘The Book of Trees’,
price: 19,
pubdate: new Date(‘2014’, ‘03’, ‘08’),
cover: ‘img/the-book-of-trees.jpg’,
likes:0
},
{
name: ‘Program or be Programmed’,
price: 8,
pubdate: new Date(‘2013’, ‘08’, ‘01’),
cover: ‘img/program-or-be-programmed.jpg’ ,
likes:0
} ,
{
name: ‘Atlas Shrugged’,
price: 10,
pubdate: new Date(‘2013’, ‘08’, ‘01’),
cover: ‘img/program-or-be-programmed.jpg’ ,
likes:0
} ,
{
name: ‘Pallace of illusions’,
price: 5,
pubdate: new Date(‘2013’, ‘08’, ‘01’),
cover: ‘img/program-or-be-programmed.jpg’ ,
likes:0
}
];
$scope.plusone= function(index) {
$scope.products[index].likes += 1;
};
}]);
HTML is like:
<!doctype html>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<div ng-repeat ="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title"> {{product.name}}</p>
<p class="price"> {{product.price|currency}}</p>
<p class="date">{{product.pubdate|date}} </p>
<div class="rating">
<p class="likes" ng-click="plusone($index)">
{{product.likes}}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
Please format your code, we are not able to see the HTML. You can do that by highlighting all of your code while editing / creating a post, and clicking the </>
button in the formatting bar above the text area.
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Book End</h1>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<div ng-repeat ="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title"> {{product.name}}</p>
<p class="price"> {{product.price|currency}}</p>
<p class="date">{{product.pubdate|date}} </p>
<div class="rating">
<p class="likes" ng-click="plusone($index)">
{{product.likes}}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
Ok, according to instructions this method should be called plusOne
(please note that O
is capitalized). So you have to change name of the method here:
$scope.plusone= function(index) {
$scope.products[index].likes += 1;
};
and here:
<p class="likes" ng-click="plusone($index)">
{{product.likes}}
</p>
jerokun
August 25, 2016, 2:38pm
#13
Dear you,
I do not seem to have made the same syntax mistakes as my predecessors so I must be at fault in some other way. Can anyone tell me where it is? PS: Sorry for the eye strain on how I organize my code.
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,400' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div class="header">
<div class="container">
<h1>Book End</h1>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
<h2>{{ promo }}</h2>
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title">{{ product.name | uppercase }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="date">{{ product.pubdate | date }}</p>
<div class ="rating">
<p class ="likes" ng-click="plusOne($index)">+{{ product.likes }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Jeroen is awesome';
$scope.promo = '50% off now';
$scope.products =
[
{
name: 'The Book of Trees',
price: 19,
pubdate: new Date('2014', '03', '08'),
cover: 'img/the-book-of-trees.jpg',
likes: 0
},
{
name: 'Program or be Programmed',
price: 8,
pubdate: new Date('2013', '08', '01'),
cover: 'img/program-or-be-programmed.jpg',
likes: 0
},
{
name: 'Dragonheart',
price: '9.99',
pubdate: new Date ('1988','06','02'),
cover: 'https://d1466nnw0ex81e.cloudfront.net/n_iv/600/653043.jpg',
likes: 0
},
{
name: 'Dragonheart',
price: '7.69',
pubdate: new Date ('2017','13','13'),
cover: 'https://d1466nnw0ex81e.cloudfront.net/n_iv/600/653043.jpg',
likes: 0
}
];
$scope.plusOne = function(index) {
$scope.products[index].likes += 1;
};
}]);
Your code is correct.
I am not sure what might be the reason for not passing, but I guess that SCT might not like space between class
and =
: Try without this extra space:
<p class="likes" ng-click="plusOne($index)">+{{ product.likes }}</p>
1 Like
system
closed
September 1, 2016, 6:51pm
#15
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.