I'm having a serious issue with an Angular lesson in Codecademy. I'm not sure if there is a bug in the program running Codecademy or if there is a mistake in my code. I should be seeing this H1 heading, This Month's Bestsellers in addition to all the images of the books. However, instead I'm seeing this result: {{title}} along with this message: **"Oops! The test returned an error. Maybe you have a syntax error, or a typo. See full error. Why am I seeing {{title}}, which is html code, being displayed on the screen? I can't seem to find out why!
This is the html:
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='http://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>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Available for iPhone and Android.</h2>
<img src="http://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="120px" />
<img src="http://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>
This is the JavaScript (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'
},
{
name: 'Program or be Programmed',
price: 8,
pubdate: new Date('2013', '08', '01'),
cover: 'img/program-or-be-programmed.jpg'
},
**{
name: 'One Simple Idea',
price: 22,
pubdate: new Date('2011', '02' '18'),
cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
},
{
name: 'Sell Your Idea with or without a Patent',
price: 22,
pubdate: new Date('2015', '03','03'),
cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg"
},
]
}]);
This is the code that I added:
{
name: 'One Simple Idea',
price: 22,
pubdate: new Date('2011', '02' '18'),
cover: "https://s1.postimg.org/36xiodlmzz/Key-1259589676_3_D.jpg"
},
{
name: 'Sell Your Idea with or without a Patent',
price: 22,
pubdate: new Date('2015', '03','03'),
cover:"https://s1.postimg.org/4vjmzpyxa7/stephen-key-book.jpg"
},
This code is in the exact same syntax as the code that immediately precedes it. However, when I remove the code I put in, and leave the original code, everything is ok. See and compare pictures.
You are missing a , in this line: pubdate: new Date('2011', '02' '18'). It should be pubdate: new Date('2011', '02', '18').
Also, I suppose you added ** to highlight the code in the question. If not, it should not be there in the code on your machine.
Here's a working example of your code: jsFiddle
