css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="backplate">
            
  <div id="back_left">
    <h2 id="location"></h2>
                                
    <p id="tempHum" class="celsius"></p>
    <p id="tempHum" class="farh hide"></p>
    <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTYuMDA4IDQ5Ni4wMDgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ5Ni4wMDggNDk2LjAwODsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxnPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzA0LjAwMiwzMDQuNDY0VjI4OGgtMTZ2MjUuNTZsMy45OTIsMi4zMTJjMjcuMTQ0LDE1LjcyOCw0NC4wMDgsNDQuODk2LDQ0LjAwOCw3Ni4xMjggICAgIGMwLDI0LjE0NC05LjU4NCw0Ni42NjQtMjYuOTg0LDYzLjQwOGMtMTcuMzkyLDE2Ljc0NC00MC4yMjQsMjUuNTUyLTY0LjQ3MiwyNC41MjhjLTQ1LjU2LTEuNzM2LTgzLjQ4LTQwLjI2NC04NC41Mi04NS44NjQgICAgIGMtMC43MzYtMzIuMDg4LDE2LjEyLTYyLjA0OCw0My45ODQtNzguMTkybDMuOTkyLTIuMzJWNTZjMC0yMi4wNTYsMTcuOTQ0LTQwLDQwLTQwYzIyLjA1NiwwLDQwLDE3Ljk0NCw0MCw0MHY1NmgxNlY1NiAgICAgYzAtMzAuODgtMjUuMTItNTYtNTYtNTZzLTU2LDI1LjEyLTU2LDU2djI0OC40NTZjLTMwLjUzNiwxOS41NTItNDguODA4LDUzLjYwOC00Ny45NjgsODkuOTc2ICAgICBjMS4yMzIsNTMuOTA0LDQ2LjA0OCw5OS40MzIsOTkuOTA0LDEwMS40OTZjMS4zNjgsMC4wNDgsMi43MzYsMC4wOCw0LjEwNCwwLjA4YzI3LjA0OCwwLDUyLjUwNC0xMC4yNCw3Mi4wNzItMjkuMDcyICAgICBjMjAuNTYtMTkuNzkyLDMxLjg4OC00Ni40MDgsMzEuODg4LTc0LjkzNkMzNTIuMDAyLDM1Ni42NCwzMzMuNzIyLDMyMy41MTIsMzA0LjAwMiwzMDQuNDY0eiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNMjI0LjAwMiw5NnYyMjguMTc2Yy0yOC41NTIsMTAuMDY0LTQ4LDM3LjEyLTQ4LDY3LjgyNGMwLDM5LjY5NiwzMi4zMDQsNzIsNzIsNzJzNzItMzIuMzA0LDcyLTcyICAgICBjMC0zMC43MDQtMTkuNDQ4LTU3Ljc2LTQ4LTY3LjgyNFY5NkgyMjQuMDAyeiBNMzA0LjAwMiwzOTJjMCwzMC44OC0yNS4xMiw1Ni01Niw1NnMtNTYtMjUuMTItNTYtNTYgICAgIGMwLTI1LjUxMiwxNy4yNzItNDcuNzg0LDQyLTU0LjE2bDYtMS41NDRWMTEyaDE2djIyNC4yOTZsNiwxLjU0NEMyODYuNzMsMzQ0LjIxNiwzMDQuMDAyLDM2Ni40ODgsMzA0LjAwMiwzOTJ6IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI4OC4wMDIiIHk9IjI1NiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI4OC4wMDIiIHk9IjIyNCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI4OC4wMDIiIHk9IjE5MiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI4OC4wMDIiIHk9IjE2MCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI4OC4wMDIiIHk9IjEyOCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />
    <label class="switch"> 
      <input id="unitSwitch" type="checkbox">
      <div class="slider round"></div>
    </label>
  </div>
            
  <div id="back_right">
    <div id="icon_plate"></div>
    <p id="description"></p> 
  </div>
            
</div>
            
          
!
            
              
html, body {
    height: 100%;
    font-family: 'Fira Sans', sans-serif;
}

#backplate {
    min-width: 800px;
    min-height: 500px;
    width: 40%;
    height: 45%;
    background: rgba(36, 36, 36, 0.85);
    border-bottom: 1px solid black;
    box-shadow: 0 10px 30px black;
    
    display: flex;
    flex-flow: row nowrap;
    
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
}

#back_left {
    width: 50%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #E8CB58;
    padding-right: 10px;
}

#location {
    width: 100%;
    text-align: center;
    font-size: 2em;
    font-weight: 600;
    color: #E3493B;
}

#tempHum {
    position: relative;
    left: 25px;
    width: 70%;
    line-height: 2.5;
    font-size: 1.1em;
    letter-spacing: 0.05em;
    color: #A9DDD9;
} 
#back_left img {
    color: #A9DDD9;
    position: relative;
    top: -43px;
}

.switch { /* box around the slider */
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    
    top: -43px;
}
.switch input {
    display: none;    /* hides default checkbox */           
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(50, 50, 50, 1);
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content:  "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider {
    background-color: #A9DDD9;
}
input:focus + .slider {
    box-shadow: 0 0 1px #99D4E8;
}
input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(22px);
}
.slider.round {
    border-radius: 20px;
}
.slider.round:before {
    border-radius: 50%;
}

#back_right {
    width: 50%;
    position: relative;
}

#icon_plate {
    height: 150px;
    width: 150px;
    background-color: rgba(61, 61, 61, 0.7);
    
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #99D4E8;
    border-radius: 100%;
}

#icon_plate img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0; 
    right: 0; 
    margin: auto;
    width: 50%;
    height: auto;
}

#description {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 10%;
    font-size: 1.1em;
    letter-spacing: 0.05em;
    color: #99D4E8;
}

.hide {
    display: none;
    visibility: hidden;
}


/* The mist icon was created by  Zlatko Najdenovski and the rest of the icons were created by Eucalyp.*/


            
          
!
            
              function setIcon(json, iconID) {
    var icon = $('#icon_plate');
    
    switch (iconID) {
        case '01d':
        case '01n': {
            // sun
            icon.html('<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTYgNDk2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTYgNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPGc+CgkJCTxyZWN0IHg9IjE1Mi45OTQiIHk9IjU4LjkyMSIgdHJhbnNmb3JtPSJtYXRyaXgoMC4zODI3IDAuOTIzOSAtMC45MjM5IDAuMzgyNyAxNjguNjE3NiAtMTE4LjUxNDUpIiB3aWR0aD0iNDAuMDAxIiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjQ2LjkiIHk9IjE2NC45NzkiIHRyYW5zZm9ybT0ibWF0cml4KDAuOTIzOSAwLjM4MjcgLTAuMzgyNyAwLjkyMzkgNzEuMjkgLTEyLjQzNDYpIiB3aWR0aD0iNDAuMDAxIiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjQ2Ljk0NyIgeT0iMzE1LjA0OCIgdHJhbnNmb3JtPSJtYXRyaXgoMC45MjM5IC0wLjM4MjcgMC4zODI3IDAuOTIzOSAtMTE4LjUzMSA1MC4yMTE2KSIgd2lkdGg9IjQwLjAwMSIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQkKCQkJCTxyZWN0IHg9IjE2NC45NjYiIHk9IjQwOS4xMTIiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjkyMzggLTAuMzgyOCAwLjM4MjggLTAuOTIzOCAxNjguNDg3MiA4OTEuNzQ5MSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIzOS45OTkiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJCgkJCQk8cmVjdCB4PSIzMDMuMDMxIiB5PSI0MjEuMDM2IiB0cmFuc2Zvcm09Im1hdHJpeCgtMC4zODI3IC0wLjkyMzkgMC45MjM5IC0wLjM4MjcgNTAuMjc1OCA4OTEuNjY1NSkiIHdpZHRoPSI0MC4wMDEiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJCgkJCQk8cmVjdCB4PSI0MDkuMDg4IiB5PSIzMTUuMDE4IiB0cmFuc2Zvcm09Im1hdHJpeCgtMC45MjM5IC0wLjM4MjcgMC4zODI3IC0wLjkyMzkgNzAxLjg5OCA3ODUuNjU1OSkiIHdpZHRoPSI0MC4wMDEiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJCgkJCQk8cmVjdCB4PSI0MDkuMDU0IiB5PSIxNjUuMDExIiB0cmFuc2Zvcm09Im1hdHJpeCgtMC45MjM5IDAuMzgyNyAtMC4zODI3IC0wLjkyMzkgODkxLjY1ODUgMTY4LjY1NzQpIiB3aWR0aD0iNDAuMDAxIiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjMxNS4wMDEiIHk9IjQ2Ljg5NSIgdHJhbnNmb3JtPSJtYXRyaXgoMC45MjM4IDAuMzgyOCAtMC4zODI4IDAuOTIzOCA1MC4yMTIgLTExOC41NTI5KSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjM5Ljk5OSIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNMjQ4LDg4Yy04OC4yMjQsMC0xNjAsNzEuNzc2LTE2MCwxNjBzNzEuNzc2LDE2MCwxNjAsMTYwczE2MC03MS43NzYsMTYwLTE2MFMzMzYuMjI0LDg4LDI0OCw4OHogTTI0OCwzOTIgICAgIGMtNzkuNCwwLTE0NC02NC42LTE0NC0xNDRzNjQuNi0xNDQsMTQ0LTE0NHMxNDQsNjQuNiwxNDQsMTQ0UzMyNy40LDM5MiwyNDgsMzkyeiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIyNDAiIHdpZHRoPSIxNiIgaGVpZ2h0PSI3MiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSI2Mi4wOTciIHk9IjkwLjA5NiIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxIDAuNzA3MSAtMC43MDcxIDAuNzA3MSA5OC4wOTYzIC00MC42MzM0KSIgd2lkdGg9IjcxLjk5OSIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB5PSIyNDAiIHdpZHRoPSI3MiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQkKCQkJCTxyZWN0IHg9IjkwLjA5MSIgeT0iMzYxLjkxNSIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuNzA3MSAtMC43MDcxIDAuNzA3MSAtMC43MDcxIC0xMTMuOTE1NyA3NDguNjQzKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjcxLjk5OSIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIyNDAiIHk9IjQyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjcyIiBmaWxsPSIjOTlkNGU4Ii8+CgkJCQoJCQkJPHJlY3QgeD0iMzYxLjg4MSIgeT0iMzg5LjkxNSIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuNzA3MSAtMC43MDcxIDAuNzA3MSAtMC43MDcxIDM5Ny44NTYyIDk2MC42MjgxKSIgd2lkdGg9IjcxLjk5OSIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSI0MjQiIHk9IjI0MCIgd2lkdGg9IjcyIiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjM4OS45MTEiIHk9IjYyLjA5MSIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxIDAuNzA3MSAtMC43MDcxIDAuNzA3MSAxODUuOTA2NyAtMjUyLjYzNTcpIiB3aWR0aD0iMTYiIGhlaWdodD0iNzEuOTk5IiBmaWxsPSIjOTlkNGU4Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />');
            break;
        }
        case '02d':
        case '02n':  {
            // partially sunny
            icon.html('<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTYgNDk2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTYgNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MTMuOTY4LDI1Ny4wOTZDNDAyLjk2OCwxOTIuMTg0LDM0Ni40NjQsMTQ0LDI4MCwxNDRjLTEyLjA1NiwwLTIzLjc3NiwxLjY0LTM0Ljk5Miw0LjYyNCAgICAgQzIyNS41MDQsMTIwLjY2NCwxOTQuMjcyLDEwNCwxNjAsMTA0Yy01Ny4zNDQsMC0xMDQsNDYuNjU2LTEwNCwxMDRjMCwyMy43Miw3Ljk2OCw0Ni4yNjQsMjIuNTc2LDY0LjYgICAgIEMzNC40OCwyNzcuMzM2LDAsMzE0LjY3MiwwLDM2MGMwLDQ4LjUyLDM5LjQ4LDg4LDg4LDg4aDMxMmM1Mi45MzYsMCw5Ni00My4wNjQsOTYtOTYgICAgIEM0OTYsMzA0LjQyNCw0NjAuNDY0LDI2My45MjgsNDEzLjk2OCwyNTcuMDk2eiBNNzIsMjA4YzAtNDguNTIsMzkuNDgtODgsODgtODhjMjcuNCwwLDUyLjU2OCwxMi41MzYsNjkuMTkyLDMzLjg5NiAgICAgYy0zNy4zNjgsMTUuMDU2LTY2Ljk0NCw0Ni4yOC03OS4xMzYsODYuMzc2QzE0OC4wMDgsMjQwLjA4OCwxNDUuOTg0LDI0MCwxNDQsMjQwYy0yMC4xMiwwLTM5LjEwNCw4LjYyNC01Mi41ODQsMjMuMDggICAgIEM3OC44NDgsMjQ3LjQ5Niw3MiwyMjguMjQ4LDcyLDIwOHogTTQwMCw0MzJIODhjLTM5LjcwNCwwLTcyLTMyLjMwNC03Mi03MnMzMi4yOTYtNzIsNzEuNjg4LTcyLjAwOGw1LjUzNiwwLjA0bDIuMzA0LTMuOTkyICAgICBDMTA1LjUzNiwyNjYuNzQ0LDEyNC4xMiwyNTYsMTQ0LDI1NmMzLjM1MiwwLDYuODU2LDAuMzM2LDEwLjQyNCwxLjAwOGw3LjQyNCwxLjRsMS44MjQtNy4zMzZDMTc2Ljk2LDE5Ny40NDgsMjI0LjgsMTYwLDI4MCwxNjAgICAgIGM2MC41MTIsMCwxMTEuNjcyLDQ1LjI4LDExOS4wMDgsMTA1LjMybDAuNTYsNC41OTJDMzk5Ljg0LDI3My4yNCw0MDAsMjc2LjYsNDAwLDI4MGMwLDY2LjE2OC01My44MzIsMTIwLTEyMCwxMjB2MTYgICAgIGM3NC45OTIsMCwxMzYtNjEuMDA4LDEzNi0xMzZjMC0yLjEyLTAuMTc2LTQuMi0wLjI3Mi02LjI5NkM0NTIuNDMyLDI4MS4wODgsNDgwLDMxMy43NjgsNDgwLDM1MiAgICAgQzQ4MCwzOTYuMTEyLDQ0NC4xMTIsNDMyLDQwMCw0MzJ6IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHk9IjIwMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI1MC45OSIgeT0iODkuMDEiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSAwLjcwNzEgLTAuNzA3MSAwLjcwNzEgMTUyLjkzODQgLTE1MS4yMDU1KSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjQwIiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjE1MiIgeT0iNDgiIHdpZHRoPSIxNiIgaGVpZ2h0PSI0MCIgZmlsbD0iIzk5ZDRlOCIvPgoJCQkKCQkJCTxyZWN0IHg9IjQwLjk4IiB5PSIxMDAuOTcxIiB0cmFuc2Zvcm09Im1hdHJpeCgwLjcwNzIgMC43MDcxIC0wLjcwNzEgMC43MDcyIDk0LjkwNzQgLTExLjIwNTgpIiB3aWR0aD0iNDAuMDAyIiBoZWlnaHQ9IjE2LjAwMSIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSI5Ny40ODEiIHk9Ijc4LjA0MyIgdHJhbnNmb3JtPSJtYXRyaXgoMC4zODI4IDAuOTIzOCAtMC45MjM4IDAuMzgyOCAxNDcuMDU5NCAtNDguMDM2NikiIHdpZHRoPSIyMy45OTkiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMjYuMDgyIiB5PSIxNDkuNTIxIiB0cmFuc2Zvcm09Im1hdHJpeCgwLjkyMzkgMC4zODI3IC0wLjM4MjcgMC45MjM5IDYzLjE4MDggLTIuNTgyOCkiIHdpZHRoPSIyNC4wMDEiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJCgkJCQk8cmVjdCB4PSIzMC4wMjgiIHk9IjI0Ni40NzUiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjM4MjggLTAuOTIzOCAwLjkyMzggLTAuMzgyOCAtMTg2LjIwMDggMzkyLjU1MzYpIiB3aWR0aD0iMTYiIGhlaWdodD0iMjMuOTk5IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjIwMi41MTIiIHk9Ijc0LjA1MyIgdHJhbnNmb3JtPSJtYXRyaXgoMC45MjM4IDAuMzgyOCAtMC4zODI4IDAuOTIzOCA0OC45Nzc0IC03NC4wMzE3KSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjIzLjk5OSIgZmlsbD0iIzk5ZDRlOCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />');
            break;
        }
        case '03n':
        case '03d':
        case '04d':
        case '04n': {
            // cloudy
            icon.html('<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTYgNDk2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTYgNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxMy45NjgsMjMzLjA5NmMtMTAuODMyLTYzLjkyLTY1LjgxNi0xMTEuNTEyLTEzMC45NDQtMTEyLjk2QzI2NS44OCw5MC4zMzYsMjM0LjUzNiw3MiwyMDAsNzIgICAgYy00MC45MzYsMC03Ny4xNjgsMjYuMDk2LTkwLjUyLDY0LjI4OGMtMjAuNjk2LTIuMTQ0LTQwLjIwOCw3LjQ2NC01MS42MjQsMjQuMDU2QzI1LjA4LDE2My40MjQsMCwxOTAuNiwwLDIyNCAgICBjMCwyMC4xMDQsOS40MjQsMzguNjE2LDI1LjA0LDUwLjYxNkM5LjU2OCwyOTAuNDg4LDAsMzEyLjEzNiwwLDMzNmMwLDQ4LjUyLDM5LjQ4LDg4LDg4LDg4aDMxMmM1Mi45MzYsMCw5Ni00My4wNjQsOTYtOTYgICAgQzQ5NiwyODAuNDI0LDQ2MC40NjQsMjM5LjkyOCw0MTMuOTY4LDIzMy4wOTZ6IE0xNiwyMjRjMC0yNi4xNDQsMjAuNDk2LTQ3LjE5Miw0Ni42NDgtNDcuOTI4bDQuNDcyLTAuMTI4bDIuMjMyLTMuODcyICAgIGM4LjY0OC0xNC45ODQsMjUuNzI4LTIzLjI0LDQzLjg2NC0xOC45Nmw3LjU2LDEuNzkybDItNy41MTJDMTMyLjEwNCwxMTIuNDI0LDE2My44NDgsODgsMjAwLDg4ICAgIGMyNS44OCwwLDQ5LjU4NCwxMi40MTYsNjQuNDk2LDMyLjk4NGMtNTMuNDk2LDYuMDk2LTk4LjYwOCw0My4yMjQtMTE0LjQ0LDk1LjI4OEMxNDguMDA4LDIxNi4wODgsMTQ1Ljk4NCwyMTYsMTQ0LDIxNiAgICBjLTI0LjAzMiwwLTQ2LjU2LDEyLjE4NC01OS44NTYsMzIuMDhjLTE3LjI3MiwwLjc1Mi0zMy4yNDgsNi41MjgtNDYuNTUyLDE1Ljg2NEMyNC4yLDI1NS4wOTYsMTYsMjQwLjI0LDE2LDIyNHogTTQwMCw0MDhIODggICAgYy0zOS43MDQsMC03Mi0zMi4yOTYtNzItNzJjMC0zOS43MDQsMzIuMjk2LTcyLDcxLjY4OC03Mi4wMDhsNS41MzYsMC4wNGwyLjMwNC0zLjk5MkMxMDUuNTM2LDI0Mi43NDQsMTI0LjEyLDIzMiwxNDQsMjMyICAgIGMzLjM1MiwwLDYuODU2LDAuMzM2LDEwLjQyNCwxLjAwOGw3LjQyNCwxLjRsMS44MjQtNy4zMzZDMTc2Ljk2LDE3My40NDgsMjI0LjgsMTM2LDI4MCwxMzYgICAgYzYwLjUxMiwwLDExMS42NzIsNDUuMjgsMTE5LjAwOCwxMDUuMzJsMC41Niw0LjU5MkMzOTkuODQsMjQ5LjI0LDQwMCwyNTIuNiw0MDAsMjU2YzAsNjYuMTY4LTUzLjgzMiwxMjAtMTIwLDEyMHYxNiAgICBjNzQuOTkyLDAsMTM2LTYxLjAwOCwxMzYtMTM2YzAtMi4xMi0wLjE3Ni00LjItMC4yNzItNi4yOTZDNDUyLjQzMiwyNTcuMDg4LDQ4MCwyODkuNzc2LDQ4MCwzMjhDNDgwLDM3Mi4xMTIsNDQ0LjExMiw0MDgsNDAwLDQwOCAgICB6IiBmaWxsPSIjOTlkNGU4Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />');
            break;
        }
        case '09d':
        case '09n':
        case '10d':
        case '10n': {
            // rainy
            icon.html('<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTYgNDk2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTYgNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MTMuOTc2LDE2OS4wOTZjLTEwLjgzMi02My45MTItNjUuODE2LTExMS41MTItMTMwLjk0NC0xMTIuOTZDMjY1Ljg4OCwyNi4zNDQsMjM0LjUyOCw4LDIwMCw4ICAgICBjLTQwLjkzNiwwLTc3LjE3NiwyNi4wOTYtOTAuNTI4LDY0LjI4Yy0yMC43NTItMi4xMzYtNDAuMjE2LDcuNDcyLTUxLjYyNCwyNC4wNjRDMjUuMDgsOTkuNDI0LDAsMTI2LjU5MiwwLDE2MCAgICAgYzAsMjAuMTA0LDkuNDI0LDM4LjYxNiwyNS4wNCw1MC42MTZDOS41NjgsMjI2LjQ4LDAsMjQ4LjEzNiwwLDI3MmMwLDQ4LjUyLDM5LjQ4LDg4LDg4LDg4di0xNmMtMzkuNjk2LDAtNzItMzIuMjk2LTcyLTcyICAgICBjMC0zOS43MDQsMzIuMzA0LTcyLDcxLjY4OC03Mi4wMDhsNS41MzYsMC4wNGwyLjMxMi0zLjk5MkMxMDUuNTQ0LDE3OC43NDQsMTI0LjExMiwxNjgsMTQ0LDE2OCAgICAgYzMuMzUyLDAsNi44NTYsMC4zNDQsMTAuNDE2LDEuMDA4bDcuNDI0LDEuNGwxLjgyNC03LjMzNkMxNzYuOTYsMTA5LjQ1NiwyMjQuOCw3MiwyODAsNzJjNjAuNTA0LDAsMTExLjY3Miw0NS4yOCwxMTkuMDA4LDEwNS4zMiAgICAgbDAuNTYsNC41NTJDMzk5Ljg0LDE4NS4yMTYsNDAwLDE4OC41ODQsNDAwLDE5MmMwLDY2LjE2OC01My44MzIsMTIwLTEyMCwxMjB2MTZjNzQuOTkyLDAsMTM2LTYxLjAwOCwxMzYtMTM2ICAgICBjMC0yLjEyOC0wLjE3Ni00LjItMC4yNzItNi4yOTZDNDUyLjQzMiwxOTMuMDg4LDQ4MCwyMjUuNzY4LDQ4MCwyNjRjMCw0NC4xMTItMzUuODg4LDgwLTgwLDgwaC04djE2aDhjNTIuOTM2LDAsOTYtNDMuMDY0LDk2LTk2ICAgICBDNDk2LDIxNi40MzIsNDYwLjQ2NCwxNzUuOTI4LDQxMy45NzYsMTY5LjA5NnogTTE1MC4wNDgsMTUyLjI3MmMtMjYuNzI4LTIuMzI4LTUxLjUwNCwxMC4yNjQtNjUuOTA0LDMxLjgxNiAgICAgYy0xNy4yNzIsMC43NDQtMzMuMjQ4LDYuNTItNDYuNTYsMTUuODU2QzI0LjE5MiwxOTEuMDk2LDE2LDE3Ni4yNCwxNiwxNjBjMC0yNi4xNDQsMjAuNDk2LTQ3LjE5Miw0Ni42NDgtNDcuOTJsNC40NzItMC4xMjggICAgIGwyLjIzMi0zLjg3MkM3Ni41MDQsOTUuNjk2LDg5Ljc3Niw4OCwxMDQsODhjMy4wMTYsMCw2LjAzMiwwLjM2OCw5LjIyNCwxLjEybDcuNTYsMS43NzZsMi03LjUwNCAgICAgQzEzMi4xMDQsNDguNDI0LDE2My44NDgsMjQsMjAwLDI0YzI1Ljg4LDAsNDkuNTg0LDEyLjQxNiw2NC40ODgsMzIuOTg0QzIxMSw2My4wOCwxNjUuODg4LDEwMC4yMDgsMTUwLjA0OCwxNTIuMjcyeiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIxMTIiIHk9IjM0NCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjE2MCIgeT0iMzQ0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMjA4IiB5PSIzNDQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIyNTYiIHk9IjM0NCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjMwNCIgeT0iMzQ0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMzUyIiB5PSIzNDQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSI5NiIgeT0iMzc2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMTQ0IiB5PSIzNzYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIxOTIiIHk9IjM3NiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI0MCIgeT0iMzc2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMjg4IiB5PSIzNzYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIzMzYiIHk9IjM3NiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjgwIiB5PSI0MDgiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIxMjgiIHk9IjQwOCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjE3NiIgeT0iNDA4IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMjI0IiB5PSI0MDgiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIyNzIiIHk9IjQwOCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjMyMCIgeT0iNDA4IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iNjQiIHk9IjQ0MCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjExMiIgeT0iNDQwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMTYwIiB5PSI0NDAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIyMDgiIHk9IjQ0MCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI1NiIgeT0iNDQwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMzA0IiB5PSI0NDAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSI0OCIgeT0iNDcyIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iOTYiIHk9IjQ3MiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjE0NCIgeT0iNDcyIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMTkyIiB5PSI0NzIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cmVjdCB4PSIyNDAiIHk9IjQ3MiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxyZWN0IHg9IjI4OCIgeT0iNDcyIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM5OWQ0ZTgiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />');
            break;
        }
        case '11d':
        case '11n': {
            // thunderstorm
            icon.html('<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTYgNDk2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTYgNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MTMuOTY4LDExOC45NDhDNDAyLjk2OCw1NC4wMzYsMzQ2LjQ2NCw1Ljg1MiwyODAsNS44NTJjLTYwLjE2LDAtMTEyLjYsMzkuMjMyLTEyOS45NDQsOTYuMjcyICAgICBjLTIuMDQ4LTAuMTg0LTQuMDcyLTAuMjcyLTYuMDU2LTAuMjcyYy0yNC4wMzIsMC00Ni41NiwxMi4xODQtNTkuODU2LDMyLjA4QzM3LjQsMTM1Ljk2NCwwLDE3NC42MiwwLDIyMS44NTIgICAgIGMwLDQ4LjUyLDM5LjQ4LDg4LDg4LDg4di0xNmMtMzkuNzA0LDAtNzItMzIuMzA0LTcyLTcyczMyLjI5Ni03Miw3MS42ODgtNzIuMDA4bDUuNTM2LDAuMDRsMi4zMDQtMy45OTIgICAgIGMxMC4wMDgtMTcuMjk2LDI4LjU5Mi0yOC4wNCw0OC40NzItMjguMDRjMy4zNTIsMCw2Ljg1NiwwLjMzNiwxMC40MjQsMS4wMDhsNy40MjQsMS40bDEuODI0LTcuMzM2ICAgICBDMTc2Ljk2LDU5LjMsMjI0LjgsMjEuODUyLDI4MCwyMS44NTJjNjAuNTEyLDAsMTExLjY3Miw0NS4yOCwxMTkuMDA4LDEwNS4zMmwwLjU2LDQuNTkyYzAuMjcyLDMuMzI4LDAuNDMyLDYuNjg4LDAuNDMyLDEwLjA4OCAgICAgYzAsNjYuMTY4LTUzLjgzMiwxMjAtMTIwLDEyMHYxNmM3NC45OTIsMCwxMzYtNjEuMDA4LDEzNi0xMzZjMC0yLjEyLTAuMTc2LTQuMi0wLjI3Mi02LjI5NiAgICAgQzQ1Mi40MzIsMTQyLjk0LDQ4MCwxNzUuNjIsNDgwLDIxMy44NTJjMCw0NC4xMTItMzUuODg4LDgwLTgwLDgwdjE2YzUyLjkzNiwwLDk2LTQzLjA2NCw5Ni05NiAgICAgQzQ5NiwxNjYuMjc2LDQ2MC40NjQsMTI1Ljc4LDQxMy45NjgsMTE4Ljk0OHoiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMTA0LjAyMyIgeT0iMzA3Ljk2IiB0cmFuc2Zvcm09Im1hdHJpeCgwLjg5NDQgMC40NDcyIC0wLjQ0NzIgMC44OTQ0IDE1Ny41NDk4IC0xNS42OTczKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjM1Ljc3NSIgZmlsbD0iIzk5ZDRlOCIvPgoJCQkKCQkJCTxyZWN0IHg9Ijc5Ljk4MSIgeT0iMzU1Ljk4NyIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODk0NCAtMC40NDcyIDAuNDQ3MiAtMC44OTQ0IC0wLjUyOTEgNzQ3LjYyMzkpIiB3aWR0aD0iMTUuOTk5IiBoZWlnaHQ9IjM1Ljc3NSIgZmlsbD0iIzk5ZDRlOCIvPgoJCQkKCQkJCTxyZWN0IHg9IjU2LjAxOSIgeT0iNDAzLjk1OCIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODk0NCAtMC40NDcyIDAuNDQ3MiAtMC44OTQ0IC02Ny4zNzYxIDgyNy43ODU4KSIgd2lkdGg9IjE1Ljk5OSIgaGVpZ2h0PSIzNS43NzUiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJCgkJCQk8cmVjdCB4PSIzMS45NzgiIHk9IjQ1MS45NjEiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjg5NDQgLTAuNDQ3MiAwLjQ0NzIgLTAuODk0NCAtMTM0LjM4ODEgOTA3Ljk3MjkpIiB3aWR0aD0iMTYiIGhlaWdodD0iMzUuNzc1IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCQoJCQkJPHJlY3QgeD0iMTUwLjA5OCIgeT0iMzE3Ljg0OSIgdHJhbnNmb3JtPSJtYXRyaXgoMC40NDcyIC0wLjg5NDQgMC44OTQ0IDAuNDQ3MiAtMTk4LjU4NzkgMzMwLjM3NTcpIiB3aWR0aD0iMzUuNzc1IiBoZWlnaHQ9IjE2IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCQoJCQkJPHJlY3QgeD0iMTM1Ljk4NCIgeT0iMzU1Ljk2NSIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODk0NCAtMC40NDcyIDAuNDQ3MiAtMC44OTQ0IDEwNS41NzY5IDc3Mi42MjcxKSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjM1Ljc3NSIgZmlsbD0iIzk5ZDRlOCIvPgoJCQkKCQkJCTxyZWN0IHg9IjExMS45ODMiIHk9IjQwMy45NTIiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjg5NDQgLTAuNDQ3MiAwLjQ0NzIgLTAuODk0NCAzOC42NDQ5IDg1Mi44MDEzKSIgd2lkdGg9IjE1Ljk5OSIgaGVpZ2h0PSIzNS43NzUiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJCgkJCQk8cmVjdCB4PSI4Ny45ODEiIHk9IjQ1MS45NjMiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjg5NDQgLTAuNDQ3MiAwLjQ0NzIgLTAuODk0NCAtMjguMjk1NiA5MzMuMDIxMSkiIHdpZHRoPSIxNS45OTkiIGhlaWdodD0iMzUuNzc1IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCQoJCQkJPHJlY3QgeD0iMzExLjk4NCIgeT0iMzA3Ljk3MyIgdHJhbnNmb3JtPSJtYXRyaXgoMC44OTQ0IDAuNDQ3MiAtMC40NDcyIDAuODk0NCAxNzkuNTA5MiAtMTA4LjY5ODgpIiB3aWR0aD0iMTYiIGhlaWdodD0iMzUuNzc1IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCQoJCQkJPHJlY3QgeD0iMjg3Ljk4MyIgeT0iMzU1Ljk1MiIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODk0NCAtMC40NDcyIDAuNDQ3MiAtMC44OTQ0IDM5My41MzAzIDg0MC41Nzg3KSIgd2lkdGg9IjE1Ljk5OSIgaGVpZ2h0PSIzNS43NzUiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJCgkJCQk8cmVjdCB4PSIyNjMuOTg5IiB5PSI0MDQuMDAzIiB0cmFuc2Zvcm09Im1hdHJpeCgtMC44OTQ0IC0wLjQ0NzIgMC40NDcyIC0wLjg5NDQgMzI2LjU4NyA5MjAuODc3OCkiIHdpZHRoPSIxNS45OTkiIGhlaWdodD0iMzUuNzc1IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCQoJCQkJPHJlY3QgeD0iMjM5Ljk3OSIgeT0iNDUxLjk2NiIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODk0NCAtMC40NDcyIDAuNDQ3MiAtMC44OTQ0IDI1OS42NTM2IDEwMDEuMDAzMSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIzNS43NzUiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJCgkJCQk8cmVjdCB4PSIzNjguMDAzIiB5PSIzMDcuOTc0IiB0cmFuc2Zvcm09Im1hdHJpeCgtMC44OTQ0IC0wLjQ0NzIgMC40NDcyIC0wLjg5NDQgNTY2LjU4MDEgNzg1LjQ3NTIpIiB3aWR0aD0iMTUuOTk5IiBoZWlnaHQ9IjM1Ljc3NSIgZmlsbD0iIzk5ZDRlOCIvPgoJCQkKCQkJCTxyZWN0IHg9IjM0My45NjIiIHk9IjM1NS45NjkiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjg5NDQgLTAuNDQ3MiAwLjQ0NzIgLTAuODk0NCA0OTkuNTcxOCA4NjUuNjQ2NSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIzNS43NzUiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHJlY3QgeD0iMzIwIiB5PSI0MDMuOTk3IiB0cmFuc2Zvcm09Im1hdHJpeCgtMC44OTQ0IC0wLjQ0NzIgMC40NDcyIC0wLjg5NDQgNDMyLjY5OTkgOTQ1LjkxNDYpIiB3aWR0aD0iMTYiIGhlaWdodD0iMzUuNzc1IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCQoJCQkJPHJlY3QgeD0iMjk1Ljk1OSIgeT0iNDUxLjk2OCIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuODk0NCAtMC40NDcyIDAuNDQ3MiAtMC44OTQ0IDM2NS43MDA1IDEwMjYuMDQwOSkiIHdpZHRoPSIxNS45OTkiIGhlaWdodD0iMzUuNzc1IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxwb2x5Z29uIHBvaW50cz0iMTk4LjEzNiwzODkuODUyIDIzOC44NTYsMzIxLjk3MiAyMjUuMTQ0LDMxMy43MzIgMTY5Ljg2NCw0MDUuODUyIDIxNy40MzIsNDA1Ljg1MiAxNjkuMjQ4LDQ4MS41NTYgICAgICAxODIuNzUyLDQ5MC4xNDggMjQ2LjU2OCwzODkuODUyICAgICIgZmlsbD0iIzk5ZDRlOCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />');
            break;
        }
        case '13d':
        case '13n': {
            // snow
            icon.html('<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTYgNDk2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTYgNDk2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00MTMuOTY4LDE2OS4wOTZjLTEwLjgzMi02My45Mi02NS44MTYtMTExLjUxMi0xMzAuOTQ0LTExMi45NkMyNjUuODgsMjYuMzM2LDIzNC41MzYsOCwyMDAsOCAgICAgYy00MC45MzYsMC03Ny4xNjgsMjYuMDk2LTkwLjUyLDY0LjI4OGMtMjAuNjk2LTIuMTY4LTQwLjIwOCw3LjQ2NC01MS42MjQsMjQuMDU2QzI1LjA4LDk5LjQyNCwwLDEyNi42LDAsMTYwICAgICBjMCwyMC4xMTIsOS40MzIsMzguNjI0LDI1LjA0OCw1MC42MTZDOS41NjgsMjI2LjQ4LDAsMjQ4LjEzNiwwLDI3MmMwLDQ4LjUyLDM5LjQ4LDg4LDg4LDg4aDMxMmM1Mi45MzYsMCw5Ni00My4wNjQsOTYtOTYgICAgIEM0OTYsMjE2LjQyNCw0NjAuNDY0LDE3NS45MjgsNDEzLjk2OCwxNjkuMDk2eiBNMTYsMTYwYzAtMjYuMTQ0LDIwLjQ5Ni00Ny4xOTIsNDYuNjQ4LTQ3LjkyOGw0LjQ3Mi0wLjEyOGwyLjIzMi0zLjg3MiAgICAgQzc4LDkzLjA4OCw5NS4wOCw4NC44MjQsMTEzLjIxNiw4OS4xMTJsNy41NiwxLjc5MmwyLTcuNTEyQzEzMi4xMDQsNDguNDI0LDE2My44NDgsMjQsMjAwLDI0ICAgICBjMjUuODgsMCw0OS41ODQsMTIuNDE2LDY0LjQ5NiwzMi45ODRjLTUzLjQ5Niw2LjA5Ni05OC42MDgsNDMuMjI0LTExNC40NCw5NS4yODhDMTQ4LjAwOCwxNTIuMDg4LDE0NS45ODQsMTUyLDE0NCwxNTIgICAgIGMtMjQuMDMyLDAtNDYuNTYsMTIuMTg0LTU5Ljg1NiwzMi4wOGMtMTcuMjcyLDAuNzUyLTMzLjI0OCw2LjUyOC00Ni41NTIsMTUuODY0QzI0LjIsMTkxLjA5NiwxNiwxNzYuMjQsMTYsMTYweiBNNDAwLDM0NEg4OCAgICAgYy0zOS43MDQsMC03Mi0zMi4yOTYtNzItNzJjMC0zOS42OTYsMzIuMjk2LTcyLDcxLjY4OC03Mi4wMDhsNS41MzYsMC4wNGwyLjMwNC0zLjk5MkMxMDUuNTM2LDE3OC43NDQsMTI0LjEyLDE2OCwxNDQsMTY4ICAgICBjMy4zNTIsMCw2Ljg1NiwwLjMzNiwxMC40MjQsMS4wMDhsNy40MjQsMS40bDEuODI0LTcuMzM2QzE3Ni45NiwxMDkuNDQ4LDIyNC44LDcyLDI4MCw3MmM2MC41MTIsMCwxMTEuNjcyLDQ1LjI4LDExOS4wMDgsMTA1LjMyICAgICBsMC41Niw0LjU5MkMzOTkuODQsMTg1LjI0LDQwMCwxODguNiw0MDAsMTkyYzAsNjYuMTY4LTUzLjgzMiwxMjAtMTIwLDEyMHYxNmM3NC45OTIsMCwxMzYtNjEuMDA4LDEzNi0xMzYgICAgIGMwLTIuMTItMC4xNzYtNC4yLTAuMjcyLTYuMjk2QzQ1Mi40MzIsMTkzLjA4OCw0ODAsMjI1Ljc2OCw0ODAsMjY0QzQ4MCwzMDguMTEyLDQ0NC4xMTIsMzQ0LDQwMCwzNDR6IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxwb2x5Z29uIHBvaW50cz0iMTgwLjQyNCw0MDAuODQgMTYwLDQxMS4wNTYgMTYwLDM5MiAxNDQsMzkyIDE0NCw0MTEuMDU2IDEyMy41NzYsNDAwLjg0IDExNi40MjQsNDE1LjE2IDEzNC4xMTIsNDI0ICAgICAgMTE2LjQyNCw0MzIuODQgMTIzLjU3Niw0NDcuMTYgMTQ0LDQzNi45NDQgMTQ0LDQ1NiAxNjAsNDU2IDE2MCw0MzYuOTQ0IDE4MC40MjQsNDQ3LjE2IDE4Ny41NzYsNDMyLjg0IDE2OS44ODgsNDI0ICAgICAgMTg3LjU3Niw0MTUuMTYgICAgIiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxwb2x5Z29uIHBvaW50cz0iMzcyLjQyNCw0MDAuODQgMzUyLDQxMS4wNTYgMzUyLDM5MiAzMzYsMzkyIDMzNiw0MTEuMDU2IDMxNS41NzYsNDAwLjg0IDMwOC40MjQsNDE1LjE2IDMyNi4xMTIsNDI0ICAgICAgMzA4LjQyNCw0MzIuODQgMzE1LjU3Niw0NDcuMTYgMzM2LDQzNi45NDQgMzM2LDQ1NiAzNTIsNDU2IDM1Miw0MzYuOTQ0IDM3Mi40MjQsNDQ3LjE2IDM3OS41NzYsNDMyLjg0IDM2MS44ODgsNDI0ICAgICAgMzc5LjU3Niw0MTUuMTYgICAgIiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxwb2x5Z29uIHBvaW50cz0iMjc2LjQyNCw0MzIuODQgMjU2LDQ0My4wNTYgMjU2LDQyNCAyNDAsNDI0IDI0MCw0NDMuMDU2IDIxOS41NzYsNDMyLjg0IDIxMi40MjQsNDQ3LjE2IDIzMC4xMTIsNDU2ICAgICAgMjEyLjQyNCw0NjQuODQgMjE5LjU3Niw0NzkuMTYgMjQwLDQ2OC45NDQgMjQwLDQ4OCAyNTYsNDg4IDI1Niw0NjguOTQ0IDI3Ni40MjQsNDc5LjE2IDI4My41NzYsNDY0Ljg0IDI2NS44ODgsNDU2ICAgICAgMjgzLjU3Niw0NDcuMTYgICAgIiBmaWxsPSIjOTlkNGU4Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />');
            break;
        }
        case '50d':
        case '50n': {
            // mist
            icon.html('<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPGc+CgkJCTxwYXRoIGQ9Ik00Mi42NjcsMTg3LjczM2gyNzMuMDY3YzQuNzE5LDAsOC41MzMtMy44MjMsOC41MzMtOC41MzNzLTMuODE0LTguNTMzLTguNTMzLTguNTMzSDQyLjY2NyAgICAgYy00LjcxOSwwLTguNTMzLDMuODIzLTguNTMzLDguNTMzUzM3Ljk0OCwxODcuNzMzLDQyLjY2NywxODcuNzMzeiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNMjQ3LjQ2NywyNzMuMDY3SDU5LjczM2MtNC43MTksMC04LjUzMywzLjgyMy04LjUzMyw4LjUzM2MwLDQuNzEsMy44MTQsOC41MzMsOC41MzMsOC41MzNoMTg3LjczMyAgICAgYzQuNzE5LDAsOC41MzMtMy44MjMsOC41MzMtOC41MzNDMjU2LDI3Ni44OSwyNTIuMTg2LDI3My4wNjcsMjQ3LjQ2NywyNzMuMDY3eiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNMTE5LjQ2NywyMzAuNGMwLTQuNzEtMy44MTQtOC41MzMtOC41MzMtOC41MzNIOC41MzNDMy44MTQsMjIxLjg2NywwLDIyNS42OSwwLDIzMC40YzAsNC43MSwzLjgxNCw4LjUzMyw4LjUzMyw4LjUzMyAgICAgaDEwMi40QzExNS42NTIsMjM4LjkzMywxMTkuNDY3LDIzNS4xMSwxMTkuNDY3LDIzMC40eiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNOTMuODY3LDEzNi41MzNoMTE5LjQ2N2M0LjcxOSwwLDguNTMzLTMuODIzLDguNTMzLTguNTMzYzAtNC43MS0zLjgxNC04LjUzMy04LjUzMy04LjUzM0g5My44NjcgICAgIGMtNC43MTksMC04LjUzMywzLjgyMy04LjUzMyw4LjUzM0M4NS4zMzMsMTMyLjcxLDg5LjE0OCwxMzYuNTMzLDkzLjg2NywxMzYuNTMzeiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNMjM4LjkzMywxMjhjMCw0LjcxLDMuODE0LDguNTMzLDguNTMzLDguNTMzSDQzNS4yYzQuNzE5LDAsOC41MzMtMy44MjMsOC41MzMtOC41MzNjMC00LjcxLTMuODE0LTguNTMzLTguNTMzLTguNTMzICAgICBIMjQ3LjQ2N0MyNDIuNzQ4LDExOS40NjcsMjM4LjkzMywxMjMuMjksMjM4LjkzMywxMjh6IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxwYXRoIGQ9Ik0zNDkuODY3LDE3MC42NjdjLTQuNzE5LDAtOC41MzMsMy44MjMtOC41MzMsOC41MzNzMy44MTQsOC41MzMsOC41MzMsOC41MzNoNjguMjY3YzQuNzE5LDAsOC41MzMtMy44MjMsOC41MzMtOC41MzMgICAgIHMtMy44MTQtOC41MzMtOC41MzMtOC41MzNIMzQ5Ljg2N3oiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHBhdGggZD0iTTE3OS4yLDg1LjMzM2gyMjEuODY3YzQuNzE5LDAsOC41MzMtMy44MjMsOC41MzMtOC41MzNzLTMuODE0LTguNTMzLTguNTMzLTguNTMzSDE3OS4yICAgICBjLTQuNzE5LDAtOC41MzMsMy44MjMtOC41MzMsOC41MzNTMTc0LjQ4MSw4NS4zMzMsMTc5LjIsODUuMzMzeiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNNDY5LjMzMywyNzMuMDY3SDI4MS42Yy00LjcxOSwwLTguNTMzLDMuODIzLTguNTMzLDguNTMzYzAsNC43MSwzLjgxNCw4LjUzMyw4LjUzMyw4LjUzM2gxODcuNzMzICAgICBjNC43MTksMCw4LjUzMy0zLjgyMyw4LjUzMy04LjUzM0M0NzcuODY3LDI3Ni44OSw0NzQuMDUyLDI3My4wNjcsNDY5LjMzMywyNzMuMDY3eiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNNDE4LjEzMywzNzUuNDY3SDI0Ny40NjdjLTQuNzE5LDAtOC41MzMsMy44MjMtOC41MzMsOC41MzNzMy44MTQsOC41MzMsOC41MzMsOC41MzNoMTcwLjY2NyAgICAgYzQuNzE5LDAsOC41MzMtMy44MjMsOC41MzMtOC41MzNTNDIyLjg1MiwzNzUuNDY3LDQxOC4xMzMsMzc1LjQ2N3oiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHBhdGggZD0iTTM2Ni45MzMsNDI2LjY2N0gxNDUuMDY3Yy00LjcxOSwwLTguNTMzLDMuODIzLTguNTMzLDguNTMzczMuODE0LDguNTMzLDguNTMzLDguNTMzaDIyMS44NjcgICAgIGM0LjcxOSwwLDguNTMzLTMuODIzLDguNTMzLTguNTMzUzM3MS42NTIsNDI2LjY2NywzNjYuOTMzLDQyNi42Njd6IiBmaWxsPSIjOTlkNGU4Ii8+CgkJCTxwYXRoIGQ9Ik01MDMuNDY3LDIyMS44NjdoLTM1OC40Yy00LjcxOSwwLTguNTMzLDMuODIzLTguNTMzLDguNTMzYzAsNC43MSwzLjgxNCw4LjUzMyw4LjUzMyw4LjUzM2gzNTguNCAgICAgYzQuNzE5LDAsOC41MzMtMy44MjMsOC41MzMtOC41MzNDNTEyLDIyNS42OSw1MDguMTg2LDIyMS44NjcsNTAzLjQ2NywyMjEuODY3eiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNOTMuODY3LDMyNC4yNjdjLTQuNzE5LDAtOC41MzMsMy44MjMtOC41MzMsOC41MzNzMy44MTQsOC41MzMsOC41MzMsOC41MzNoNjguMjY3YzQuNzE5LDAsOC41MzMtMy44MjMsOC41MzMtOC41MzMgICAgIHMtMy44MTQtOC41MzMtOC41MzMtOC41MzNIOTMuODY3eiIgZmlsbD0iIzk5ZDRlOCIvPgoJCQk8cGF0aCBkPSJNMjIxLjg2NywzODRjMC00LjcxLTMuODE0LTguNTMzLTguNTMzLTguNTMzaC0xNTMuNmMtNC43MTksMC04LjUzMywzLjgyMy04LjUzMyw4LjUzM3MzLjgxNCw4LjUzMyw4LjUzMyw4LjUzM2gxNTMuNiAgICAgQzIxOC4wNTIsMzkyLjUzMywyMjEuODY3LDM4OC43MSwyMjEuODY3LDM4NHoiIGZpbGw9IiM5OWQ0ZTgiLz4KCQkJPHBhdGggZD0iTTE4Ny43MzMsMzMyLjhjMCw0LjcxLDMuODE0LDguNTMzLDguNTMzLDguNTMzSDM4NGM0LjcxOSwwLDguNTMzLTMuODIzLDguNTMzLTguNTMzcy0zLjgxNC04LjUzMy04LjUzMy04LjUzM0gxOTYuMjY3ICAgICBDMTkxLjU0OCwzMjQuMjY3LDE4Ny43MzMsMzI4LjA5LDE4Ny43MzMsMzMyLjh6IiBmaWxsPSIjOTlkNGU4Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=" />');
            break;
        }
    }
}

function localWeather() {
  //Gets latitude and longitude and sets location (prints city and country)
  $.ajax({
    url: 'http://ip-api.com/json',
    success: function(data) {
    var lon = data.lon;
    var lat = data.lat;
                
    var city = data.city;
    var country = data.countryCode;          
    $('#location').html(city + ', ' + country);
    
    weatherInfo(data, lon, lat);
    }
  });
}

//Gets all the info about the weather
function weatherInfo(data, lon, lat) {
    
    var api_link = '//api.openweathermap.org/data/2.5/weather?APPID=e6f402eff34bb59bf6b3f45a5c031d12&lat=' + lat + '&lon=' + lon;
    $.ajax({
        url: api_link,
        success: function(json) {
            var currentWeather = json.weather[0].description;
            var iconID = json.weather[0].icon;
            var humidity = json.main.humidity;
            var kTemp = json.main.temp;
            var cTemp = Math.round(kTemp - 273.15);
            var fTemp = Math.round(cTemp * 1.8 + 32); 
            
            setIcon(json, iconID);
            $('#description').html(currentWeather);
        
            $('.celsius').html('Temperature - ' + cTemp + '° C</br></br>Humidity - ' + humidity + '%');
            $('.farh').html('Temperature - ' + fTemp + '° F</br></br>Humidity - ' + humidity + '%');
        }
    });
}

$(document).ready(function() { 
    localWeather();
    
    $('#unitSwitch').on('click', function(){
       $('.celsius').toggleClass('hide');
       $('.farh').toggleClass('hide');
    });
});


/* The mist icon was created by  Zlatko Najdenovski and the rest of the icons were created by Eucalyp.*/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console