HamSter

var $file = $('.form__input-file');
    

$file.on('change', function(event){
  
  var $this = $(this),
      $label = $this.next('label'),
      $labelText = $label.find('span'),
      labelDefault = $labelText.text();
  
  var fileName = $this.val().split( '\\' ).pop();
  if( fileName ){
    $labelText.text(fileName);
  }else{
    $labelText.text(labelDefault);
  }
});

let ul = $('.upper ul:nth-of-type(2)');
$('.bottom').append(ul);

for(var i = 0; i<20; i++){
  var rand = Math.floor(Math.random() * 10);
  document.write(rand);
}

<div class="box">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
      <circle fill="none" stroke="#000" stroke-width="3" cx="150" cy="150" r="100" />
      <circle cx="150" cy="150" r="10" stroke="red"></circle>
      <g class="orbit">
        <circle cx="80" cy="80" r="20"></circle>
      </g>
    </svg>
  </div>

.box {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg .orbit {
  animation: spin-right 10s 30 linear;
  transform-origin: 150px 150px 0;
}

@keyframes spin-right {
  100% {
    transform: rotate(360deg);
  }
}

.card:nth-of-type(2n) img {
  display: none;
}

$('.card').each(function(i) {
    if(i%2){
      $(this).find('img').hide();
    }
});

$('.btn').magnificPopup({
  items: { 
    src: 
          '' +
          '<div class="mfp-figure">' +
          '<button title="Close (Esc)" type="button" class="mfp-close">×</button>' +
          '<img class="mfp-img" src="http://lorempixel.com/1920/1080/">' +
          '<div class="mfp-bottom-bar"><div id="map"></div></div>' +
          '</div>',
    type: 'inline' 
  },
  callbacks: {
    open: function(){
      var map_options = {
                center: {lat: 55.753994, lng: 37.622093},
                //streetViewControl: false,
                zoom: 8
            };

            var map = new google.maps.Map(document.getElementById('map'), map_options);
          
          google.maps.event.trigger(map, "resize");
    }
  },
  
});