Your first app 9/11. The code looks correct and runs but not working


#1

https://www.codecademy.com/courses/learn-angularjs/lessons/your-first-app/exercises/your-first-app-ng-click-i?user_id=52786d3280ff33046a00a131

The code passes all error messages and runs but when I click on the plus it noes not increment. any ideas?


#2

can you please share your MainController.js.


#3

here is a copy of the maincontroller.js

app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'This Month\'s Bestsellers';
$scope.promo = 'The most popular books this month.';
$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: 'Program or be Program',
price: 28,
pubdate: new Date('2011', '08', '01'),
cover: 'img/program-or-be-programmed.jpg',
likes: 0
},
{
name: 'to be Programmed',
price: 93,
pubdate: new Date('1913', '08', '01'),
cover: 'img/program-or-be-programmed.jpg',
likes: 0
}
];
$scope.plusOne=function(index) {
$scope.products[index].likes += 1;
};

}]);


#4

try this

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = 'This Month\'s Bestsellers'; 
  $scope.promo = 'The most popular books this month.';
  $scope.products = [
  	{ 
    	name: 'The Book of Trees', 
    	price: 19, 
    	pubdate: new Date('2014', '03', '08'), 
    	cover: 'img/the-book-of-trees.jpg',
    	likes: 0,
    	dislikes: 0
  	}, 
  	{ 
    	name: 'Program or be Programmed', 
    	price: 8, 
    	pubdate: new Date('2013', '08', '01'), 
    	cover: 'img/program-or-be-programmed.jpg',
    	likes: 0,
    	dislikes: 0
  	}, 
  	{ 
    	name: 'Harry Potter & The Prisoner of Azkaban', 
    	price: 11.99, 
    	pubdate: new Date('1999', '07', '08'), 
    	cover: 'http://upload.wikimedia.org/wikipedia/en/b/b4/Harry_Potter_and_the_Prisoner_of_Azkaban_(US_cover).jpg',
    	likes: 0,
    	dislikes: 0 
  	}, 
  	{ 
    	name: 'Ready Player One', 
    	price: 7.99, 
    	pubdate: new Date('2011', '08', '16'), 
    	cover: 'http://upload.wikimedia.org/wikipedia/en/a/a4/Ready_Player_One_cover.jpg',
    	likes: 0,
    	dislikes: 0 
  	}
  ];
  $scope.plusOne = function(index) { 
  	$scope.products[index].likes += 1; 
	};
	$scope.minusOne = function(index) { 
  	$scope.products[index].dislikes += 1; 
	};
}]);

#5

Getting the same issue, @fndiaye2016 tried your code but still same


#6

Okay use this html code with my js and see.

<!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>
				    	<p class="dislikes" ng-click="minusOne($index)">- {{ product.dislikes }} </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>

If it does not solve your problem can you please specify the error that you are having.


#7

thanks, when fndiaye2016 it worked now


#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.