Project-3-Sky Box with Data

In this example below you will see how to do a Project-3-Sky Box with Data with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nonumpa, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nonumpa ©
  • HTML
  • CSS
  • JavaScript
    #weather.outline 
  label
    input#switch_night(type="checkbox")
    .top
      .moon
      
      //- .sun
      //-   .sunstroke1
      //-   .sunstroke2
      //-   .sunstroke3
      //-   .sunstroke4
      //- .cloud
      //-   .rain
      //-   .rain.rain1
      //-   .rain.rain2
      svg.tempsvg
        text(x=37 y=100) 
        circle(cx=37 cy=100 r=3)

        text(x=90 y=100) 
        circle(cx=90 cy=100 r=3)

        text(x=143 y=100) 
        circle(cx=143 cy=100 r=3)

        text(x=196 y=100) 
        circle(cx=196 cy=100 r=3)

        text(x=249 y=100) 
        circle(cx=249 cy=100 r=3)

        text(x=302 y=100) 
        circle(cx=302 cy=100 r=3)

        text(x=355 y=100) 
        circle(cx=355 cy=100 r=3)

        //- text(x=490 y=80) 26°C
        //- circle(cx=490 cy=80 r=3)
        polyline(points="0,100 70,100 140,100 210,100 280,100 350,100 420,100  490,100")

      .text
        .temperature
        .infos
          .address 台北市
          .time 
  .bottom
    .dayweather
      h3 
      svg(viewbox="-50 -50 100 100")
        //- circle.sun(cx=0 cy=0 r=25)
        
        //- circle.cloud(cx=-0 cy=30 r=15)
        //- circle.cloud(cx=-15 cy=30 r=17)
        //- circle.cloud(cx=-30 cy=30 r=15)
        //- circle.cloud(cx=-25 cy=10 r=15)
        //- circle.cloud(cx=-7 cy=15 r=15)
        
        
    .dayweather
      h3 
      svg(viewbox="-50 -50 100 100")
        //- line.rain(x1=-25 y1=15 x2=-25 y2=35)
        //- line.rain(x1=-14 y1=5 x2=-14 y2=35)
        //- line.rain(x1=-5 y1=20 x2=-5 y2=45)
      
        //- circle.cloud(cx=-0 cy=30 r=15)
        //- circle.cloud(cx=-15 cy=30 r=17)
        //- circle.cloud(cx=-30 cy=30 r=15)
        //- circle.cloud(cx=-25 cy=10 r=15)
        //- circle.cloud(cx=-7 cy=15 r=15)
    .dayweather
      h3 
      svg(viewbox="-50 -50 100 100")
        //- circle.sun(cx=0 cy=0 r=25)
    .dayweather
      h3 
      svg(viewbox="-50 -50 100 100")
        //- circle.sun(cx=0 cy=0 r=25)
    .dayweather
      h3 
      svg(viewbox="-50 -50 100 100")
        //- circle.sun(cx=0 cy=0 r=25)
    .dayweather
      h3 
      svg(viewbox="-50 -50 100 100")
        //- circle.sun(cx=0 cy=0 r=25)
    .dayweather
      h3 
      svg(viewbox="-50 -50 100 100")
        //- circle.sun(cx=0 cy=0 r=25)


/*Downloaded from https://www.codeseek.co/nonumpa/project-3-sky-box-with-data-KmVVrx */
    $color_white: #f3f3f3
$color_yellow: #FFD633
$color_black: #333
$color_blue_start: #19283D
$color_blue_end: #1D678F
$color_rain: #4DACFF
$color_white_cloud: #f2f9fe
$color_grey_cloud: #ccc

@mixin size($w,$h)
  width: $w
  height: $h
  
*
  position: relative
  font-family: 'Hind Vadodara','微軟正黑體'
  // border: solid 1px black
  // background-color: #222
html, body
  +size(100%, 100%)
  padding: 0px
  margin: 0px
  background-color: #222
  display: flex
  justify-content: center
  align-items: center
  
.outline
  width: 50%
  max-width: 400px
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2), 0px 25px 60px -10px rgba(0,0,0,0.3)
  border-radius: 5px
  overflow: hidden
  transition-duration: 2s
  cursor: pointer
  // --------------for hover effect
  // &:hover
  //   & .bottom
  //     height: 100px
  //   & .dayweather
  //     opacity: 1
  //     top: 0px
.top
  background: linear-gradient(20deg,$color_blue_start 0%,$color_blue_end 95%)
  background-size: 100% 300%
  height: 330px
  animation: daylight 5s linear both
  transition-duration: 0.5s
  border-radius: 5px 5px 0 0 
  @keyframes daylight
    0%
      background-position: 100% 30%
    100%
      background-position: 100% 100%
  .cloud
    //create a rectangle and let its corner to be round
    +size(100px, 36px)
    position: absolute
    right: 50px
    bottom: 40px
    border-radius: 20px
    background-color: $color_white_cloud
    z-index: 50
    transition-duration: 0.5s
    &:before, &:after
      +size(50px, 50px)
      // they need a content to show up
      content: ""
      // border: solid black 1px
      display: block
      border-radius: 100%
      position: absolute
      background-color: $color_white_cloud
      z-index: 1
    &:before
      right: 16px
      bottom: 10px
    &:after
      left: 12px
      bottom: 16px
    animation: cloudrift 3s infinite

  @keyframes cloudrift
    0%
      transform: translateY(0px)
    50%
      transform: translateY(-10px)
    100%
      transform: translateY(00px)
    
  .sun
    //create a rectangle and let its corner to be round
    +size(55px, 55px)
    position: absolute
    right: 75px
    bottom: 45px
    border-radius: 100px
    background-color: $color_yellow
    z-index: 49
    transition-duration: 0.5s
  .sunstroke1
    // +size(6px, 6px)
    // border: solid 1px black
    position: absolute
    left: 50%
    top: 50%
    transform: translateX(-50%) translateY(-50%) rotate(-0deg)
    // transform: rotate(-0deg)
    z-index: 51
    transition-duration: 0.5s
    &:before, &:after
      border: solid 1px black
      +size(6px, 16px)
      // they need a content to show up
      content: ""
      // border: solid black 1px
      display: block
      position: absolute
      left: 50%
      top: calc(50% - 42px)
      transform: translateX(calc(-50% )) translateY(calc(-50%))
      background-color: $color_yellow
      z-index: -1
    &:before
      position: absolute
    &:after
      position: absolute
      transform: translateX(calc(-50%)) translateY(calc(-50% + 84px))
  .sunstroke2
    // +size(6px, 6px)
    // border: solid 1px black
    position: absolute
    left: 50%
    top: 50%
    transform: translateX(-50%) translateY(-50%) rotate(-90deg)
    // transform: rotate(-0deg)
    z-index: 51
    transition-duration: 0.5s
    &:before, &:after
      border: solid 1px black
      +size(6px, 16px)
      // they need a content to show up
      content: ""
      // border: solid black 1px
      display: block
      position: absolute
      left: 50%
      top: calc(50% - 42px)
      transform: translateX(calc(-50% )) translateY(calc(-50%))
      background-color: $color_yellow
      z-index: -1
    &:before
      position: absolute
    &:after
      position: absolute
      transform: translateX(calc(-50%)) translateY(calc(-50% + 84px))
  .sunstroke3
    // +size(6px, 6px)
    // border: solid 1px black
    position: absolute
    left: 50%
    top: 50%
    transform: translateX(-50%) translateY(-50%) rotate(-45deg)
    // transform: rotate(-0deg)
    z-index: 51
    transition-duration: 0.5s
    &:before, &:after
      border: solid 1px black
      +size(6px, 16px)
      // they need a content to show up
      content: ""
      // border: solid black 1px
      display: block
      position: absolute
      left: 50%
      top: calc(50% - 42px)
      transform: translateX(calc(-50% )) translateY(calc(-50%))
      background-color: $color_yellow
      z-index: -1
    &:before
      position: absolute
    &:after
      position: absolute
      transform: translateX(calc(-50%)) translateY(calc(-50% + 84px))
  .sunstroke4
    // +size(6px, 6px)
    // border: solid 1px black
    position: absolute
    left: 50%
    top: 50%
    transform: translateX(-50%) translateY(-50%) rotate(-135deg)
    // transform: rotate(-0deg)
    z-index: 51
    transition-duration: 0.5s
    &:before, &:after
      border: solid 1px black
      +size(6px, 16px)
      // they need a content to show up
      content: ""
      // border: solid black 1px
      display: block
      position: absolute
      left: 50%
      top: calc(50% - 42px)
      transform: translateX(calc(-50% )) translateY(calc(-50%))
      background-color: $color_yellow
      z-index: -1
    &:before
      position: absolute
    &:after
      position: absolute
      transform: translateX(calc(-50%)) translateY(calc(-50% + 84px))
.text
  display: inline-block
  position: absolute
  bottom: 25px
  left: 25px
  color: $color_white
  & .temperature
    font-size: 400%
    // color: $color_white
  & .infos
    opacity: 0.7
  // color: $color_white
.bottom
  // --------------for hover effect
  // height: 10px
  
  //origin
  height: 100px
  
  background-color: $color_white
  transition-duration: 1s
  border-radius: 0px 0px 5px 5px
  box-shadow: 0px 0px 30px rgba(0,0,0,0.3)
  display: flex
  justify-content: center
  .dayweather
    padding: 2px
    margin-top: 10px
    width: calc(100% / 7 - 5px)
    box-sizing: border-box
    text-align: center
    transition: 0.5s
    
    // --------------for hover effect
    // the two value below will be changed when hover
    // opacity: 0
    // top: 20px
    
    //origin
    top: 0px
    
    h3
      margin: 3px
      font-size: 80%
      letter-spacing: 1px
      font-weight: 100
    svg
      width: 100%
      height: 40px
      max-width: 40px
      & .sun
        fill: $color_yellow
        stroke-width: 30px
        stroke: rgba($color_yellow,0.5)
        stroke-dasharray: 5px
      
      & .rain
        stroke: $color_rain
        stroke-width: 5px

      & .cloud
        fill: $color_grey_cloud

  .dayweather:nth-child(1)
    transition-delay: 0.2s
  .dayweather:nth-child(2)
    transition-delay: 0.3s
  .dayweather:nth-child(3)
    transition-delay: 0.4s
  .dayweather:nth-child(4)
    transition-delay: 0.5s
  .dayweather:nth-child(5)
    transition-delay: 0.6s
  .dayweather:nth-child(6)
    transition-delay: 0.7s
  .dayweather:nth-child(7)
    transition-delay: 0.8s

.rain
  +size(3px, 14px)
  position: absolute
  left: 45px
  bottom: -2px
  background-color: $color_rain
  animation: raindrop 1s infinite linear
  transition-duration: 0.5s
.rain1
  left: 75px
  animation-delay: -0.4s
.rain2
  left: 20px
  animation-delay: -0.7s
  
@keyframes raindrop
  0%
    transform: translateY(0px)
  100%
    transform: translateY(40px)
    opacity: 0
  
.moon
  +size(50px, 50px)
  position: absolute
  top: 100px
  left: 50px
  border-radius: 100%
  // box-shadow: 35px 35px 0px 0px $color_yellow
  animation: moonmove 20s infinite
  animation-timing-function: linear
  transition-duration: 0.5s
@keyframes moonmove
  0%
    transform: translateX(-36px) translateY(36px)
    box-shadow: 36px -36px 0 0 $color_yellow
  100%
    transform: translateX(36px) translateY(-36px)
    box-shadow: -36px 36px 0 0 $color_yellow
  
.tempsvg
  width: 100%
  & polyline
    // default color is white it may be invisible without give it a specify color
    stroke: white
    fill: none
    stroke-width: 1px
    opacity: 0.7
    // opacity: 0.05
    transition: 0.5s 0.2s
  & circle
    fill: white
    opacity: 0.9
    // opacity: 0.05
    transition: 0.5s 0s
  & text
    fill: $color_white
    opacity: 0.9
    // opacity: 0
    transition: 0.5s 0.5s
    transform: translateX(-8px) translateY(25px)
    font-size: 10px
    
label
  cursor: pointer
    
#switch_night
  display: none
    
#switch_night:checked+.top
  background-color: $color_white
  .tempsvg
    text,circle
      opacity: 0.9
    polyline
      opacity: 0.7
    text
      transform: translateX(-8px) translateY(20px)
  .cloud
    opacity: 0.1
  .moon
    opacity: 0.1
    
  .infos,.temperature
    


/*Downloaded from https://www.codeseek.co/nonumpa/project-3-sky-box-with-data-KmVVrx */
    var bottom;
var mSVG;
var json = '{"latitude":25.0118,"longitude":121.5187,"timezone":"Asia/Taipei","offset":8,"currently":{"time":1492686290,"summary":"Clear","icon":"clear-night","precipIntensity":0.0012,"precipProbability":0.02,"precipType":"rain","temperature":80.62,"apparentTemperature":85.16,"dewPoint":72.94,"humidity":0.78,"windSpeed":5.01,"windBearing":274,"visibility":6.21,"cloudCover":0.09,"pressure":1008.63,"ozone":284.81},"daily":{"summary":"Light rain tomorrow through Thursday, with temperatures peaking at 89簞F on Wednesday.","icon":"rain","data":[{"time":1492617600,"summary":"Partly cloudy overnight.","icon":"partly-cloudy-night","sunriseTime":1492637309,"sunsetTime":1492683568,"moonPhase":0.78,"precipIntensity":0.0015,"precipIntensityMax":0.0035,"precipIntensityMaxTime":1492617600,"precipProbability":0.12,"precipType":"rain","temperatureMin":73.45,"temperatureMinTime":1492635600,"temperatureMax":85.26,"temperatureMaxTime":1492660800,"apparentTemperatureMin":73.45,"apparentTemperatureMinTime":1492635600,"apparentTemperatureMax":95.47,"apparentTemperatureMaxTime":1492660800,"dewPoint":71.23,"humidity":0.77,"windSpeed":3.62,"windBearing":275,"visibility":5.54,"cloudCover":0.13,"pressure":1009.9,"ozone":278.37},{"time":1492704000,"summary":"Light rain starting in the afternoon.","icon":"rain","sunriseTime":1492723657,"sunsetTime":1492769996,"moonPhase":0.81,"precipIntensity":0.0063,"precipIntensityMax":0.0138,"precipIntensityMaxTime":1492772400,"precipProbability":0.55,"precipType":"rain","temperatureMin":67.33,"temperatureMinTime":1492786800,"temperatureMax":85.2,"temperatureMaxTime":1492740000,"apparentTemperatureMin":67.33,"apparentTemperatureMinTime":1492786800,"apparentTemperatureMax":90.76,"apparentTemperatureMaxTime":1492740000,"dewPoint":68.62,"humidity":0.76,"windSpeed":4.95,"windBearing":333,"cloudCover":0.64,"pressure":1009.8,"ozone":281.22},{"time":1492790400,"summary":"Light rain throughout the day.","icon":"rain","sunriseTime":1492810005,"sunsetTime":1492856425,"moonPhase":0.84,"precipIntensity":0.0113,"precipIntensityMax":0.0161,"precipIntensityMaxTime":1492815600,"precipProbability":0.57,"precipType":"rain","temperatureMin":62.67,"temperatureMinTime":1492873200,"temperatureMax":69.45,"temperatureMaxTime":1492790400,"apparentTemperatureMin":62.67,"apparentTemperatureMinTime":1492873200,"apparentTemperatureMax":69.45,"apparentTemperatureMaxTime":1492790400,"dewPoint":55.49,"humidity":0.72,"windSpeed":10.08,"windBearing":31,"cloudCover":0.93,"pressure":1013.74,"ozone":279},{"time":1492876800,"summary":"Partly cloudy throughout the day.","icon":"partly-cloudy-day","sunriseTime":1492896354,"sunsetTime":1492942854,"moonPhase":0.88,"precipIntensity":0.0025,"precipIntensityMax":0.0069,"precipIntensityMaxTime":1492876800,"precipProbability":0.33,"precipType":"rain","temperatureMin":62.82,"temperatureMinTime":1492876800,"temperatureMax":76.95,"temperatureMaxTime":1492927200,"apparentTemperatureMin":62.82,"apparentTemperatureMinTime":1492876800,"apparentTemperatureMax":76.95,"apparentTemperatureMaxTime":1492927200,"dewPoint":56.48,"humidity":0.65,"windSpeed":11.15,"windBearing":82,"cloudCover":0.51,"pressure":1015.69,"ozone":287.49},{"time":1492963200,"summary":"Mostly cloudy throughout the day.","icon":"partly-cloudy-day","sunriseTime":1492982704,"sunsetTime":1493029283,"moonPhase":0.91,"precipIntensity":0.0022,"precipIntensityMax":0.003,"precipIntensityMaxTime":1492992000,"precipProbability":0.1,"precipType":"rain","temperatureMin":68.14,"temperatureMinTime":1492977600,"temperatureMax":81.85,"temperatureMaxTime":1493010000,"apparentTemperatureMin":68.14,"apparentTemperatureMinTime":1492977600,"apparentTemperatureMax":83.64,"apparentTemperatureMaxTime":1493010000,"dewPoint":62.44,"humidity":0.67,"windSpeed":8.22,"windBearing":110,"cloudCover":0.58,"pressure":1015.13,"ozone":287.34},{"time":1493049600,"summary":"Drizzle in the evening.","icon":"rain","sunriseTime":1493069055,"sunsetTime":1493115712,"moonPhase":0.95,"precipIntensity":0.0029,"precipIntensityMax":0.0053,"precipIntensityMaxTime":1493114400,"precipProbability":0.23,"precipType":"rain","temperatureMin":72.78,"temperatureMinTime":1493064000,"temperatureMax":84.44,"temperatureMaxTime":1493096400,"apparentTemperatureMin":72.78,"apparentTemperatureMinTime":1493064000,"apparentTemperatureMax":87.98,"apparentTemperatureMaxTime":1493096400,"dewPoint":67.21,"humidity":0.7,"windSpeed":3.48,"windBearing":110,"cloudCover":0.66,"pressure":1012.6,"ozone":277.07},{"time":1493136000,"summary":"Breezy in the afternoon and light rain starting in the afternoon.","icon":"rain","sunriseTime":1493155406,"sunsetTime":1493202142,"moonPhase":0.98,"precipIntensity":0.009,"precipIntensityMax":0.0265,"precipIntensityMaxTime":1493200800,"precipProbability":0.64,"precipType":"rain","temperatureMin":66.95,"temperatureMinTime":1493218800,"temperatureMax":89.23,"temperatureMaxTime":1493175600,"apparentTemperatureMin":66.95,"apparentTemperatureMinTime":1493218800,"apparentTemperatureMax":93.04,"apparentTemperatureMaxTime":1493175600,"dewPoint":66.31,"humidity":0.73,"windSpeed":6.26,"windBearing":344,"cloudCover":0.86,"pressure":1012.05,"ozone":274.77},{"time":1493222400,"summary":"Light rain throughout the day.","icon":"rain","sunriseTime":1493241759,"sunsetTime":1493288572,"moonPhase":0.03,"precipIntensity":0.0086,"precipIntensityMax":0.0102,"precipIntensityMaxTime":1493305200,"precipProbability":0.51,"precipType":"rain","temperatureMin":63.84,"temperatureMinTime":1493287200,"temperatureMax":68.44,"temperatureMaxTime":1493272800,"apparentTemperatureMin":63.84,"apparentTemperatureMinTime":1493287200,"apparentTemperatureMax":68.44,"apparentTemperatureMaxTime":1493272800,"dewPoint":58.06,"humidity":0.78,"windSpeed":13.3,"windBearing":54,"cloudCover":0.98,"pressure":1017.38,"ozone":277.29}]}}';
var darkSkyData = JSON.parse(json);
var DAY = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
// var offset = 0;
// var currentDate = new Date (Date.now()+ 60*offset*60*1000);
var currentDate = new Date();
var time = {
  day: parseToZhDay(currentDate.getDay()),
  hourmin: parseToHourMin(currentDate)
}
// console.log(currentDate.toUTCString());
// console.log(currentDate.getDay()+" "+currentDate.getHours()+":"+currentDate.getMinutes());

//darksky.net/ 不能access cross domain,所以使用 jsonp 存取
// $.ajax({
//     url: "https://api.darksky.net/forecast/{API_KEY}/25.0118,121.5187?exclude=hourly,flags",
//     dataType: "jsonp",
//     jsonpCallback: "jsonpCallback",
//     success: function (result) {
//       console.log(result); 
//       darkSkyData = result;
//       Init();
//     }
// });
Init();
function Init(){
  //°F to °C
  darkSkyData.currently.temperature = (parseInt(darkSkyData.currently.temperature) -32 )/ 1.8;
  //set temperature
  document.getElementsByClassName('temperature')[0].textContent = darkSkyData.currently.temperature.toFixed(1) + "°C";
  //set time
  document.getElementsByClassName('time')[0].textContent = time.day+"  "+time.hourmin;
  //set current weather icon (top)
  setCurrentWeatherIcon();
  //set daily weather icon (bottom)
  setDailyWeatherIcon();
  //set daily tempature (top line)
  setDailyTempature();
}

// function getLocation() {
//     if (navigator.geolocation) {
//         navigator.geolocation.getCurrentPosition(showPosition);
//     } else { 
//         x.innerHTML = "Geolocation is not supported by this browser.";
//     }
// }

// function showPosition(position) {
//     x.innerHTML = "Latitude: " + position.coords.latitude + 
//     "<br>Longitude: " + position.coords.longitude;
// }

function parseToZhDay(day){
  
  // 設定bottom的7日氣象的星期
  var dayweathers = document.getElementsByClassName('dayweather');
  for(var i=0,idx=day;i < DAY.length; i++){
    // 從今天開始往後一個一個從DAY陣列拿出來
    dayweathers[i].getElementsByTagName('h3')[0].textContent = DAY[idx++];
    // console.log(dayweathers[i].getElementsByTagName('h3'));
    // 到底了就返回陣列0開始拿
    if(idx >= DAY.length)
      idx = 0;
  }
  
  //把星期從系統給的數字轉成中文
  switch(day){
    case 0:
      return "星期日";
    case 1:
      return "星期一";
    case 2:
      return "星期二";
    case 3:
      return "星期三";
    case 4:
      return "星期四";
    case 5:
      return "星期五";
    case 6:
      return "星期六";
  }
}
function parseToHourMin(currentDate){
  //把系統給的時間轉換成我想顯示的樣子
    return currentDate.getHours() + ":" + ((currentDate.getMinutes() < 10) ? "0" + currentDate.getMinutes() : currentDate.getMinutes());
}

function setDailyTempature(){
  // 畫上面的溫度點和線
  var top = document.getElementsByClassName('top')[0];
  var texts = top.getElementsByTagName('text');
  var circles = top.getElementsByTagName('circle');
  var polyline = top.getElementsByTagName('polyline');
  var avgTemps = [];
  
  for(var i=0; i<8 ; i++){
    //api提供的是最高/最低溫
    var max = ((parseInt(darkSkyData.daily.data[i].temperatureMax) -32 )/ 1.8);
    var min = ((parseInt(darkSkyData.daily.data[i].temperatureMin) -32 )/ 1.8);
    //取他們平均當作當天的溫度, 但是這數字其實沒什麼意義.. 只是為了畫線而做的
    var avg = ((max+min)/2).toFixed(); //(toFixed(1)=保留小數點後面1位,沒寫=0)
    avgTemps.push(avg);
  }
  //find max/min value in array, reference - http://stackoverflow.com/questions/1669190/javascript-min-max-array-values
  // console.log(Math.max(...avgTemps));
  // 取最高跟最低的間隔與circle的間隔比值 比3大:90/40 小於等於3:75/45
  var max = Math.max(...avgTemps);
  var min = Math.min(...avgTemps);
  var duration = max-min;
  var maxPos;
  var minPos;
  if(duration>3){
    // svg y軸 正負跟一般的坐標系(Cartesian coordinate system)顛倒
    maxPos = 40;
    minPos = 90;
  }
  else{
    maxPos = 45;
    minPos = 75;
  }
  
  var points ='';
  for(var i=0; i<7 ; i++){
    var pos = minPos-(((avgTemps[i] - min) * ((minPos-maxPos)/duration))); 
    // 設定點的高度
    circles[i].setAttribute("cy",pos);
    texts[i].setAttribute("y",pos);
    // 顯示溫度在畫面上
    texts[i].textContent = avgTemps[i] + "°C";
    // polyline的各點座標
    points += " "+circles[i].getAttribute("cx")+","+circles[i].getAttribute("cy");
  }
  // 設定polyline的點
  polyline[0].setAttribute("points",points);
}

function setCurrentWeatherIcon() {
  // 根據api給的 icon info 顯示目前天氣(決定要新增什麼div class上去)
    switch(darkSkyData.currently.icon){
      case "clear-day":
      case "clear-night":
        $("<div>").addClass('sun').appendTo($(".top"));
        $("<div>").addClass('sunstroke1').appendTo($(".sun"));
        $("<div>").addClass('sunstroke2').appendTo($(".sun"));
        $("<div>").addClass('sunstroke3').appendTo($(".sun"));
        $("<div>").addClass('sunstroke4').appendTo($(".sun"));
        break;
      case "cloudy":
      case "fog":
      case "wind":
        $("<div>").addClass('cloud').appendTo($(".top"));
        break;
      case "rain":
        $("<div>").addClass('cloud').appendTo($(".top"));
        $("<div>").addClass('rain').appendTo($(".cloud"));
        $("<div>").addClass('rain rain1').appendTo($(".cloud"));
        $("<div>").addClass('rain rain2').appendTo($(".cloud"));
        break;
      case "partly-cloudy-day":
      case "partly-cloudy-night":
        $("<div>").addClass('sun').appendTo($(".top"));
        $("<div>").addClass('sunstroke1').appendTo($(".sun"));
        $("<div>").addClass('sunstroke2').appendTo($(".sun"));
        $("<div>").addClass('sunstroke3').appendTo($(".sun"));
        $("<div>").addClass('sunstroke4').appendTo($(".sun"));
        
        $("<div>").addClass('cloud').css('right', "80px").css('bottom', "20px").appendTo($(".top"));
        break;
      case "sleet":
        //霾,顯示骷髏頭
        break;
      default:
        break;
    }
}

function setDailyWeatherIcon(){
  // 根據api給的 icon info 顯示當日天氣(決定要新增什麼svg上去)
  // Get svg element
  bottom = document.getElementsByClassName('bottom')[0];
  mSVG = bottom.getElementsByTagName('svg');
  // set dayweather
  for(var i=0; i<7 ; i++){
    console.log(darkSkyData.daily.data[i].icon);
    switch(darkSkyData.daily.data[i].icon){
      case "clear-day":
      case "clear-night":
        AddSunSVG(i);
        break;
      case "cloudy":
      case "fog":
      case "wind":
        AddCloudSVG(i);
        break;
      case "rain":
        AddRainSVG(i);
        break;
      case "partly-cloudy-day":
      case "partly-cloudy-night":
        AddSunCloudSVG(i);
        break;
      case "sleet":
        //霾,顯示骷髏頭
        break;
      default:
        break;
    }
  }
}

//Sun
function AddSunSVG(idx){
  var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a circle in SVG's namespace
  newElement.setAttribute("class","sun"); //Set circle's data
  newElement.setAttribute("cx","0"); //Set circle's data
  newElement.setAttribute("cy","0"); //Set circle's data
  newElement.setAttribute("r","25"); //Set circle's data
  mSVG[idx].appendChild(newElement);
}
//Cloud
function AddCloudSVG(idx){
  AddCloudChildSVG(idx,"15","15","15");
  AddCloudChildSVG(idx,"-0","15","17");
  AddCloudChildSVG(idx,"-15","15","15");
  AddCloudChildSVG(idx,"-10","-5","15");
  AddCloudChildSVG(idx,"8","0","15");
}
//Rain
function AddRainSVG(idx){
  AddRainChildSVG(idx,"-14","4","-14","26");
  AddRainChildSVG(idx,"0","-2","0","22");
  AddRainChildSVG(idx,"13","15","13","30");
  AddCloudChildSVG(idx,"15","15","15");
  AddCloudChildSVG(idx,"-0","15","17");
  AddCloudChildSVG(idx,"-15","15","15");
  AddCloudChildSVG(idx,"-10","-5","15");
  AddCloudChildSVG(idx,"8","0","15");
}
//SunCloud
function AddSunCloudSVG(idx){
  AddSunSVG(idx);
  AddCloudChildSVG(idx,"-0","30","15");
  AddCloudChildSVG(idx,"-15","30","17");
  AddCloudChildSVG(idx,"-30","30","15");
  AddCloudChildSVG(idx,"-25","10","15");
  AddCloudChildSVG(idx,"-7","15","15");
}

function AddCloudChildSVG(idx,cx,cy,r){
  var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a circle in SVG's namespace
  newElement.setAttribute("class","cloud"); //Set circle's data
  newElement.setAttribute("cx",cx); //Set circle's data
  newElement.setAttribute("cy",cy); //Set circle's data
  newElement.setAttribute("r",r); //Set circle's data
  mSVG[idx].appendChild(newElement);
}
function AddRainChildSVG(idx,x1,y1,x2,y2){
  var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'line'); //Create a line in SVG's namespace
  newElement.setAttribute("class","rain"); //Set line's data
  newElement.setAttribute("x1",x1); //Set line's data
  newElement.setAttribute("y1",y1); //Set line's data
  newElement.setAttribute("x2",x2); //Set line's data
  newElement.setAttribute("y2",y2); //Set line's data
  mSVG[idx].appendChild(newElement);
}





Comments