CodePen Embed - Minimalist Clock/Weather Widget

<body ng-app="Weather">
<div class="info">
  <h1>Minimalist Clock and Weather</h1>
  <span>
    Made with
    <i class="fa fa-beer"></i>
    by
    <a href="http://www.idesignradthings.com">Ty Stelmach</a>
    <div class="spoilers">
      Minimalist, Flat, Modern</a> 
    </div>
  </span>
</div>
  
  <div class="app-wrap">
<div class="clock-face counter">
      <div class="analog">
        analog
      </div>

      <div class="hours counter">
        <span class="hands"></span>
      </div>

      <div class="minutes counter">
        <span class="hands"></span>
      </div>

    </div>

<div class="weather" ng-controller="MainCtrl">
<div class="locale-data">
          <div class="city">{{Data.city}}</div>
  <div class="cond">{{Data.des}}</div>
          <div class="temp-block">
            <div class="temp">{{Data.temp}} <div class="degree">&#176;</div><div class="temp" ng-click="Data.sys()">{{Data.unit}}</div></div>
        </div>
  </div>
    </div>

</div>

</body>

body{
  font-family: 'lato', sans-serif;
    background: #D2D5D9;

}

.app-wrap{
  background:rgb(20, 18, 21);
  width:475px;
  height:200px;
  display:block;
  margin:0 auto;
  margin-top:70px; 
  padding-bottom:40px;
  padding-top:30px;
  border-radius:20px;
  position:relative;
    box-shadow: 0 20px 50px -30px rgb(0, 0, 0);
}

.counter{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 48%;
  left: 50%;
  margin: -100px 0 0px -100px;
  border-radius: 50%;
}

.clock-face{
  border:solid 4px rgba(255, 255, 255, .1);
    position:absolute;
  left:130px;
  
}

.hands {
  width: 20px;
  height: 5px;
  border-radius: 0;
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  top: 10px;
}

.hours span{
  top:-3px;
  background: rgb(141, 69, 229);
}

.minutes span{
  top:-3px;
  background: rgb(65, 131, 232);
}

.analog{
    position: absolute;
  text-align: center;
  top: 36%;
  width: 150px;
  margin-left: -75px;
  left: 50%;
  color: rgb(141, 69, 229);
  font-size: 51px;
  padding: 5px;
  dispay: none;
  font-weight: 300;
  letter-spacing: 2px;
}

.mins{
  color:rgb(65, 131, 232);
}

.locale-data{
  color:#FFF;
  width:250px;
  float:right;
  text-align:center;
  margin-top:30px;
  font-weight:300;
}

.cond{
  color:rgb(65, 131, 232);
}

.city{
  font-size:30px;
  font-weight:600;
  padding-bottom:10px;
  color: rgb(141, 69, 229);
}

.temp, .degree{
  text-align:center;
  margin:0 auto;
  font-size:50px;
  display:inline-block;
  font-size:60px;
}

.degree{
  font-size:35px;
  position:relative;
  top:-28px;
  left:-13px;
}

.temp-block{
  margin:0 auto;
  display:block;
  float:none;
  margin-top:25px;
}


/* Info */
.info {
  width: 300px;
  margin: 35px auto;
  text-align: center;
  font-family: 'roboto', sans-serif;
}

.info h1 {
  margin: 0;
  padding: 0;
  font-size: 28px;
  font-weight: 400;
  color: #333333;
  padding-bottom: 5px;

}
.info span {
  color:#666666;
  font-size: 13px;
  margin-top:20px;
}
.info span a {
  color: #666666;
  text-decoration: none;
}
.info span .fa {
  color: rgb(226, 168, 16);
  font-size: 19px;
  position: relative;
  left: -2px;
}

.info span .spoilers {
  color: #999999;
  margin-top: 5px;
  font-size: 10px;
}


//Local weather
var app = angular.module('Weather', []);

app.factory('WeatherApi', function($http) {
  var obj = {};
  
  obj.getLoc = function() {
    return $http.jsonp("http://ipinfo.io/json?callback=JSON_CALLBACK");
  };
  obj.getCurrent = function(city) {
    var api ="api.openweathermap.org/data/2.5/weather?q="+ city;
    var units = "&units=imperial";
    var cb = "&callback=JSON_CALLBACK";
    return $http.jsonp(api + city + units + cb);
  };
  return obj
});

app.controller('MainCtrl', function($scope, WeatherApi) {
  $scope.Data = {};
  $scope.Data.unit ='F';
  $scope.Data.sysChange = false;
  WeatherApi.getLoc().success(function(data) {
    var city = data.city + ',' + data.country;
    $scope.Data.city = data.city;
    WeatherApi.getCurrent(city).success(function(data) {
      CurrentWeather(data)
    });
  });

  function CurrentWeather(data) {
    $scope.Data.temp = Math.round(data.main.temp);
    $scope.Data.Cel = Math.round(data.main.temp);
    $scope.Data.des = data.weather[0].main;
    $scope.Data.Fah = Math.round( ($scope.Data.temp * 9)/5 + 32 );
    return IconGen($scope.Data.des);
  }
  
  $scope.Data.sys= function(){
   if($scope.Data.sysChange){
     $scope.Data.unit ='F';
     $scope.Data.temp = $scope.Data.Cel;
     return $scope.Data.sysChange = false;
   
}
 };

//clock   
  
function newTime(){
  
  //Clock vars
  var date = new Date();
  
  //set hours to 24 hr clock
  var hours = date.getHours();
    if(hours>11) hours=hours-0;
    rhours = 360/12*hours;
    $('.hours').css('transform', 'rotate('+rhours+'deg)');


// set minutes to 60 per hour
  var minutes = date.getMinutes();
  rminutes = 360/60*minutes;
  $('.minutes').css('transform', 'rotate('+rminutes+'deg)');
//Add 0 if less than 9
  if(minutes <= 9) {
    minutes = '0' + minutes;
}
  
  
//analog time
$('.analog').html('<span class="hours">' + hours + '</span>' + ':' + '<span class="mins">' + minutes + '</span>');
  

  
  setTimeout(newTime, 500);
}
    
newTime();

});

This Pen is owned by Ty Stelmach on CodePen.

See more by @TyStelmach on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css

External CSS

External JavaScript