3. Workflow (shows the book's name but not the price)


#1



Sorry, if this is a double post but I could not find another article with the solution.

Exercise

Issue(s)

No error messages are shown, I pass the lesson but:

  • only the book's name is shown (I believe with the code below it should show the book's name and its price.)

Code

Excuse the notes, they help me remember/understand.

index.html

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

    <!-- Include the AngularJS library -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  </head>
  <!-- The 'ng-app' section below is called a directive it tells the 'myApp' module that is it going to live in the '<body>' section. This is basically called the application's scope. -->
  <body ng-app="myApp">
    <div class="header">
      <div class="container">
        <h1>Book End</h1>
      </div>
    </div>
    <!-- Below 'ng-controller' is another directive to define the controller scope. In other words, '$scope' properties in 'MainController' become available to work/show in <div class="main"> -->
    <div class="main" ng-controller="MainController">
      <div class="container">
	<!-- Within <div class="main"> '$scope.title' (a property in MainController) is accessed by '{{ title }}', this is called expression. Expression-used to display values on the page. -->
        <h1> {{ title }} </h1>
        <h2> {{ promo }} </h2>
        <p class="title"> {{ product.name }} </p>
        <p class="price"> {{ product.price }} </p>
      </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>

MainController.js

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = 'Some Books';
  $scope.promo = 'some have been read';
  $scope.product = {
    name: 'The Book of Trees',
    price: 19
    };
}]);

Objective

I want to know the problem(s) or mistake(s) and why if that's the case.

New coder trying to learn. Thanks!


#2

Solved. Problem with:

<div class="col-md-6"> 
  <div class="thumbnail">

after

<div class="footer">
  <div class="container">

#3

Wish you had not said that. Now we are all ham strung.


#4

Feel however the way you like.


#5

That was a joke... We're all at odds to know how much a learner already knows. The more they know, the more likely they will resent our perceived talking down to them. Nobody wishes to offend.


#6

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