Stuck in Step 5 of 7


#1

For some reason, I can't get the code to work. Please help!
Below is my code:

index.html

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    
    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="GameboardApp">
    <div class="header">
      <h1 class="logo">GameBoard</h1>
    </div>

    <div class="main" ng-controller="ScoreController">
      <div class="container">
        
        <div class="row">
          <game info="score" ng-repeat="score in scores"></game>
        </div>
      
      </div>
    </div>
    
    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/ScoreController.js"></script>

    <!-- Directives -->
    <script src="js/directives/game.js"></script>

  </body>
</html>

game.js

app.directive('game', function() {
	return {
  restrict: 'E',
  scope: {info: '='},
  templateUrl: 'js/directives/game.html'
  };
});

game.html

<div class="col-sm-4">
  <div class="row scorecard">
    <p class="period">period1</p>
    <div class="visitor col-xs-4">
      <h2 class="visitor-score">{{info.visitor_score}} </h2>
      <h3>
        <span class="visitor-city">{{info.visitor_team.city}}</span><br/>
        <span class="visitor-name">{{info.visitor_team.name}}</span>
      </h3>
    </div>
    <div class="dash col-xs-3">
      <h2>-</h2>
    </div>
    <div class="home col-xs-4">
      <h2 class="home-score">{{info.home_score}}</h2>
      <h3>
        <span class="home-city">{{info.home_team.city}}</span><br/>
        <span class="home-name">{{info.home_team,name}}</span>
      </h3>
    </div>
  </div>
</div>

#2

@joytotribuvp

I think the problem comes from the link tag

It should have a /> at the end of link tag.


#3

Thanks for the reply. However, that specific part of the code was provided by Codecademy and it was working fine in the first version of the project. My issue is more related to the section in index.html where the directive "game" is called with the scope info:

<div class="main" ng-controller="ScoreController">
      <div class="container">
        
        <div class="row">
          <game info="score" ng-repeat="score in scores"></game>
        </div>

#4

Good afternoon,

check the module is created corretly (app.js):
var app = angular.module("GameboardApp",[]);

the other files seem to be ok, (I wrote the "period" in 'game.html' as {{info.datetime | date:'short'}}).
I did it today and it works


#5

In game.html file:

<div class="home col-xs-4">
  <h2 class="home-score">{{info.home_score}}</h2>
  <h3>
    <span class="home-city">{{info.home_team.city}}</span><br/>
    <span class="home-name">{{info.home_team,name}}</span>
  </h3>
</div>

You have a comma instead of a period.


#6

Thanks! You got it!!! Simple error with huge implications. Thanks a lot!


#7

Thanks! Found the problem. It was on game.html