Weather Server - WIP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSC 346 Weather Midterm</title>
    <style>
    #city, #weather {visibility: hidden;}
    </style>
    <script>

        //Variable for API Key
         const apiKey = "&appid=9e4a3d156fc79cf7f5d851d7c30520d1";

         //Variable for API URL
         const URL = "https://api.openweathermap.org/data/2.5/weather?";

        //Variable to hold the units we want weather in (Farenheit)
         const measure = "&units=imperial";

        //Variable to hold the Cors that Noynaert says I need because reasons
         const cors = "https://cors-anywhere.herokuapp.com/";


         //Function to display the temperature in the temp space
         function showTemp(temp){
             let foundTemp = document.getElementById("tempSpace");
             foundTemp.innerHTML = temp;
         }

        //Function to display the description in the description space
        function showDesc(desc){
             let foundDesc = document.getElementById("descSpace");
             foundDesc.innerHTML = desc;
         }

         //Function to display the Wind Speed in the windspeed space
         function showSpeed(speed){
             let foundSpeed = document.getElementById("speedSpace");
             foundSpeed.innerHTML = speed;
         }

         //Function to display the Wind Direction in the direction space
         function showDirection(direction){
             let foundDirection = document.getElementById("directionSpace");
             foundDirection.innerHTML = direction;
         }

         //Function to display the Location name in the name space
         function showName(name){
             let foundName = document.getElementById("nameSpace");
             foundName.innerHTML = name;
         }

        //Function to fetch and process the weather for the selected area.
        function getWeather(weatherAPI){
            console.log("You're in getWeather()");
            //Fetch the weather
            fetch(weatherAPI)
            .then(response => {
                console.log(response);
                return response.json();
            })
            //Process the payload and extract the bits we need
            .then(payload => {
                console.log("This is your Payload: ");
                console.log(payload);

                console.log("This is your Temp: ");
                console.log(payload.main.temp);
                showTemp(payload.main.temp);

                console.log("This is your Description: ");
                console.log(payload.weather[0].description);
                showDesc(payload.weather[0].description);

                console.log("This is your Wind Speed: ");
                console.log(payload.wind.speed);
                showSpeed(payload.wind.speed);

                console.log("This is your Wind Direction: ");
                console.log(payload.wind.deg);
                showDirection(payload.wind.deg);

                console.log("This is your Location Name: ")
                console.log(payload.name);
                showName(payload.name);
            })

        }

        //Function to pass the value selected by the user in the City question
        function showWeather(me){
            var coordinates = me.value.split(";")
            console.log("The lat of the city you selected is: "+ coordinates[0]);
            console.log("The long of the city you selected is: "+ coordinates[1]);

            weather.style.visibility="visible";
            let lat = "lat=" + coordinates[0];
            let long = "&lon=" + coordinates[1].trim();
            let weatherAPI = cors+URL+lat+long+apiKey+measure;
            console.log(weatherAPI);
            getWeather(weatherAPI);

        }

        //Function to pass the value selected by the user to getCity for use
        function showQ2(me){
            console.log("You've selected the state: "+me.value);
            city.style.visibility="visible";
            getCity('locations/cities/'+me.value+'.json');

        }
        //Listener to run on page load, and get the file that lists all states
        window.addEventListener('load', (event) => {
        getStates('locations/cities/00states.json');
            });

        //Function to display the states as option values within the state select drop down
        function displayStates(states){
            let y = ' ';
            let x = ' ';

            x+= `<option value="" disabled selected>Choose State</option>`
            for(i in states){

                y+= `<option value="${states[i].code}">${states[i].state}</option>`

            }
            document.getElementById('states').innerHTML = x+y;
        }
        //Function to display the Cities as option values within the city select drop down
        function displayCity(cities){
            let y = ' ';
            let x = ' ';

            x+= `<option value="" disabled selected>Choose City</option>`
            for(i in cities){

                y+= `<option value="${cities[i].lat}; ${cities[i].long}">${cities[i].city}</option>`

            }
            document.getElementById('cities').innerHTML = x+y;

        }
        //Function to Fetch and Read the File of states
        function getStates(fileName){
            //Fetch the file
            fetch(fileName)
            .then(response => {
                return response.json();
            })
            //Read the File of states and display it
            .then(list => {
                displayStates(list);
            })
            .catch( err => console.log("Caught Error is" + err));
        }

          //Function to fetch the relevant city file after a state is chosen in showQ2
         function getCity(stateName){
            //Fetch the file
            fetch(stateName)
            .then(response => {
                return response.json();
            })
            //Read the file and display its contents
            .then(list => {
                displayCity(list);
            })
            .catch( err => console.log("Caught Error is" + err));
        }
    </script>
</head>
<body>
    <h1>Local Weather</h1>
    <div id="state">
        <h2>Please choose a State: </h2>

        <select id="states" name="state" form="stateform" onchange="showQ2(this)">

</select>

    </div>
    <div id ="city">
        <h2>Please choose a City: </h2>
        <select id = "cities" name="city" form="cityform" onchange="showWeather(this)">

        </select>


    </div>
    <div id = "weather">
        <h2>The Weather For Your Selected City Is:</h2>
        <p>Temperature: <span id = "tempSpace">&nbsp;</span></p>
        <p>Description: <span id = "descSpace">&nbsp;</span></p>
        <p>Wind Speed: <span id = "speedSpace">&nbsp;</span></p>
        <p>Wind Direction: <span id = "directionSpace">&nbsp;</span></p>
        <p>Location Name: <span id = "nameSpace">&nbsp;</span></p>
    </div>
</body>
</html>