Can't pass the Service II

alisrn 2016-08-31 13:56:41 UTC #1

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.

bayoishola20 2016-08-31 14:00:16 UTC #2

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

A URL to the exercise could help speed the help.

alisrn 2016-08-31 14:04:19 UTC #3

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

bayoishola20 2016-08-31 14:13:25 UTC #4

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.

alisrn 2016-08-31 14:17:23 UTC #5

Nop. Didn't work. Nothing has changed.

bayoishola20 2016-08-31 14:18:37 UTC #6

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>

alisrn 2016-08-31 14:22:30 UTC #7

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

bayoishola20 2016-08-31 14:24:41 UTC #8

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

alisrn 2016-08-31 14:25:31 UTC #9

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; 
            }); 
}]);

bayoishola20 2016-08-31 14:28:04 UTC #10

Woah! All looks good.

I have no other suggestion at this point.

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

jhaanshuman 2016-09-02 04:03:20 UTC #11

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.....

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

codeace54938 2016-09-04 12:41:43 UTC #13

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

bayoishola20 2016-09-04 12:47:01 UTC #14

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

kk5190 2016-09-05 04:55:20 UTC #15

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

jhaanshuman 2016-09-05 05:19:08 UTC #16

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.....

vinit2jain 2016-09-06 18:08:33 UTC #17

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

scriptblaster83362 2016-09-07 16:48:09 UTC #18

delete them and refresh

scriptblaster83362 2016-09-07 16:49:18 UTC #19

its work ...

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

bayoishola20 2016-09-07 16:49:56 UTC #20

Sorry, please, are you asking a question?

scriptblaster83362 2016-09-07 16:55:00 UTC #21

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