Exercise 5 Filters II

Get Help Angular.js
#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

Alright got a problem yet again. Not sure what I did wrong on this because I followed the same format as before and it worked on everything but this. I think I formatted something incorrectly because of the way it looks at the end of line “one”. I don’t like the way it looks because so far I have been adding everything to line “two” and it now tells me on this exercise that I have to put all of the closers on the first part. What exactly am I doing wrong and how do I fix it? HTML part is absolutely correct.

tl;dr: I screwed up and I don’t know where. Halp.
<Below this line, add a link to the EXACT exercise that you are stuck at.>
MainController.js

https://www.codecademy.com/en/courses/learn-angularjs/lessons/your-first-app/exercises/your-first-app-filters-ii?action=lesson_resume

<In what way does your code behave incorrectly? Include ALL error messages.>

app.controller('MainController', ['$scope', function($scope) {
  $scope.title = 'Top Sellers In Cacti'; 
  {
    $scope.promo = 'BOGO Moon Cacti'; 
    {
      $scope.product = { 
        name: 'The Book of Trees', 
        price: 19, 
        pubdate: new Date('2014', '03', '08')
      };
    }
  }
}
]);
#2

I edited your post so the brackets would be visible.

Remove the brace between .title and .promo, as well as the one between .promo and .product. Take out two closing braces after the product object.

#3

I did as you said and I still am getting an error asking if I displayed the pubdate. I know the HTML is correct so long as it is supposed to follow the same format as the other ones.

app.controller('MainController', ['$scope', function($scope) {$scope.title = 'Top Sellers In Cacti'; $scope.promo = 'BOGO Moon Cacti'; $scope.product = { name: 'The Book of Trees', price: 19, pubdate: new Date('2014', '03', '08')};
}]);

Also can you explain how to make it less ugly looking like you did in my post above? Does it still work like it should? And in that regard is it like HTML where you can tab over as much as you want and skip as many lines as you want and it will still work correctly?

#4 
app.controller('MainController', ['$scope', function($scope) {
  $scope.title = 'Top Sellers In Cacti';
  	 
    	$scope.promo = 'BOGO Moon Cacti'; 
      	
      		$scope.product = { 
            name: 'The Book of Trees', 
            price: 19, 
            pubdate: new Date('2014', '03', '08')};
}]);

that is what I have now.

#5

Your JavaScript code now seems correct.

HTML part is absolutely correct.

Please post your HTML code.

#6

What do you think might be the issue? Just in case I’m wrong about my html being correct I’ll let you handle it.

<!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 class="col-md-6">
          <div class="thumbnail">
            <img src="img/the-book-of-trees.jpg">
            <p class="title">{{ product.name }}</p>
            <p class="price">{{ product.price | currency }}</p>
            <p class="date">{{ product.pubdate }}</p>
          </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>
#7

Do the instructions ask for a date filter on the pubdate?

#8

After restarting this exercise I was able to get first two checkpoints marked using your code.

Please, restart the exercise, this is probably some caching problem. Click Get Help in the right, lower corner and select I want to restart this exercise.

#9

The third exercise asks to pipe over something. I can’t make it out, whatever the problem is I don’t know. Guess it’s just stupid

#10

I thought that you have a problem with the 1 or the 2 checkpoint.

The third part of instructions asks you to use date filter on the pubdate. You have to follow the same syntax you have used to apply currency filter to the product.price here:

{{ product.price | currency }}
#11

Format the product’s pubdate by piping it to the date filter.

See how price is piped to a currency filter? Do the same with the pubdate:

1 Like
#12

I wasn’t on that part yet, I thought you were asking about that. I know how to do that. Guess I was confused by your question.

#13

Please, restart the exercise, this is probably some caching problem. Click Get Help in the right, lower corner and select I want to restart this exercise.

#14

Actually I figured it out. I just switched browsers. I ended up using Firefox for this one on my mac. I think it was just stupid.

1 Like
#15

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