Lab2-Weather/Forms.html at master · jakegriffey/Lab2-Weather · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
    <head>
        <title>City Weather</title>
        <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <link rel="stylesheet" href="./forms.css" type="text/css" />
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function() {
                $( "#cityField" ).keyup(function() {
                    var url = "http://bioresearch.byu.edu/cs260/jquery/getcity.cgi?q=" + $("#cityField").val();
                    $.getJSON(url, function(data) {
                        var everything;
                        everything = "<ul class = \"list-unstyled\">";
                        $.each(data, function(i, item) {
                            everything += "<li class = \"sub-text\">" + data[i].city;
                        });
                        everything += "<ul>";
                        $("#txtHint").html(everything);
                    })
                    .done(function() {console.log('getJSON request succeeded!'); })
                    .fail(function(jqXHR, textStatus, errorThrown) {
                        console.log('getJSON request failed! ' + textStatus);
                        console.log("incoming "+jqXHR.responseText);
                    })
                    .always(function() { console.log('getJSON request ended!');

                    });
                });

                $("#searchButton").click( function(e) {
                    let value = $("#stackoverflowField").val();
                    e.preventDefault()

                    var myURL = "https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=";
                    myURL += value + "&site=stackoverflow";

                    $.ajax({
                        url: myURL,
                        dataType: "json",
                        success: function(data) {
                            //data[0][link] or [title]
                            let items = data["items"];
                            let everything = "<ul>";
                            $.each(items, function(i, item) {
                                everything += "<li class = \"sub-text\">" + "<a href = \"" + items[i].link + "\">" + items[i].title + "</a></li>";
                            });
                            everything += "</ul>";
                            $("#search").html(everything);
                        }
                    });
                });

                $("#weatherButton").click(function(e) {
                    let value = $("#cityField").val();
                    $("#displayCity").text(value);
                    e.preventDefault()

                    let myURL = "https://api.openweathermap.org/data/2.5/weather?units=imperial&appid=490d5594e67a318f4caf74e528fb9295&q=";
                    myURL += value;
                    $.ajax({
                        url: myURL,
                        dataType: "json",
                        success: function(data) {
                            let location = data["name"];
                            let weather = data["weather"][0]["main"];
                            let temp = data["main"]["temp"];
                            let weatherIcon = data["weather"][0]["icon"];
                            let humidity = data["main"]["humidity"];
                            let minTemp = data["main"]["temp_min"];
                            let maxTemp = data["main"]["temp_max"];
                            let windSpeed = data["wind"]["speed"];
                            var weatherData = "<img src = \"http://openweathermap.org/img/w/" + weatherIcon + ".png\"/>";
                            weatherData += "<ul class = \"list-unstyled\">"
                            weatherData += "<li class = \"sub-text\">Location: " + location;
                            weatherData += "<li class = \"sub-text\">Weather: " + weather + " (" + temp + "&#8457;)";
                            weatherData += "<li class = \"sub-text\">Low: " + minTemp + "&#8457; | High: " + maxTemp + "&#8457;";
                            weatherData += "<li class = \"sub-text\">Humidity: " + humidity + "%";
                            weatherData += "<li class = \"sub-text\">Wind: " + windSpeed + " mph";
                            weatherData += "</ul>"
                            $("#weather").html(weatherData);
                        }
                    });
                });

            });
        </script>
    </head>
    <body>
        <div class = "container-fluid text-center beachbackground">
               <h1 class = "main-header">Weather</h1>
        </div>
        <div class = "container-fluid text-center greenbackground">
            <h2 class = "subheader">Enter the name of a Utah city</h2>
            <br>
            <form autocomplete = "off">
                <input type="text" id="cityField" value="" class = "black-text">
                <input id="weatherButton" type="submit" value="Submit" class = "black-text">
                <span id="txtHint"></span>
                <br>
                <br>
                <p class = "sub-text">City</p>
                <textarea id="displayCity" class = "black-text">No City</textarea>
            </form>
        </div>
        <div class = "container-fluid text-center bluebackground">
            <p class = "sub-text">Current Weather</p>
            <div id="weather">No weather</div>
        </div>

        <div class = "container-fluid text-center orangebackground">
            <h2 class = "subheader">Search Stackoverflow</h2>
            <br>
            <form autocomplete = "off">
                <input type = "text" id = "stackoverflowField" value = "" class = "black-text">
                <input id = "searchButton" type= "submit" value = "Search" class = "black-text">
            </form>
            <div id = "search" class = "text-left"></div>

        </div>

    </body>
</html>