FreeCodeCamp_WeatherApp_Challenge

freecodecamp_weatherapp_challenge.markdown

FreeCodeCamp_WeatherApp_Challenge

A Pen by muhammet ali petek on CodePen.

License.

index.html

<div class="bg bg-dawn"> <h1>dawn</h1> </div>
<div class="bg bg-dawn-2"> <h1>dawn 2</h1></div>
<div class="bg bg-day"> <h1>day</h1> </div>
<div class="bg bg-night"> <h1>night</h1></div>
<div class="bg bg-sunset"> <h1>sunset</h1></div>

<div class="main-container">
  
<!--   <h1>Weather</h1> -->
  <div class="weather-wrapper">
  </div><div class="sun-container">
  <div class="sun"><img src="http://orig12.deviantart.net/05db/f/2014/212/0/b/bright_full_moon_png_by_clairesolo-d7t4mdm.png" alt="" class="moon" /></div>
  </div>
</div>

script.js

var cloud_src = "http://pics.clipartpng.com/midle/Altostratus_Cloud_PNG_Clipart-864.png";
var moon_src = "http://orig12.deviantart.net/05db/f/2014/212/0/b/bright_full_moon_png_by_clairesolo-d7t4mdm.png";
function log(el){
  console.log(el);
}

var lengthOfDayAnimation = 240;
(function tweakNight(){
for(var i=0; i< 50+Math.floor(Math.random()*50); i++){
  var star = document.createElement('div');
  var cap = (Math.random()*5);
  $(star).css({
    position: 'absolute',
    top: (Math.random()*70)+'%',
    left: (Math.random()*100)+'%',
    width: cap+'px',
    height: cap+'px',
    backgroundColor: 'white',
    borderRadius: '100%',
    boxShadow: '0px 0px '+cap+'px 1px white'
  });
  $('.bg-night').append($(star));
}
var $night2 = $('.bg-night').clone();
  $night2.css('z-index','-6').removeClass('bg-night').addClass('bg-night-2');
  $night2.find('h1').text('night 2');
  $('.bg-night').after($night2);
})();

function dayNnightCore() {
  var _time = new Date();

  this.setTime = function(h,m) {
   
      _time.setHours(h);
      _time.setMinutes(m);
      //console.log('date is set to ' + _time);
      seek();
  }
  var bg_animation = (function() {
    var tl = new TimelineLite({paused:true, repeat: -1, useFrames: true});
    
    function percent(el){
      return (el/100)*lengthOfDayAnimation;
    }
    tl.to($('.bg-dawn'),percent(10),{opacity: 0 , ease: Power1.easeIn }).
    to($('.bg-day'),percent(30),{opacity: 0 , ease: Power2.easeIn}). //
    to($('.bg-sunset'),percent(15),{opacity: 0}).  //, ease: Power1.easeOut
    to($('.bg-night'),percent(45),{opacity: 0,ease: Power4.easeIn, onComplete: function(){ //ease: Power4.easeIn ,
       $('.bg').css('opacity', '1');
    }});
    return tl;
  })();
   var wonderer_animation = (function() {
    var tl = new TimelineLite({paused:true, repeat: -1, useFrames: true});
    
    tl.fromTo($('.sun-container'), lengthOfDayAnimation, {
    rotation: -60
    }, {
    rotation: 300
  });
    return tl;
  })();

  var animation = {
    play: function(f){
      bg_animation.play(f);
      wonderer_animation.play(f);
     
      log(bg_animation.vars.useFrames);
      log(bg_animation);
    },
    timeScale: function(f){
       bg_animation.timeScale(f);
      wonderer_animation.timeScale(f);
    },
    seek: function(f){
      bg_animation.seek(f);
      wonderer_animation.seek(f);
    },
    restart: function(f){
      bg_animation.restart(f);
      wonderer_animation.restart(f);
    }
  };
  var seek = function(seek) {
    var t = _time.getHours();
    var m = _time.getMinutes();
    var timeOfDay;
    var animSeconds = (((((t/24)*100) + (parseInt((m/60)*100,10)/100)))*lengthOfDayAnimation)/100; 
    log(((((t/24)*100) + (parseInt((m/60)*100,10)/100))));
    
    animSeconds = (animSeconds < 0) ? (lengthOfDayAnimation - animSeconds) : animSeconds - 4.7*lengthOfDayAnimation;
   
    if (t < 5 || t > 21) {
      timeOfDay = 'night';//8 132
      
    } else if (7 >= t && t >= 5) {
      timeOfDay= 'dawn'; //2 -- 34
    } else if (7 < t && t < 18) {
      timeOfDay = 'day'; //11 --184
    } else if (18 <= t && t <= 21) {
      timeOfDay = 'sunset'; //3  -- 50                
    }
    // var speed = 2;
    // animation.timeScale(lengthOfDayAnimation/speed);
    animation.seek(animSeconds);
  };
this.play= function(speed){
  speed = speed ? speed : 10;
   animation.timeScale(lengthOfDayAnimation/speed);
   animation.play();
};
this.restart= function(arg){
   animation.restart(arg);
};
}

var dayNnight = new dayNnightCore();

var debug = function(){
  var t = 0; var m = 0;
  setInterval(function(){

dayNnight.setTime(t,m);
if(m<60){
m++}else{
m = 0;
t++; }
}, 10);
}

dayNnight.play(480);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

style.css

*{
  box-sizing: border-box;
}
html{
  width: 100%;
  height: 100%;
}
body{
  font-family: 'Passion One', cursive;
  color: white;
  letter-spacing: 1px;
  margin: 0px!important;
  border: none;
  padding: 0px;
  display:flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bg{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
}
.bg-dawn{
  z-index: -1;
  background: linear-gradient(to bottom, rgb(38, 55, 72) 0%, rgb(70, 62, 56) 100%);
}
.bg-day{
  z-index: -2;
  background: linear-gradient(to bottom, rgba(140,196,255,1) 0%, rgba(207,232,255,1) 100%);
}
.bg-sunset{
  z-index: -3;
  background: linear-gradient(to bottom, hsla(210, 100%, 31%, 1) 0%, rgb(191, 85, 74) 70%,rgb(255, 153, 59) 100%);
}
.bg-night{
  z-index: -4;
  background: linear-gradient(to bottom, rgba(18, 26, 50, 1) 0%, rgba(55, 45, 55, 1) 100%);
}
.bg-dawn-2{
  z-index: -5;
  background: linear-gradient(to bottom, rgb(38, 55, 72) 0%, rgb(70, 62, 56) 100%);
}
.bg-night-2{
  background: linear-gradient(to bottom, rgba(18, 26, 50, 1) 0%, rgba(55, 45, 55, 1) 100%);
}
.sun{
  background-color: #ffff80;
  width: 100px;
  height: 100px;
  border-radius: 55%;
  box-shadow: 0px 0px 20px 0px yellow;
  
}
.sun-container{
  position: absolute;

  width: 110%;
  top: 110%;
  left: -5%;

  transform-origin: 50% 50%;
  transform: rotate(-60deg);
}
.moon{
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0px;
}
h1{
  position: absolute;
  top: 10px;
  left: 40%;
  font-size: 3em;
}

styles

<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet" />