Weather App

In this example below you will see how to do a Weather App with some HTML / CSS and Javascript

Weather App for FreeCodeCamp

Thumbnail
This awesome code was written by r3b311i0n, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright r3b311i0n ©
  • HTML
  • CSS
  • JavaScript
    <div class="container">
    <div class="controlsContainer">
        <div>
            <h1>
                freeCodeCamp Weather App
            </h1>
        </div>
        <div class="switchContainer">
            <label class="switch" for="converter">
                <input type="checkbox" id="converter" value="fahrenheit">
                <span class="slider round"></span>
            </label>
        </div>
    </div>
    <div class="weather">
        <i class="owf owf-5x">
        </i>
        <h2 class="temperature">
        </h2>
        <h3 class="description">
        </h3>
    </div>
    <footer>
        <p class="error">
        </p>
    </footer>
</div>

/*Downloaded from https://www.codeseek.co/r3b311i0n/weather-app-BLJPgW */
    /* github: https://github.com/r3b311i0n/Weather_App */

/*noinspection CssUnknownTarget*/
@import url(https://fonts.googleapis.com/css?family=Roboto);

.container {
    font-family: "Roboto", serif;
}

.controlsContainer {
    display: inline-grid;
}

h1 {
    text-align: center;
}

footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.switch {
    position: absolute;
    display: inline-block;
    width: 68px;
    height: 37px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    -webkit-transition: .4s;
    transition: .4s;
    -webkit-box-shadow: 3px 0 2px 0 rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 0 2px 0 rgba(0, 0, 0, 0.75);
    box-shadow: 3px 0 2px 0 rgba(0, 0, 0, 0.75);
}

.slider:before {
    position: absolute;
    font-size: 1.25em;
    text-align: center;
    content: "°C";
    height: 29px;
    width: 29px;
    left: 5px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: black;
}

input:checked + .slider:before {
    -webkit-transform: translateX(29px);
    -ms-transform: translateX(29px);
    transform: translateX(29px);
    content: "°F";
}

.slider.round {
    border-radius: 37px;
}

.slider.round:before {
    border-radius: 50%;
}

.weather {
    width: 100%;
    text-align: center;
}

.switchContainer {
    position: fixed;
    left: 47.3%;
    bottom: 21em;
}


/*Downloaded from https://www.codeseek.co/r3b311i0n/weather-app-BLJPgW */
    const api = "http://api.openweathermap.org/data/2.5/weather?";
const apiKey = "&APPID=6f500a9fa2f6cf6915ebda32f2c03f35";

var latitude;
var longitude;
var kelvin;

var main = function () {

    if ("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(function (loc) {
            latitude = loc.coords.latitude;
            longitude = loc.coords.longitude;
            console.log(latitude + " " + longitude);

            $.ajax({
                url: api + "lat=" + latitude + "&lon=" + longitude + apiKey,
                method: "GET",
                dataType: "json",
                success: function (weatherData) {
                    //noinspection JSJQueryEfficiency
                    $(".error").html(weatherData["name"]);

                    if (weatherData["cod"] == "404") {
                        $(".error").html("City Not Found.");
                    }
                    else {
                        var weatherId = "owf-" + weatherData["weather"][0]["id"];
                        console.log(weatherId);
                        $(".owf").addClass(weatherId);
                        $(".description").html(weatherData["weather"][0]["description"]);
                        kelvin = weatherData["main"]["temp"];
                        if ($("#converter").prop("checked") === true) {
                            $(".temperature").html(parseInt(kelvin * (9 / 5) - 459.67) + " °F");
                        }
                        else {
                            $(".temperature").html(parseInt(kelvin - 273.15) + " °C");
                        }
                    }
                }
            });
        }, function (error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    //noinspection JSJQueryEfficiency
                    $(".error").html("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    //noinspection JSJQueryEfficiency
                    $(".error").html("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    //noinspection JSJQueryEfficiency
                    $(".error").html("The request to get user location timed out.");
                    break;
            }
        });
    }
    else {
        console.log("Geolocation is unavailable.");
    }
};

$("#converter").on("click", function () {
    if ($("#converter").prop("checked") === true) {
        $(".temperature").html(parseInt(kelvin * 9 / 5 - 459.67) + " °F");
    }
    else {
        $(".temperature").html(parseInt(kelvin - 273.15) + " °C");
    }
});

$(document).ready(main());

Comments