CODEWITHSUNDEEP
javascripthtmlcssweather-apiyahoo-weather-api
user2953989
user2953989

Reputation: 3009

Website showing a css animation depending on current weather using yahoo api

I want my website to display css animations depending on the weather data it receives from yahoo's weather api. So far to test this I have created an animation of clouds drifting across the screen, but only want them to show when it's cloudy. I have a piece of JS i believe should work, but i'm not sure how to implement the animation based on this.

I think my current cloud animation needs to go in 'body.cloudy, body.mostly-cloudy, body.partly-cloudy{}' but i'm not sure how

Below is my code, I have taken out some of the html (nav features ect) to shorten the code for this question.

My HTML:

  <body>

  <div class="container-fluid">



      <nav class="navbar navbar-default" style="z-index:2;">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
            <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li>
            <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li>
            <li><span class="searchIcon hidden-xs"></span></li>
            </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>

    </div> <!-- /container -->

    <div class="sky">
      <div class="cloud cloud01"></div>
      <div class="cloud cloud02"></div>
      <div class="cloud cloud03"></div>
      <div class="cloud cloud04"></div>
      <div class="cloud cloud05"></div>
      <div class="cloud cloud06"></div>
    </div>

    <!-- /info menu -->
    <div class="information-menu">
    <!--menu items-->         
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/my-js.js"></script>
  </body>

JS

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0029'",function(data){
            var w=data.query.results.item;
            var class=w.condition.text;
            var encodedclass = class.replace(/\s+/g, '-').toLowerCase();

            $('body').addClass(encodedclass);

       });

CSS

body{
  overflow: hidden;
  background-color: blue;
} 

.cloud {
  width: 512px;
  height: 512px;
  position: absolute;
}

.cloud01 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift 35s linear infinite;
}

.cloud02 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift02 35s linear infinite;
}

.cloud03 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift02 55s linear infinite;
}

.cloud04 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 no-repeat;
  animation: drift 45s linear infinite;
}

.cloud05 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 no-repeat;
  animation: drift 30s linear infinite;
}

.cloud06 {
  top: 10px;
  z-index: 1;
  background: url(file://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 no-repeat;
  animation: drift02 25s linear infinite;
}
@keyframes drift {
  from {transform: translate(-150px,-550px);}
  to {transform: translate(350px, 550px);}
}

@keyframes drift02 {
  from {transform: translate(350px,-550px);}
  to {transform: translate(1050px, 550px);}
}

body.cloudy, body.partly-cloudy, body.mostly-cloudy {

}

Upvotes: 0

Views: 903

Answers (1)

Kelvin
Kelvin

Reputation: 690

As per your error message in your comment, you can try editing your code below:

var _class=w.condition.text;
var encodedclass = _class.replace(/\s+/g, '-').toLowerCase();

Because in strict mode, some keywords like let, and class of ES6 are not supported at all in browsers now, and your browser tricks an error as you read.

Update answer:

$('body').removeClass('party-cloud cloud mostly-cloud').addClass(encodedclass);

Upvotes: 0

Related Questions