Testing weather icons

In this example below you will see how to do a Testing weather icons with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TurnipEntropy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TurnipEntropy ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Testing weather icons</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="icon sun"></div>
  <div class="icon rain"></div>
  <div class="icon snow"></div>
  <div class="icon partly-cloudy"></div>
  <div class="icon cloudy"></div>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/TurnipEntropy/testing-weather-icons-jmxwmY */
.container{
  width: 100vw;
  height: 100vh;
}
.icon{
  width:15%;
  height:25%;
}

.sun{
  background:url("http://www.free-icons-download.net/images/sun-symbol-23786.png");
  background-color: yellow;
  background-size:100% 100%;
}

.rain{
    background:url("http://www.iconsdb.com/icons/preview/gray/rain-xxl.png");
  background-color:blue;
  background-size:100% 100%;
}

.cloudy{
  background: url("http://icon-park.com/imagefiles/simple_weather_icons_cloudy.png");
  background-color:black;
  background-size:100% 100%;
}

.partly-cloudy{
  background: url("http://www.iconsdb.com/icons/preview/gray/partly-cloudy-day-xxl.png");
  background-color:lightgrey;
  background-size:100% 100%;
}

.snow{
  background: url("http://www.iconsdb.com/icons/preview/gray/snow-xxl.png");
  background-color:lightblue;
  background-size:100% 100%;
}

/*Downloaded from https://www.codeseek.co/TurnipEntropy/testing-weather-icons-jmxwmY */
var str = 'Aquia Harbor VA';
str = str.replace(/\s(?![\s\S]*[\s])/g, ', ');
console.log(str);

Comments