Can't pass the Service II


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


#2

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

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


#3

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


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


#5

Nop. Didn't work. Nothing has changed.


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

#7

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


#8

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


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

#10

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"]


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



#13

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


#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


#15

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


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


#17

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


#18

delete them and refresh


#19

its work ...

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


#20

Sorry, please, are you asking a question?


#21

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