9. ng-click 1

[cloudcoder75999]

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;
};

}]);
}

[factoradic]

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.

[kavpillai]

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

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

Book End

<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>

[kavpillai]

Also I checked the page. The code works and the number of likes is increasing.

[javasolver68317]

I've just got passed it. You don't need $ before plusOne.

[factoradic]

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

[kavpillai]

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:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

Book End

<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>

[factoradic]

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.

[kavpillai]

<!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>

[factoradic]

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>

[kavpillai]

Thanks!!
Now it works!!

[factoradic]

You're very welcome

[jerokun]

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;
  };
  
}]);

[factoradic]

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>

[system]

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