I’m learning Codecademy course: AngularJS 1.X and I decided to do an app like that (chapter ‘Your first app’). First I copied the code from Codecademy and pasted it into VS Code. But the output isn’t like in Codecademy.
Error:
I found that the wrong code is in line 20 – 30 HTML but I don’t know how fix it. Here is my code:
HTML
<html>
<head>
<link href="https://content.codecademy.com/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="Untitled-1">
<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://content.codecademy.com/projects/shutterbugg/app-store.png" width="120px" />
<img src="https://content.codecademy.com/projects/shutterbugg/google-play.png" width="110px" />
</div>
</div>
<!-- Modules -->
<script src="js/Untitled-1.js"></script>
<!-- Controllers -->
<script src="js/index-liked-MainController.js"></script>
<!--Styles-->
<style src='html, body {.css'></style>
</body>
</html>
I also want to post CSS and Angular if there are some wrongs:
Untitled-1.js
$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;
};
}]);
index-linked-MainController.js
var app = angular.module("myApp", []);
html-body{.css
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
width:100%;
}
.header {
padding: 15px;
}
.header img {
display: inline-block;
}
.header h1 {
display: inline-block;
}
.main {
background-color: #f2f2f2 ;
padding: 40px 0;
}
.main h1 {
color: #F65A5B ;
font-size: 64px;
margin: 0 0 80px 0;
padding: 20px 0;
line-height: 60px;
width: 50%;
}
.main h2 {
background-color: #DDDDDD ;
color: #999999 ;
font-size: 20px;
margin: 0 0 40px 0;
padding: 20px 0;
}
.thumbnail {
border: 0px;
position: relative;
padding: 50px;
border-radius: 0;
margin-bottom:50px;
}
.thumbnail img {
margin-top: 10px;
margin-bottom: 30px;
max-width: 100%;
}
.title,
.date {
color: #444;
margin: 0;
font-size: 18px;
font-weight: 800;
}
.date {
color: #a3a3a3 ;
font-size: 14px;
font-weight: 200;
}
.price {
background-color: #39D1B4 ;
color: #fff;
font-size: 18px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
font-weight: 200;
height: 80px;
line-height: 80px;
text-align: center;
width: 80px;
position: absolute;
top: -40px;
right: 20px;
}
.rating {
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
margin: 30px 0 -30px 20px;
}
.likes,
.dislikes {
background: #F65A5B ;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 15px;
line-height: 40px;
min-width: 40px;
height: 40px;
border-radius: 50%;
margin: 0 -30px 0 40px;
text-align: center;
font-weight: 200;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: background 500ms;
}
.likes:hover,
.dislikes:hover {
color: #F65A5B ;
background: rgba(246, 90, 91, 0.25);
transition: background 500ms;
}
.footer {
text-align: center;
margin: 80px 0 110px;
}
.footer h2 {
font-size: 24px;
margin-bottom: 25px;
}
.footer img {
margin: 0 10px;
}