diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..9be2831 Binary files /dev/null and b/favicon-32x32.png differ diff --git a/index.html b/index.html index d61786b..52e4365 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,8 @@ - + + This is the City component; + const { city, state, population, wages, lat, long } = props.data; + + return ( +
+
+{/* + Printing out all the properties for testring: + 
{JSON.stringify(props.data, null, 2)}
+ 
{JSON.stringify(props, null, 2)}
*/} + +

+ {city}, {state} +

+ +
+
+ ); + } +// ZipSearchField component handles user input function ZipSearchField(props) { - return
This is the ZipSearchField component
; + const { value, onChange } = props; + + return ( +
+ + {/* Printing out all the properties for testring: + 
{JSON.stringify(props, null, 2)}
*/} + + + +
+ ); } function App() { + const [zipCode, setZipCode] = useState(""); + const [cityData, setCityData] = useState([]); + const [error, setError] = useState(null); + + // Function to handle input changes + const handleZipCodeChange = async (event) => { + const newZipCode = event.target.value; + setZipCode(newZipCode); + + // Avoid unnecessary API calls for incomplete zip codes + if (newZipCode.length === 5) { + try { + const response = await fetch(`https://ctp-zip-code-api.onrender.com/zip/${newZipCode}`); + // Both do the same thing // + // const response = await fetch("https://ctp-zip-code-api.onrender.com/zip/" + newZipCode); + if (response.ok) { + const data = await response.json(); + // console.log(data); + setCityData(data); + setError(null); // Clear error if request is successful + } else { + setCityData([]); + setError("No results found"); + } + } catch (error) { + setCityData([]); + setError("An error occurred while fetching data."); + } + } else { + setCityData([]); // Clear city data if input is cleared or incomplete + setError(null); // Clear error when resetting + } + }; + return (
-

Zip Code Search

+

Zip Code Search

+
- + {/* ZipSearchField component */} + + + {/* Show city information if available, otherwise show error */}
- - + {error &&

{error}

} + {cityData.length > 0 && + cityData.map((city, index) => ( + + ))}
diff --git a/statue-liberty_4856218.png b/statue-liberty_4856218.png new file mode 100644 index 0000000..ea5b29b Binary files /dev/null and b/statue-liberty_4856218.png differ diff --git a/statue-liberty_760051.png b/statue-liberty_760051.png new file mode 100644 index 0000000..5a31cc7 Binary files /dev/null and b/statue-liberty_760051.png differ