diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..6a37e3a
Binary files /dev/null and b/.DS_Store differ
diff --git a/index.html b/index.html
index 3233671..0ccf1f3 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,22 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Weather App</title>
+    <link href="weatherapp.css" rel="stylesheet">
 </head>
 <body>
-    <h1>Hola Mundo</h1>
+    <div>
+        <h1>Weather App</h1>
+        
+        <input type="number" id="zipcode" placeholder="Enter zipcode">
+        <button id="forecast">Enter zipcode</button>
+        <div id="weatherinfo"></div>
+        <p id="output"></p>
+        <p id="location"></p>
+    </div>
+    
+    
+    
+    <script src="weatherapp.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/weatherapp.css b/weatherapp.css
new file mode 100644
index 0000000..e4bf32a
--- /dev/null
+++ b/weatherapp.css
@@ -0,0 +1,7 @@
+body {
+    background-color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 1.1em;
+    color: gray;
+}
+
diff --git a/weatherapp.js b/weatherapp.js
new file mode 100644
index 0000000..35691a3
--- /dev/null
+++ b/weatherapp.js
@@ -0,0 +1,54 @@
+
+const apiKey = "9d60ac7e8eb3d17560a9e4046dc3f540";
+// add click handler for button
+document.getElementById("forecast").addEventListener("click", getData);
+
+function getData() {
+    // console.log("get data");
+    // const weatherInfo = document.getElementById("weatherInfo");
+    // need the zipcode entered
+    let zipcode =
+    document.getElementById("zipcode").value;
+    // console.log("zipcode is " + zipcode);
+    // set up api
+    const endpoint =
+    "https://api.openweathermap.org/data/2.5/forecast"
+    // "https://api.openweathermap.org/data/2.5/weather";
+    // "http://api.zippopotam.us/US/"+zipcode;
+    const query = "?zip=" + zipcode + "&units=imperial&appid=" + apiKey;
+    const url = endpoint + query;
+    // console.log(url);
+    const xhr = new XMLHttpRequest();
+    // set up response
+    xhr.addEventListener("load", responseReceivedHandler);
+    // required for json
+    xhr.responseType = "json";
+    // open the connection "endpoint"
+    xhr.open("GET", url);
+    xhr.send();
+  
+};
+
+function responseReceivedHandler() {
+    const weatherInfo = document.getElementById("output");
+    if (this.status === 200) {
+        console.log(this.response);
+        const data = this.response;
+        
+        // put data on the page
+        let output = "<p>City: " + data.city.name + " </p>";
+        // output += "<p>Current temp: " + data.main.temp + "&deg;F</p>";
+        output += "<p>Current temp: " + data.list[0].main.temp + "&deg;F</p>";
+        output += "<p>Latitude: " + data.city.coord.lat + "</p>";
+        output += "<p>Longitude: " + data.city.coord.lon + "</p>";
+        // output += "<p>Description: " + data.weather[0].description + "</p>";
+        // output += "<p>Humidity: " + data.main.humidity + "%</p>";
+        // display this in the div
+        
+        weatherInfo.innerHTML = output;
+        }
+    else {
+        weatherInfo.innerHTML = "City Unavailable";
+    }
+}
+
