Can't pass the Service II

Everything seems okay but I can’t pass the service II. Here is my index.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the AngularJS library -->
    <script src="js/shared/angular.min.js"></script>
  </head>
  <body ng-app="ForecastApp">

    <div class="main" ng-controller="MainController">
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-7">
            <h1>{{ fiveDay.city_name }}</h1>
            <h2>5-day forecast</h2>
            <div class="forecast" ng-repeat="day in fiveDay.days">
              <div class="day row">
                <div class="weekday col-xs-4">
                  <p>{{ day.datetime | date }}</p>
                </div>
                <div class="weather col-xs-3">
                  <p>
                    <img ng-src="{{ day.icon }}">
                  </p>
                </div>
                <div class="weather col-xs-1">
                </div>
                <div class="high col-xs-2">
                  <p>{{ day.high }}&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>{{ day.low }}&deg;</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

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

    <!-- Services -->
    <script src="js/services/forecast.js"></script>

    <!-- Directives -->


  </body>
</html>

Output is also seems okay.

So, what’s the error you’re getting?

A URL to the exercise could help speed the help. :slight_smile:

İt doesnt throw an error.
https://www.codecademy.com/en/courses/learn-angularjs/lessons/services/exercises/services-ii?action=resume

You might need to remove the paragraph tag around that image service to have:

                <div class="weather col-xs-3">
                  <img ng-src="{{ day.icon }}">
                </div>

Also, please ensure you didn’t tamper with any line of code not requiring you too. For instance, you will see a red circle alert, but please ignore.

Nop. Didn’t work. Nothing has changed.

Okay, I’m going to have to paste the full stuff so that we trace. But before then, refresh browser page, please.

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <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>
  <body ng-app="ForecastApp">

    <div class="main" ng-controller="MainController">
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-7">
            <h1>{{ fiveDay.city_name }}</h1>
            <h2>5-day forecast</h2>
            <div class="forecast" ng-repeat="day in fiveDay.days">
              <div class="day row">
                <div class="weekday col-md-4">
                  <p>{{ day.datetime | date }}</p>
                </div>
                <div class="weather col-md-3">
                  <img ng-src="{{ day.icon }}">
                </div>
                <div class="weather col-md-1">
                </div>
                <div class="high col-md-2">
                  <p>{{ day.high }}&deg;</p>
                </div>
                <div class="low col-md-2">
                  <p>{{ day.low }}&deg;</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        </ul>
      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

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

    <!-- Services -->
    <script src="js/services/forecast.js"></script>

    <!-- Directives -->


  </body>
</html>

1 Like

It gives an error at </ul>. and it doesnt seem properly at output. I refreshed.

Okay, let me see your forecast.js script, please.

app.factory('forecast', ['$http', function($http) { 
  return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

Woah! All looks good.

I have no other suggestion at this point. :wink:

[Maybe you keep trying till you get a screen splash that says to “Get Code”]

It’s Saying… Make sure to display the weekday inside the .weekday div. Use the date filter to format the datetime into a weekday… I ccan’t Understand …What’s The Error here…

<!doctype html>

<!-- Include the AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div class="main" ng-controller="MainController">
  <div class="container">
    <div class="row">
      <div class="col-sm-5 col-sm-offset-7">
        <h1>{{ fiveDay.city_name }}</h1>
        <h2>5-day forecast</h2>
        <div class="forecast" ng-repeat="day in fiveDay.days">
          <div class="day row">
              
            <!-- datetime -->
            <div class="weekday col-xs-4">
            <p>{{ day.datetime | date:'EEEEE'}}</p>
            </div>

            
            <!-- icon -->
            <div class="weather col-xs-3">
             <img ng-src="{{ day.icon }}">
            </div>

            <div class="weather col-xs-1"></div>

            

            <!-- high -->
            <div class="high col-xs-2">
            <p>{{ day.high }}&deg;</p>

            </div>

            
            <!-- low -->
            <div class="low col-xs-2">
            <p>{{ day.low }}&deg;</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modules -->
<script src="js/app.js"></script>

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

<!-- Services -->
<!-- Directives -->

Finally worked for me. Remove the <p> around your {{ day.datetime | date:'EEEEE'}}.

I actually did ask you to do that in the post above when I asked you remove the paragraph tag. See: Remove paragraph tag

Don’t you think the correct filter is date:‘EEEE’, not date:‘EEEEE’

1 Like

Yeah,Right …It was my silly Typo Mistake…i got that,…Codeacademy has some bug with Different Browsers…It stops auto-Loading in some chapters… and on reloading we lose what we have coded…There is something missing…But https://discuss.codecademy.com is solution to that problem…so,…iits OK…keep it up Codecademy…

http://localhost:8000/ type this url instead of https://localhost/.
Error will get resolve.

delete them and refresh

its work …

<p> {{ day.datetime | date }} </p>

Sorry, please, are you asking a question?

No, is a answer for alisrn … i have the same problem with the </ul> element