diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..eeb2655
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/weather.css b/css/weather.css
new file mode 100644
index 0000000..4ec81bf
--- /dev/null
+++ b/css/weather.css
@@ -0,0 +1,7 @@
+div {
+    display: flex;
+    justify-content: space-evenly;
+}
+#weather {
+    flex-direction: row;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3233671..221aa36 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="css/weather.css">
+    <title>Weather App</title>
 </head>
 <body>
-    <h1>Hola Mundo</h1>
+    <h1>Welcome to the Weather App!</h1>
+        <button id="load" onclick="getZipCode()">Get Weather</button>
+    <div>
+        <p id="zipCode"></p>
+        <p id="weather"></p>
+        <script src="js/weather.js"></script>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/.DS_Store b/js/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/js/.DS_Store differ
diff --git a/js/weather.js b/js/weather.js
new file mode 100644
index 0000000..c796a79
--- /dev/null
+++ b/js/weather.js
@@ -0,0 +1,48 @@
+let lon = 0.0;
+let lat = 0.0;
+let temp = document.getElementById('weather');
+let loc = document.getElementById('zipCode');
+
+function getZipCode() {
+    const zipCode = prompt("Enter zip code to get City, State, and Weather?");
+    let xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            let locationResponse = JSON.parse(xhr.responseText);
+            lon = locationResponse.places[0].longitude;
+            lat = locationResponse.places[0].latitude;
+            const city = locationResponse.places[0]["place name"];
+            const state = locationResponse.places[0]["state abbreviation"];
+            // console.log(locationResponse);
+            // console.log(lon);
+            // console.log(lat);
+            getWeather(lon, lat);
+            const imgBkgrd = `<img src="" id="forcast">`;
+            loc.innerHTML = city + ", " + state;
+        // } else if (xhr.status === 404) {
+        //     alert = "404 error, Response Not Found";
+        }     
+    }
+    xhr.open('GET', `http://api.zippopotam.us/US/${zipCode}`);
+    xhr.send();
+}
+    let xhr2 = new XMLHttpRequest();                
+    xhr2.onreadystatechange = function() { 
+        if (xhr2.readyState === 4 && xhr2.status === 200) {
+            let weatherResponse = JSON.parse(xhr2.responseText);
+            //let forcast = weatherResponse.dataseries[0].weather;
+            min = weatherResponse['dataseries'][0]['temp2m'].min * 9 / 5 + 32;
+            max = weatherResponse['dataseries'][0]['temp2m'].max * 9 / 5 + 32;
+            //let tempAvg = (min + max) / 2;
+            console.log(weatherResponse);
+            //.innerHTML = Math.floor(max);
+            temp.innerHTML = Math.floor(max) + `&degF`.sup();
+
+            //document.getElementById('weather').innerHTML = Math.floor(max)+`&degF`.sup();
+        } 
+    }
+
+function getWeather(lon, lat) {
+    xhr2.open('GET', `http://www.7timer.info/bin/api.pl?product=civillight&lon=${lon}&lat=${lat}&output=json`);
+    xhr2.send();
+}
\ No newline at end of file
