Super Mario Weather

HTML

              
                <html>
<head>
  <meta charset="UTF-8">
  <title>CodePen - Super Mario Weather</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><link href="style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container box-temperature">
            <div class=" displayed-data">
                <p class="temperature"></p>
                <p class="cityg"></p>
                <p class="condition"></p>
            </div>
            <canvas id="particle"></canvas>
            <div class="box-btn">
                <button type="button" id="brick-btn" class="btn"></button>
            </div>
            <button type="button" id="mario-btn" class="btn"></button>
        </div>
        <div class="container box-footer">
            <footer><p>Fork of an original work Super Mario Weather (<a href="https://codepen.io/Errec/pen/edLbxv"> https://codepen.io/Errec/pen/edLbxv</a>)</p></footer>
        </div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script  src="./script.js"></script>

</body>
</html>

CSS

              
                @import 'https://fonts.googleapis.com/css?family=Press+Start+2P';

html, body {
  height: 100%;
  margin: 0 auto ;
  padding: 0;
  width: 100%;
}

body {
  align-items: center;
  background-color: #F4C52F;
  /*background-image: url('https://res.cloudinary.com/dt4qeehms/image/upload/v1476716211/weather%20machine/background-transp.png');*/
  display: flex;
  flex-direction: column;
  background-size: auto 300px;
  background-repeat: repeat-x;
  background-position: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  animation: animatedBackground 75s linear infinite;
}

@keyframes animatedBackground {
  from { background-position: 0; }
  to { background-position: 2250px; }
}

.box-temperature {
  background-size: 100%;
  outline: 4px solid black;
  box-shadow: 18px 22px 35px -6px rgba(0,0,0,0.75);
  min-height: 460px;
  overflow: hidden;
  position: relative;
  height: 460px;
  width: 380px;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-delay: 4s;
}

.box-footer {
  display: block;
  font-size: 80%;
  padding: 25px 0 0 0;
  text-align: end;
}

#brick-btn {
  background-size: 100%;
  margin: 60px 0 0 17px;
  width: 40px !important; /* !important: Fix Jquey effect() resize bug */
  height: 40px !important; /* !important: Fix Jquey effect() bug */
  border-radius: 0;
  position: absolute;
  left: 14px;
  bottom: 245px;
  background-color: transparent;
}

#mario-btn {
  background-size: 100%;
  margin: 60px 0 0 17px;
  width: 35px !important; /* !important: Fix Jquey effect() resize bug */
  height: 67px !important; /* !important: Fix Jquey effect() resize bug */
  border-radius: 0;
  background-image: url('https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/mario-stand.png');
  background-repeat: no-repeat;
  background-color: transparent;
  position: absolute;
  left: 17px;
  bottom: 160px;
}

@media screen and (max-width: 480px) {
  body {
    background-size: auto 200px;
    background-repeat: repeat;
    animation: 0s;
  }

  .box-temperature {
    min-height: calc(0.8*460px);
    height: calc(0.8*460px);
    width: calc(0.8*380px);
  }

  #brick-btn {
    left: calc(0.8*14px);
    bottom: calc(0.8*245px);
    width: calc(0.8*40px) !important; /* !important: Fix Jquey effect() resize bug */
    height: calc(0.8*40px) !important; /* !important: Fix Jquey effect() bug */
  }

  #mario-btn {
    left: calc(0.8*17px);
    bottom: calc(0.8*160px);
    width: calc(0.8*35px) !important; /* !important: Fix Jquey effect() resize bug */
    height: calc(0.8*67px) !important; /* !important: Fix Jquey effect() resize bug */
  }
}


.btn:focus {
  outline: none;
}

.displayed-data {
  font-family: 'Press Start 2P', cursive;
  margin: 10px 0 0 5px;
  position: absolute;
  z-index: 20;
}

.cityg {
  font-size: 20px;
  //color: #FFF;
  margin-left: 5px;
  margin-top: -20px;
  max-width: 60%;
  text-shadow: 0 1px #FFF;
  word-spacing: -10px;
}

.condition {
  font-size: 20px;
  margin-left: 5px;
  margin-top: 0px;
  max-width: 100%;
  text-shadow: 0 1px #FFF;
  word-spacing: -10px;
}

.temperature {
  font-size: 50px;
  letter-spacing: -2px;
  text-shadow: 2px 1px #FFF;
}

.sun-inner {
  width: 70px;
  height: 70px;
  background-color: transparent;
  animation-name: suntopmov, sunleftmov;
  animation-duration: 1.5s, 1.5s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate;
  position: absolute;
  z-index: 10;
}

@keyframes suntopmov {
  0% {top: 50px; animation-timing-function: ease-out;}
  50% {top: 160px; animation-timing-function: ease-in;}
  100% {top: 50px;}
}

@keyframes sunleftmov {
  0% {left: 25px;}
  100% {left: calc(100% - 70px)}
}

.sun-inner img {
width: 100%;
}

.star {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 60px;
  top: 70px;
}
.star img {
width: 100%;
}

.cloud-rain {
  width: 315px;
  height: 35px;
}

.cloud-rain img {
  width: 100%;
}

#cloud-rain-1 {
  position: absolute;
  right: 40px;
  top: 25px;
  animation-duration: 65s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: cloudrainrighttoleft;
}

#cloud-rain-2 {
  position: absolute;
  right: 40px;
  top: 5px;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: cloudrainlefttoright;
}

#cloud-rain-3 {
  position: absolute;
  right: 40px;
  top: 65px;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: cloudrainlefttoright;
}

#cloud-rain-4 {
  position: absolute;
  right: 40px;
  top: -15px;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: cloudrainrighttoleft;
}

@keyframes cloudrainlefttoright {
  0% {left: -315px;}
  100% {left: 100%}
}

@keyframes cloudrainrighttoleft {
  0% {left: 100%}
  100% {left: -315px;}
}

.cloud-double {
  width: 125px;
  height: 60px;
}

.cloud-double img {
  width: 100%;
}

#cloud-double-1 {
  position: absolute;
  right: 40px;
  top: 95px;
  animation-duration: 55s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
    animation-name: clouddoublerighttoleft;
}

#cloud-double-2 {
  position: absolute;
  right: 40px;
  top: 5px;
  animation-duration: 190s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: clouddoublelefttoright;
}

#cloud-double-3 {
  position: absolute;
  right: 40px;
  top: 65px;
  animation-duration: 150s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: clouddoublelefttoright;
}

#cloud-double-4 {
  position: absolute;
  right: 40px;
  top: -15px;
  animation-duration: 105s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: clouddoublerighttoleft;
}

@keyframes clouddoublelefttoright {
  0% {left: -125px;}
  100% {left: 100%}
}

@keyframes clouddoublerighttoleft {
  0% {left: 100%}
  100% {left: -125px;}
}

.cloud-simple {
  width: 83px;
  height: 60px;
}

.cloud-simple img {
  width: 100%;
}

#cloud-simple-1 {
  position: absolute;
  right: 40px;
  top: 85px;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: cloudsimplerighttoleft;
}

#cloud-simple-2 {
  position: absolute;
  right: 35px;
  top: 20px;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: cloudsimplelefttoright;
}

@keyframes cloudsimplelefttoright {
  0% {left: -83px;}
  100% {left: 100%}
}

@keyframes cloudsimplerighttoleft {
  0% {left: 100%}
  100% {left: -83px;}
}

.leaf-green {
  width: 40px;
  height: 35px;
}

.leaf-green img {
  width: 100%;
}

#leaf-green-1 {
  position: absolute;
  bottom: 40px;
  animation-duration: 3s, 3s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  animation-name: leaflefttoright, leafbottomtop1;
}

#leaf-green-2 {
  position: absolute;
  bottom: 160px;
  animation-duration: 1.8s, 1.8s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
    animation-name: leaflefttoright, leafbottomtop2;
}

#leaf-green-3 {
  position: absolute;
  bottom: 300px;
  animation-duration: 2s, 2s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
    animation-name: leaflefttoright, leafbottomtop3;
}

#leaf-green-4 {
  position: absolute;
  bottom: 100px;
  animation-duration: 1.5s, 1.5s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
    animation-name: leaflefttoright, leafbottomtop4;
}

@keyframes leaflefttoright {
  0% {left: -40px;}
  100% {left: 100%}
}

@keyframes leafbottomtop1 {
  0% {bottom: 30px; animation-timing-function: ease-out;}
  25% {bottom: 60px; animation-timing-function: ease-in;}
  100% {bottom: 30px; animation-timing-function: ease-out;}
}

@keyframes leafbottomtop2 {
  0% {bottom: 120px; animation-timing-function: ease-out;}
  25% {bottom: 160px; animation-timing-function: ease-in;}
  100% {bottom: 120px; animation-timing-function: ease-out;}
}

@keyframes leafbottomtop3 {
  0% {bottom: 300px; animation-timing-function: ease-out;}
  25% {bottom: 340px; animation-timing-function: ease-in;}
  100% {bottom: 250px; animation-timing-function: ease-out;}
}

@keyframes leafbottomtop4 {
  0% {bottom: 100px; animation-timing-function: ease-out;}
  25% {bottom: 140px; animation-timing-function: ease-in;}
  50% {bottom: 100px; animation-timing-function: ease-out;}
  75% {bottom: 90px; animation-timing-function: ease-in;}
  100% {bottom: 120px; animation-timing-function: ease-out;}
}

@keyframes thundernight {
  0% {background-color: #020514;}
  1% {background-color: white;}
  2% {background-color: #020514;}
  100% {background-color: #020514;}
}

@keyframes thunderday {
  0% {background-color: #1528A2;}
  1% {background-color: white;}
  2% {background-color: #1528A2;}
  100% {background-color: #1528A2;}
}

JS

              
                // Assets are property of Nintendo!
const params = new URLSearchParams(window.location.search);
let apikey = params.get("apikey");
let lang = params.get("lang") || "en";
let query = params.get("query");

$(document).ready(function(){
  var temperature, weatherDescription, cityNameW;
  var dayOrNight;


    $.getJSON("https://api.weatherapi.com/v1/current.json?key=" + apikey + "&q=" + query + "&lang=" + lang, function(data) {
        temp_c = data.current.temp_c;
        temp_f = data.current.temp_f;
        weatherDescription = data.current.condition.text;
        weatherCode = data.current.condition.code;
        cityNameW = data.location.name;
        dayOrNight = data.current.is_day;
        
        if (data.location.country == "United States of America" || data.location.country == "USA" || data.location.country == "USA United States of America"){
        $(".temperature").text(temp_f+"°F");
        setWeatherBackground(weatherCode , dayOrNight);
        setTimeout(function() {
          marioJump();
          $("#brick-btn").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716211/weather%20machine/btn-temp-c.png\')');
        }, 500);
        var showCelsius = false;}
        else{
          $(".temperature").text(temp_c+"°C");
        setWeatherBackground(weatherCode , dayOrNight);
        setTimeout(function() {
          marioJump();
          $("#brick-btn").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716211/weather%20machine/btn-temp-f.png\')');
        }, 500);
        var showCelsius = true;}
                
        $('.btn').on('click', function(){
          marioJump();
          showCelsius = convertTemp(temperature, showCelsius);
        });

        $(".cityg").text(cityNameW);
        $(".condition").text(weatherDescription);
    });
  });

  function marioJump() {
  $('#mario-btn').effect( "bounce", {times:1}, 350 );
  $("#mario-btn").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/mario-jump.png\')');
  setTimeout(function() {
    $("#mario-btn").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/mario-stand.png\')');
  }, 350);
  setTimeout(function() {
    $('#brick-btn').effect( "bounce", {times:1}, 350 ).delay(700);
  }, 100);
}

function convertTemp(temperature, showCelsius) {
  if(showCelsius === false) {
  $(".temperature").text(temp_c+"°C");
  $("#brick-btn").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716211/weather%20machine/btn-temp-f.png\')');
  showCelsius = true;
  }
  else {
    $(".temperature").text(temp_f+"°F");
      $("#brick-btn").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/btn-temp-c.png\')');
      showCelsius = false;
  }
  return showCelsius;
}

// modified from https://codepen.io/otsukatomoya/pen/gbDxF/
function makeSnow() {
  var w = window.innerWidth,
      h = window.innerHeight,
      canvas = document.getElementById('particle'),
      ctx = canvas.getContext('2d'),
      rate = 50,
      arc = 500,
      time,
      count,
      size = 2,
      speed = 10,
      lights = [],
      colors = ['#eee'];

  canvas.setAttribute('width',w);
  canvas.setAttribute('height',h);

  function init() {
    time = 0;
    count = 0;

    for(var i = 0; i < arc; i++) {
      lights[i] = {
        x: Math.ceil(Math.random() * w),
        y: Math.ceil(Math.random() * h),
        toX: Math.random() * 5 + 1,
        toY: Math.random() * 5 + 1,
        c: colors[Math.floor(Math.random()*colors.length)],
        size: Math.random() * size
      };
    }
  }

  function bubble() {
    ctx.clearRect(0,0,w,h);

    for(var i = 0; i < arc; i++) {
      var li = lights[i];

      ctx.beginPath();
      ctx.arc(li.x,li.y,li.size,0,Math.PI*2,false);
      ctx.fillStyle = li.c;
      ctx.fill();

      li.x = li.x + li.toX * (time * 0.05);
      li.y = li.y + li.toY * (time * 0.05);

      if(li.x > w) { li.x = 0; }
      if(li.y > h) { li.y = 0; }
      if(li.x < 0) { li.x = w; }
      if(li.y < 0) { li.y = h; }
    }
    if(time < speed) {
      time++;
    }
    timerID = setTimeout(bubble,1000/rate);
  }
  init();
  bubble();
}

// modified from https://codepen.io/amwill/pen/eNMWBp/
function makeRain(dropSizeFactor, interval) {
  var canvas = document.getElementById('particle');
  var ctx = canvas.getContext('2d');

  var W = window.innerWidth;
  var H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;

  var num = 300;
  var arr = [];
  var speed = 5;

  for (var i = 0; i < num; i++) {
    arr.push({
      x: Math.random() * W,
      y: Math.random() * H,
      w: 1,
      h: Math.random() * dropSizeFactor,
      s: Math.random() * 10 + 3
    });
  }

  function raindrops() {
    ctx.clearRect(0,0,W,H);
    for(var i = 0; i < num; i++) {
      ctx.fillStyle = 'rgba(158, 202, 255, 1.0)';
      ctx.fillRect(arr[i].x, arr[i].y, arr[i].w, arr[i].h);
    }
    makeItRain();
  }

  function makeItRain() {
    for(var i = 0; i< num; i++){
     arr[i].y += arr[i].s;
     if(arr[i].y >= H){
      arr[i].y =- arr[i].h;
     }
    }
  }
  setInterval(raindrops, interval);
}

//These are all the condition codes the API returns. I've sorted to the best of my understanding.
function setWeatherBackground(description, dayOrNight) {
  switch(description){
    case 1273:
    case 1276:
    case 1192:
    case 1195:
    case 1087:
    cardThunderstorm(dayOrNight);
    break;

    case 1030:
    case 1063:
    case 1150:
    case 1153:
    case 1180:
    case 1069:
    case 1072:
    case 1168:
    case 1171:
    case 1237:
    case 1249:
    case 1261:
    cardDrizzle(dayOrNight);
    break;

    case 1183:
    case 1186:
    case 1189:
    case 1240:
    case 1243:
    case 1246:
    case 1198:
    case 1201:
    case 1204:
    case 1207:
    case 1252:
    case 1264:
    cardRain(dayOrNight);
    break;

    case 1114:
    case 1210:
    case 1213:
    case 1216:
    case 1219:
    case 1222:
    case 1255:
    case 1258:
    case 1279:
    case 1282:
    case 1066:
    case 1117:
    case 1225:
    cardSnow(dayOrNight);
    break;

    case 1135:
    case 1147:
    cardAtmosphere(dayOrNight);
    break;

    case 1000:
    cardClear(dayOrNight);
    break;

    case 1003:
    case 1006:
    case 1009:
    cardClouds(dayOrNight);
    break;
  }
}

function cardClear(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-clear.png\')');
  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#5C94FC');
    $('.displayed-data').after('<div class="sun-wrapper"><div class="sun-inner"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716209/weather%20machine/sun-animated.gif\' ></div></div>');
  }
  else {
    $(".box-temperature").css('background-color', '#090F1B');
    $(".cityg").css('color', '#999');
    $(".cityg").css('text-shadow', '3px 3px 3px #000');
    $(".condition").css('color', '#999');
    $(".condition").css('text-shadow', '3px 3px 3px #000');
    $(".temperature").css('color', '#999');
    $(".temperature").css('text-shadow', '3px 3px 3px #000');
    $('.displayed-data').after('<div class="star"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716209/weather%20machine/star.png\' ></div>');
  }
}

function cardThunderstorm(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-clear.png\')');
  $('.displayed-data')
  .after('<div id="cloud-rain-1" class="cloud-rain"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-rain.png\' ></div>',
         '<div id="cloud-rain-2" class="cloud-rain"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-rain.png\' ></div>',
         '<div id="cloud-rain-3" class="cloud-rain"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-rain.png\' ></div>',
         '<div id="cloud-rain-4" class="cloud-rain"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-rain.png\' ></div>');

  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#1528A2');
    $(".box-temperature").css('animation-name', 'thunderday');
  } else {
      $(".box-temperature").css('background-color', '#020514');
      $(".cityg").css('color', '#999');
      $(".cityg").css('text-shadow', '3px 3px 3px #000');
      $(".condition").css('color', '#999');
      $(".condition").css('text-shadow', '3px 3px 3px #000');
      $(".temperature").css('color', '#999');
      $(".temperature").css('text-shadow', '3px 3px 3px #000');
      $(".box-temperature").css('animation-name', 'thundernight');
    }

  makeRain(25,5);
}

function cardSnow(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-snow.png\')');
  $(".cityg").css('color', '#EEE');
  $(".cityg").css('text-shadow', '3px 3px 3px #000');
  $(".condition").css('color', '#EEE');
  $(".condition").css('text-shadow', '3px 3px 3px #000');
  $(".temperature").css('color', '#EEE');
  $(".temperature").css('text-shadow', '3px 3px 3px #000');
  $('.displayed-data')
  .after('<div id="cloud-simple-1" class="cloud-simple"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-simple.png\' ></div>',
         '<div id="cloud-simple-2" class="cloud-simple"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-simple.png\' ></div>');

  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#2142FF');
  } else {
      $(".box-temperature").css('background-color', '#060E39');
          $('.displayed-data').after('<div class="star"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/star.png\' ></div>');
    }
  makeSnow();
}

function cardClouds(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-clear.png\')');
  $('.displayed-data')
  .after('<div id="cloud-double-1" class="cloud-double"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-double.png\' ></div>',
         '<div id="cloud-double-2" class="cloud-double"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-double.png\' ></div>',
         '<div id="cloud-double-3" class="cloud-double"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-double.png\' ></div>',
         '<div id="cloud-double-4" class="cloud-double"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-double.png\' ></div>',
         '<div id="cloud-simple-1" class="cloud-simple"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-simple.png\' ></div>',
         '<div id="cloud-simple-2" class="cloud-simple"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-simple.png\' ></div>');

  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#5C94FC');
    } else {
      $(".box-temperature").css('background-color', '#090F1B');
      $(".cityg").css('color', '#999');
      $(".cityg").css('text-shadow', '3px 3px 3px #000');
      $(".condition").css('color', '#999');
      $(".condition").css('text-shadow', '3px 3px 3px #000');
      $(".temperature").css('color', '#999');
      $(".temperature").css('text-shadow', '3px 3px 3px #000');
    }
}

function cardDrizzle(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-clear.png\')');
  $('.displayed-data').after('<div id="cloud-rain-2" class="cloud-rain"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-rain.png\' ></div>');

  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#1528A2');
  } else {
      $(".box-temperature").css('background-color', '#020514');
      $(".cityg").css('color', '#999');
      $(".cityg").css('text-shadow', '3px 3px 3px #000');
      $(".condition").css('color', '#999');
      $(".condition").css('text-shadow', '3px 3px 3px #000');
      $(".temperature").css('color', '#999');
      $(".temperature").css('text-shadow', '3px 3px 3px #000');
    }

  makeRain(5,15);
}

function cardRain(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-clear.png\')');
  $('.displayed-data')
  .after('<div id="cloud-rain-1" class="cloud-rain"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-rain.png\' ></div>',
         '<div id="cloud-rain-2" class="cloud-rain"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-rain.png\' ></div>');

  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#1528A2');
  } else {
      $(".box-temperature").css('background-color', '#020514');
      $(".cityg").css('color', '#999');
      $(".cityg").css('text-shadow', '3px 3px 3px #000');
      $(".condition").css('color', '#999');
      $(".condition").css('text-shadow', '3px 3px 3px #000');
      $(".temperature").css('color', '#999');
      $(".temperature").css('text-shadow', '3px 3px 3px #000');
    }

  makeRain(20,10);
}

function cardExtreme(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-clear.png\')');
  $('.displayed-data')
  .after('<div class="leaf-wrapper"><div id="leaf-green-1" class="leaf-green"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/leaf-green.png\' ></div></div>',
         '<div class="leaf-wrapper"><div id="leaf-green-2" class="leaf-green"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/leaf-green.png\' ></div></div>',
         '<div class="leaf-wrapper"><div id="leaf-green-3" class="leaf-green"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/leaf-green.png\' ></div></div>',
         '<div class="leaf-wrapper"><div id="leaf-green-4" class="leaf-green"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/leaf-green.png\' ></div></div>');

  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#5C94FC');
  } else {
      $(".box-temperature").css('background-color', '#090F1B');
    }
}

function cardAdditional(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-clear.png\')');
  $('.displayed-data')
  .after('<div class="leaf-wrapper"><div id="leaf-green-1" class="leaf-green"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/leaf-green.png\' ></div></div>',
         '<div id="cloud-simple-1" class="cloud-simple"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-simple.png\' ></div>',
         '<div id="cloud-simple-2" class="cloud-simple"><img src=\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/cloud-simple.png\' ></div>');

  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#5C94FC');
  } else {
      $(".box-temperature").css('background-color', '#090F1B');
    }
}

function cardAtmosphere(dayOrNight) {
  $(".box-temperature").css('backgroundImage', 'url(\'https://res.cloudinary.com/dt4qeehms/image/upload/v1476716210/weather%20machine/card-clear.png\')');

  if (dayOrNight == 1) {
    $(".box-temperature").css('background-color', '#C6D3D8');
  } else {
      $(".box-temperature").css('background-color', '#828C8F');
    }
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions