diff --git a/index.html b/index.html index c94235e..862b98f 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,14 @@ - +
+

ZIP Code Lookup

+
+ + +
+
+
diff --git a/script.js b/script.js index e69de29..d52b2fd 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,24 @@ +async function fetchData() { + const zipCode = document.getElementById('zipInput').value; + + try { + const response = await fetch(`https://api.zippopotam.us/us/${zipCode}`); + + if (!response.ok){ + throw new error("could not fetch resource"); + } + const data = await response.json(); + displayData(data); + } catch (error) { + console.error('Error fetching data:', error); + } +} + +function displayData(data) { + const locationDetailsContainer = document.getElementById('locationDetails'); + locationDetailsContainer.innerHTML = ` +

${data['post code']}

+

${data.country}, ${data.places[0]['place name']}, ${data.places[0].state}

+ `; +} + diff --git a/style.css b/style.css index e69de29..ae00d6d 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,41 @@ +h1 { + text-align: center; + color: #333; +} + +.form { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.input-group { + display: flex; +} + +input[type="text"] { + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px 0 0 5px; + width: 70%; +} + +button { + padding: 10px 20px; + font-size: 16px; + background-color: #ff7b00; + color: #fff; + border: none; + border-radius: 0 5px 5px 0; + cursor: pointer; +} + + +/* Styles for location details */ +.location-details { + text-align: center; + background-color: #fff; + padding: 20px; + border-radius: 10px; +} \ No newline at end of file