Weather Dashboard

Summary

This application delivers the current weather conditions and five day forecast right to your fingertips. Search for any city or use your current location to see what the sky is up to anywhere in the world along with a lovely picture of your chosen destination.

Prerequisites

• Web Browser (Chrome, Safari, Firefox, etc)
• JavaScript
• Local Storage

Installing

Copy the repository link.

https://github.com/amandalatkins/weather-dashboard.git

Clone the repository to your local development environment

git clone https://github.com/amandalatkins/weather-dashboard.git

Open index.html in your preferred web browser

Built With

• HTML
• CSS
• JavaScript
• Moment.js
• Bootstrap
• OpenWeather API
• Teleport API

Deployed Link

• See Live App

Screenshots

Code Snippets

The following snippet shows the function that receives and handles a search input, whether from a clicking the search button, clicking the current location button, or pressing the enter key.

    function initSearch(e) {

        var searchField = $('#searchField');

        if (e.target.matches('button')) {   
            if ($(e.target).attr('id') === "searchBtn") {
                if (searchField.val() === "") {
                    return;
                }
                currentCity = searchField.val();
                searchField.val('');
                runSearch();
                if ($(window).width() < 992) {
                toggleMobileSearch();
            }
            } else if ($(e.target).attr('id') !== "currentLocation") {
                currentCity = $(e.target).val();
                searchField.val('');
                runSearch();
                if ($(window).width() < 992) {
                    toggleMobileSearch();
                }
            }
        } 
        // Else if there was an enter key pressed while in the search field
        else if (e.keyCode === 13) {
            if (searchField.val() === "") {
                return;
            }
            currentCity = searchField.val();
            searchField.val('');
            runSearch();
            if ($(window).width() < 992) {
                toggleMobileSearch();
            }
        }

    }

Authors

• Amanda Atkins

  • Portfolio
  • Github
  • LinkedIn

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License.

Search icon and current location icon are licensed under Font Awesome's Free License.

Weather data from OpenWeatherMap.org is licensed under the Creative Commons Attribution-ShareAlike 4.0 Generic License license

All photos licensed through Teleport.org with Creative Commons licenses.

Acknowledgments

• Font Awesome for the current location and search icons
• Teleport for the various city images
• OpenWeather for all weather data