Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>

<head>
    <title>freecodecamp Weather App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet" type="text/css">
    <!--<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type=¨text/css¨>-->
    <link href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type=¨text/css¨>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" type=¨text/css¨>
    <!--<link href="weathercss.css" rel="stylesheet" type="text/css">-->
</head>

<body>

 <div class="container-fluid" class="container">
        <div class="row" >
            <div class="col-sm-4"></div>

            <div class="col-sm-4">
                <div id="titles">
                    <h1>A View from Your Window</h1>

                    <h2>Your local weather - Freecodecamp Project</h2>
                </div><!--end div titles-->
                <p id="showatstartonly">Please accept to share your location (small message box) and wait a few seconds to get your (almost) precise
                    location. It won't allways work on wired connections, see comments is JS section</p>
                <div id="mainarea">


                    <div id="currentweathericon" class="weatherbackground">
                        <canvas id="icon"></canvas>

                    </div><!--end div currentweathericon-->
                    <div>

                    </div>


                    <div id="credits">
                        <a href="https://darksky.net/poweredby/">Powered by Dark Sky</a>
                        </br>
                        <a href="https://pixabay.com/">Images from Pixabay</a>
                    </div><!--end div credits-->
                    <div id="currentweather">

                        <p id="weather">Wait a few seconds:</p>


                        <button style="display:inline" id="buttonchange">&#8457; or &#8451;</button>
                    </div><!--end div currentweather-->
                    <p id="infoISP"></p>
                    <div id="yourlocation">
                        <p>Country:
                            <span id="country"></span>
                        </p>
                        <p>State:
                            <span id="state"></span>
                        </p>
                        <p>City:
                            <span id="city"></span>
                        </p>
                        <p>Address:
                            <span id="address"></span>
                        </p>

                        <p>Latitude:
                            <span id="latitude"></span>
                        </p>
                        <p>Longitude:
                            <span id="longitude"></span>
                        </p>
                    </div><!--end div your location-->
                </div><!--end div mainarea-->



            </div><!--end div col-sm-4 a doua-->
            </br>
            <div class="col-sm-4">
                

            </div><!--end div col-sm-4 al treilea-->
        </div><!--end div row-->
        



    </div><!--end div container-fluid-->

    <div id="footer"  class="footer">
        <p>Made by
            <a href="https://www.ionvarsescu.tk" target="_blank">Ion V.</a>
        </p>
        <div id="contact">
            <a href="https://www.facebook.com/varsescu.ion" target="_blank">
                <i class="fa fa-facebook-square fa-3x"></i>
            </a>
            <a href="https://twitter.com/IonVcoding" target="_blank">
                <i class="fa fa-twitter fa-3x"></i>
            </a>
            <a href="https://www.linkedin.com/in/ionvarsescu/" target="_blank">
                <i class="fa fa-linkedin fa-3x"></i>
            </a>
            <a href="https://plus.google.com/100730160336168112160" target="_blank">
                <i class="fa fa-google-plus fa-3x"></i>
            </a>
            <a href="https://github.com/Nei-V" target="_blank">
                <i class="fa fa-github fa-3x"></i>
            </a>
            <a href="https://www.freecodecamp.org/portfolio/nei-v" target="_blank">
                <img src="https://res.cloudinary.com/dg45lvfuu/image/upload/v1465845327/fcc-app-icon_gqbnku.png">
            </a>
        </div> <!--end div contact-->
    </div><!--end div footer-->

    <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="weatherjs.js"></script>-->
    <script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>
    

</body>
              
            
!

CSS

              
                /*
.textcenter {
    text-align: center;
    margin-top: 50px;
    border-radius: 10px;
    background-color: #eff2fab7;
    width: max-content;
    margin: auto;
    padding: 5px;
}*/
html {
    height: 100%;
    box-sizing: border-box;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

h1 {
    font-family: Ultra, Monospace;
    font-size: 250%;
    text-align: center;
    border-radius: 10px;
    background-color: rgba(129, 135, 153, 0.692);
    width: max-content;
    margin: auto;
    padding: 5px;
}

h2 {
    text-align: center;
    position: relative;
    border-radius: 10px;
    background-color: rgba(129, 135, 153, 0.692);
    width: max-content;
    margin: auto;
    padding: 5px;
}

#mainarea {
    display:block;
    position: relative;
    border-radius: 10px;
    background-color: #eff2fab7;
    width: 0.1%;
    margin: 0px;
    padding: 20px;
    opacity: 0;
    min-width:200px;
    line-height: 1.2;
    font-size:100%;
    
    
}

@media screen and (max-width: 600px) {
    #mainarea {
    font-size:80%;
    min-width:120px;   
    }
    }

body {
    font-size:16px;    
    background: center fixed;
    background-color:rgba(63, 83, 145, 0.466);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    position:relative;
    background-image: url(https://res.cloudinary.com/dg45lvfuu/image/upload/v1515356994/satellite-weather_wtay44.jpg);
    display:flex;/*for footer*/
    flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}

.content {
    flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
    padding: 20px;
  }

#showatstartonly {
    font-size: 100%;
    text-align: center;
    position: relative;
    border-radius: 10px;
    background-color:rgba(129, 135, 153, 0.692);
    width: max-content;
    margin: auto;
    padding: 5px;
}

.weatherbackground {
    background-color: #eff2fa09;
    background-repeat: no-repeat;
    background-size: contain;
    text-align:center;
}

#footer {
    display:block;
    /*position: absolute;*/
    border-radius: 10px;
    background-color: #eff2fa8e;
    width: 0.1%;
    margin: 0px;
    /*padding: 0px;*/
    opacity: 0;
    max-height: max-content;
    text-align: center;
    bottom: 0;
    
}

.footer {
    flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
    padding: 20px;/*for footer*/
}

#contact {
    margin-top:0.2em;
    padding:0px;
}
#footer p {
    font-size: 1em;
    line-height:0px;
}

#footer a img {
    height: 2.5em;
    margin-bottom: -0.2em;
}



#profile{
font-size:1.5em;
}

#yourlocation{
    font-size:90%;
}

#weather{
    font-size:110%;
}
#yourlocation p {
    margin-bottom:0.1em; 
    margin-top:0em;
  }
  
 #icon {
     margin-left:0px;
 }
              
            
!

JS

              
                
//here starts geolocation
/*What it does:
1)Gets lat and long from geolocation 
2)Uses them to get city, country etc from maps.googleapis
3)Uses city from maps.googleapis to find background image useing Pixabay
4)or if there are no images, asks for a big city and uses it to find background on Pixabay (because Pixabay has a limited number of images)?
5)Gets temperature and weather using lat and long from geolocation from forecast.io
6)Uses icons to show the weather
7)uses moods from forecast.io to pick background for icon using Pixabay
8)can toogle between Celsius and Farenheit

Limitations:
Works only if location permission is approved when connected trough Wifi
Needs GPS activated when using phone
Doesn't work well on wired connection!!it will fail if country is not found - can be solved by making it optional (geolocation on wired network  is not that good- goes for ISP provider)
Limited number of images on pixabay means sometimes images are not relevant- not allways will find image.
One could use the country to get an aproximate image from pixabay if images of the city are not found
one could use geocoding api from mapquest for example to get lat and long from address

*/




navigator.geolocation.getCurrentPosition(success, error);

function success(position) { /*start function success - get location*/
    let latitude = Math.round(position.coords.latitude * 100000) / 100000;  /*round to 5 decimals - is enough - about 1 meter precision*/
    let longitude = Math.round(position.coords.longitude * 100000) / 100000;
    let GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + '%2C' + longitude + '&language=en';

    function getlocation() {
        $.getJSON(GEOCODING).done(function (location) {
            /* example 2 animation on event jquerry
            $(function () {
                $('#mainarea').click(function () {
                    $(this).animate({
                        width: '30%'
                    }, 2000, function () {
                        $(this).animate({
                            display: block
                        }, 2000)
                    })
                });
            });*/

            $("#titles").hide(1000);
            $(function () {
                $('#mainarea').animate({
                    width: '20%',
                    opacity: '1',

                }, 1000
                )

            });
            $(function () {
                $('#footer').animate({
                    width: '100%',
                    opacity: '1'
                }, 1000
                )

            });



            //$('#footer').show(1000);
            $('#country').html(location.results[0].address_components[5].long_name);
            $('#state').html(location.results[0].address_components[4].long_name);
            $('#city').html(location.results[0].address_components[2].long_name);
            $('#address').html(location.results[0].formatted_address);
            $('#latitude').html(latitude);
            $('#longitude').html(longitude);

            //start search Pixabay
            function changeBackground() {

                var city1 = location.results[0].address_components[2].long_name + ' city';
                var API_KEY = '6931949-4ad4137ebc68ddaed0614fa05';
                var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(city1);
                $.getJSON(URL, function (data) {
                    if (parseInt(data.totalHits) > 0) {
                        $.each(data.hits, function (i, hit) {
                            var newImg = [data.hits[0].webformatURL];
                            console.log(newImg);
                            $('body').css('background-image', 'url(' + newImg[0] + ')');
                            //var newImgUrl = ["https://cdn.pixabay.com/photo/2017/10/27/20/25/leopard-2895448_960_720.jpg"];
                        });
                    }
                    else {
                        console.log('No hits');
                        var city2 = prompt("Please enter a big city near you to change the background", "");
                        var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(city2);
                        $.getJSON(URL, function (data) {
                            if (parseInt(data.totalHits) > 0)
                                $.each(data.hits, function (i, hit) {
                                    var newImg = [data.hits[0].webformatURL];
                                    console.log(newImg);
                                    $('body').css('background-image', 'url(' + newImg[0] + ')');
                                    //var newImgUrl = ["https://cdn.pixabay.com/photo/2017/10/27/20/25/leopard-2895448_960_720.jpg"];

                                });
                            else
                                console.log('no such pic of city');

                        });
                    };

                }
                );

            };//end search Pixabay


            function b() {/*start function b - get temperature/change F or C*/
                var apiKey = '5c501a53db9a43509f399e45c17814ea';
                var url = 'https://api.forecast.io/forecast/';
                var data;
                var icon = "";
                var icons = new Skycons({ "color": "orange" });
                $.getJSON(url + apiKey + /*start getJSON for temp and icon*/ "/" + latitude +
                    "," + longitude +
                    "?callback=?"
                    , function (data) {/*start function to get icon*/
                        icon = data.currently.icon;
                        icons.set("icon", icon);
                        icons.play();
                        console.log(data);
                        $('#weather').html(/*start show temperature*/
                            'and the temperature is: ' + data.currently
                                .temperature + "&#8457;");/*end temperature*/

                        function getweathermood() {
                            var weatherPic = "";
                            switch (icon) {
                                case 'clear-day':
                                    weatherPic = "clear skies day sun";
                                    break;
                                case 'clear-night':
                                    weatherPic = "clear skies stars";
                                    break;
                                case 'rain':
                                    weatherPic = "rain";
                                    break;
                                case 'snow':
                                    weatherPic = "snow white";
                                    break;
                                case 'sleet':
                                    weatherPic = "hailstones";
                                    break;
                                case 'wind':
                                    weatherPic = "wind trees";
                                    break;
                                case 'fog':
                                    weatherPic = "fog weather";
                                    break;
                                case 'cloudy':
                                    weatherPic = "clouds dark grey";
                                    break;
                                case 'partly-cloudy-day':
                                    weatherPic = "cloudscape";
                                    break;
                                case 'partly-cloudy-night':
                                    weatherPic = "clouds night";
                                    break;
                                default:
                                    weatherPic = "clear skies stars";
                                    break;
                            };
                            console.log(weatherPic);
                            var API_KEY = '6931949-4ad4137ebc68ddaed0614fa05';
                            var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(weatherPic);
                            $.getJSON(URL, function (data) {
                                if (parseInt(data.totalHits) > 0)
                                    $.each(data.hits, function (i, hit) {
                                        var newImgSmall = [data.hits[0].webformatURL];
                                        console.log(newImgSmall);
                                        $(".weatherbackground").css('background-image', 'url(' + newImgSmall[0] + ')');
                                        //var newImgSmallUrl = ["https://cdn.pixabay.com/photo/2017/10/27/20/25/leopard-2895448_960_720.jpg"];
                                    });
                                else
                                    console.log('No hits');
                            });
                        };
                        getweathermood()

                        var i = 0;
                        $("#buttonchange").on("click", function () {/*start founction to get temperature and icon*/
                            var cels = (data.currently.temperature - 32) * 5 / 9;
                            var far = data.currently.temperature;
                            if (i === 1) {
                                $('#weather').html(/*start show temperature*/
                                    'and the temperature is: ' + far + "&#8457;");
                                i = 0;
                            }
                            else {
                                $('#weather').html(/*start toogle temperature C or F*/
                                    'and the temperature is: ' + Math.round(cels * 10) / 10 + "&#8451;");
                                i = 1;
                            }
                            /*end temperature toogle C or F*/
                        });/*end function  - get temperature/change F or C*/
                    }).done(hidemessage);/*end function to get icon and end getJSON*/
                function hidemessage() {/*start hidemessage*/
                    $("#showatstartonly").hide(1000);



                };/*end hidemessage*/
            };/*end function b */

            changeBackground();
            b();


        });/*end getJSON location*/
    };/*end function getlocation*/

    getlocation();

};/*end function success*/


function error(err) {/*start error function*/
    $.getJSON('https://ipapi.co/json/', function (data) {
        console.log(JSON.stringify(data, null, 2));

        let newLatitude = data.latitude;
        let newLongitude = data.longitude;
        let GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + newLatitude + '%2C' + newLongitude + '&language=en';

        
        function getlocation1() {
            $.getJSON(GEOCODING).done(function (location) {
                /* example 2 animation on event jquerry
                $(function () {
                    $('#mainarea').click(function () {
                        $(this).animate({
                            width: '30%'
                        }, 2000, function () {
                            $(this).animate({
                                display: block
                            }, 2000)
                        })
                    });
                });*/

                $("#titles").hide(1000);
                $(function () {
                    $('#mainarea').animate({
                        width: '20%',
                        opacity: '1',

                    }, 1000
                    )

                });
                $(function () {
                    $('#footer').animate({
                        width: '100%',
                        opacity: '1'
                    }, 1000
                    )

                });



                //$('#footer').show(1000);
                $('#country').html(location.results[0].address_components[5].long_name);
                $('#state').html(location.results[0].address_components[4].long_name);
                $('#city').html(location.results[0].address_components[2].long_name);
                $('#address').html(location.results[0].formatted_address);
                $('#latitude').html(latitude);
                $('#longitude').html(longitude);

                //start search Pixabay
                function changeBackground() {

                    var city1 = location.results[0].address_components[2].long_name + ' city';
                    var API_KEY = '6931949-4ad4137ebc68ddaed0614fa05';
                    var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(city1);
                    $.getJSON(URL, function (data) {
                        if (parseInt(data.totalHits) > 0) {
                            $.each(data.hits, function (i, hit) {
                                var newImg = [data.hits[0].webformatURL];
                                console.log(newImg);
                                $('body').css('background-image', 'url(' + newImg[0] + ')');
                                //var newImgUrl = ["https://cdn.pixabay.com/photo/2017/10/27/20/25/leopard-2895448_960_720.jpg"];
                            });
                        }
                        else {
                            console.log('No hits');
                            var city2 = prompt("Please enter a big city near you to change the background", "");
                            var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(city2);
                            $.getJSON(URL, function (data) {
                                if (parseInt(data.totalHits) > 0)
                                    $.each(data.hits, function (i, hit) {
                                        var newImg = [data.hits[0].webformatURL];
                                        console.log(newImg);
                                        $('body').css('background-image', 'url(' + newImg[0] + ')');
                                        //var newImgUrl = ["https://cdn.pixabay.com/photo/2017/10/27/20/25/leopard-2895448_960_720.jpg"];

                                    });
                                else
                                    console.log('no such pic of city');

                            });
                        };

                    }
                    );

                };//end search Pixabay


                function b() {/*start function b - get temperature/change F or C*/
                    var apiKey = '5c501a53db9a43509f399e45c17814ea';
                    var url = 'https://api.forecast.io/forecast/';
                    var data;
                    var icon = "";
                    var icons = new Skycons({ "color": "orange" });
                    $.getJSON(url + apiKey + /*start getJSON for temp and icon*/ "/" + newLatitude +
                        "," + newLongitude +
                        "?callback=?"
                        , function (data) {/*start function to get icon*/
                            icon = data.currently.icon;
                            icons.set("icon", icon);
                            icons.play();
                            console.log(data);
                            $('#weather').html(/*start show temperature*/
                                'and the temperature is: ' + data.currently
                                    .temperature + "&#8457;");/*end temperature*/
                                    $('#infoISP').html(/*info when connected through LAN*/
                                        'No Wifi or GPS. Info about your ISP location');/*end temperature*/

                            function getweathermood() {
                                var weatherPic = "";
                                switch (icon) {
                                    case 'clear-day':
                                        weatherPic = "clear skies day sun";
                                        break;
                                    case 'clear-night':
                                        weatherPic = "clear skies stars";
                                        break;
                                    case 'rain':
                                        weatherPic = "rain";
                                        break;
                                    case 'snow':
                                        weatherPic = "snow white";
                                        break;
                                    case 'sleet':
                                        weatherPic = "hailstones";
                                        break;
                                    case 'wind':
                                        weatherPic = "wind trees";
                                        break;
                                    case 'fog':
                                        weatherPic = "fog weather";
                                        break;
                                    case 'cloudy':
                                        weatherPic = "clouds dark grey";
                                        break;
                                    case 'partly-cloudy-day':
                                        weatherPic = "cloudscape";
                                        break;
                                    case 'partly-cloudy-night':
                                        weatherPic = "clouds night";
                                        break;
                                    default:
                                        weatherPic = "clear skies stars";
                                        break;
                                };
                                console.log(weatherPic);
                                var API_KEY = '6931949-4ad4137ebc68ddaed0614fa05';
                                var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(weatherPic);
                                $.getJSON(URL, function (data) {
                                    if (parseInt(data.totalHits) > 0)
                                        $.each(data.hits, function (i, hit) {
                                            var newImgSmall = [data.hits[0].webformatURL];
                                            console.log(newImgSmall);
                                            $(".weatherbackground").css('background-image', 'url(' + newImgSmall[0] + ')');
                                            //var newImgSmallUrl = ["https://cdn.pixabay.com/photo/2017/10/27/20/25/leopard-2895448_960_720.jpg"];
                                        });
                                    else
                                        console.log('No hits');
                                });
                            };
                            getweathermood()

                            var i = 0;
                            $("#buttonchange").on("click", function () {/*start founction to get temperature and icon*/
                                var cels = (data.currently.temperature - 32) * 5 / 9;
                                var far = data.currently.temperature;
                                if (i === 1) {
                                    $('#weather').html(/*start show temperature*/
                                        'and the temperature is: ' + far + "&#8457;");
                                    i = 0;
                                }
                                else {
                                    $('#weather').html(/*start toogle temperature C or F*/
                                        'and the temperature is: ' + Math.round(cels * 10) / 10 + "&#8451;");
                                    i = 1;
                                }
                                /*end temperature toogle C or F*/
                            });/*end function  - get temperature/change F or C*/
                        }).done(hidemessage);/*end function to get icon and end getJSON*/
                    function hidemessage() {/*start hidemessage*/
                        $("#showatstartonly").hide(1000);



                    };/*end hidemessage*/
                };/*end function b */

                changeBackground();
                b();



            });/*end getJSON location*/
        };/*end function getlocation1*/



        getlocation1();

    });

};/*end error function*/


















/*start search PixabayIP
function changeBackgroundIP() {

    var city1 = location.results[0].address_components[2].long_name + ' city';
    var API_KEY = '6931949-4ad4137ebc68ddaed0614fa05';
    var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(city1);
    $.getJSON(URL, function (data) {
        if (parseInt(data.totalHits) > 0) {
            $.each(data.hits, function (i, hit) {
                var newImg = [data.hits[0].webformatURL];
                console.log(newImg);
                $('body').css('background-image', 'url(' + newImg[0] + ')');
                //var newImgUrl = ["https://cdn.pixabay.com/photo/2017/10/27/20/25/leopard-2895448_960_720.jpg"];
            });
        }
        else {
            console.log('No hits');
            var city2 = prompt("Please enter a big city near you", "");
            var URL = "https://pixabay.com/api/?key=" + API_KEY + "&q=" + encodeURIComponent(city2);
            $.getJSON(URL, function (data) {
                if (parseInt(data.totalHits) > 0)
                    $.each(data.hits, function (i, hit) {
                        var newImg = [data.hits[0].webformatURL];
                        console.log(newImg);
                        $('body').css('background-image', 'url(' + newImg[0] + ')');
                        //var newImgUrl = ["https://cdn.pixabay.com/photo/2017/10/27/20/25/leopard-2895448_960_720.jpg"];

                    });
                else
                    console.log('no such pic of city');

            });
        };

    }
    );

};//end search PixabayIP

*/
              
            
!
999px

Console