Added Zip code to city converter form page

api-playground/.editorconfig

@@ -0,0 +1,7 @@
+indent_size = 2
+indent_style = space
+tab_width = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8

api-playground/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

api-playground/README.md

@@ -0,0 +1,62 @@
+# 🔍 CHALLENGE 2: API PI
+
+## Problem
+
+**In this challenge, you'll be working with APIs and user input to create a dynamic form. Your task is to clone the provided GitHub repository and implement a form that interacts with any API of your choice. Here’s a breakdown of steps to complete this challenge:**
+
+1. **Clone the Repository:**
+   Start by cloning the GitHub repository from the [`api-playground`](https://github.com/umn-adc/api-playground) repository. This repository already contains some helpful libraries for completing the challenge.
+
+2. **Choose an API:**
+   Select an API; This could be anything from a weather API to a public data API—whatever sparks your interest! The only requirement is that the API must accept at least **query or ID parameters** or a **request body**.
+
+3. **Create a Form Page:**
+
+   - Implement a form in a new page in `routes/` that allows users to input the necessary parameters for the API request.
+   - Upon submission, your form should send requests to the chosen API based on user input and display the results on that same page.
+     > ### 💡 **Hint**!
+     >
+     > You can use the provided `Input`, `Button`, and `ResponseViewer` components if you'd like! It might make your life a tiny bit easier.
+
+4. **Add to the Router:**
+   Integrate your new form page into the existing router structure of the application (look at `routes/router.tsx`). You should see a link to your page in `Home` after doing this.
+
+5. **Make a Pull Request:**
+   Once you've implemented the above steps, push your changes to a new branch and create a pull request for review.
+
+## Scoring
+
+### 100 points
+
+### Submission deadline
+
+`Tue Nov 7 2024 23:59:59 GMT-0600 (Central Standard Time)`
+
+### Bonus
+
+**⏱️ Submission Time**
+
+> **`[+20 points]`** ≤ **1** day \
+> **`[+15 points]`** ≤ **3** days \
+> **`[+10 points]`** ≤ **5** days \
+> **`[-1 point]`** ∙ _(**your leaderboard position** - 1)_
+
+**✨ _Extra Points_ ✨**
+
+- Using `async/await` for API requests **`(+20 points)`**
+- Configuring an axios object with a `baseURL` and using the `config` parameter in your request **`(+15 points)`**
+- Custom page design to enhance user experience **`(+10 points)`**
+
+### Example API choices
+
+- [OpenWeatherMap API](https://openweathermap.org/api)
+- [The Cat API](https://thecatapi.com/)
+- [PokeAPI](https://pokeapi.co/)
+
+## Submission
+
+### GitHub Pull Request
+
+Submit your pull request to the main branch of the [`api-playground`](https://github.com/umn-adc/api-playground) repository. Make sure to include a descriptive title and comments explaining your implementation.
+
+**_Good luck, and happy coding!_**

api-playground/eslint.config.js

@@ -0,0 +1,34 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+import eslintConfigPrettier from "eslint-config-prettier";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+
+import { FlatCompat } from "@eslint/eslintrc";
+import path from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  resolvePluginsRelativeTo: __dirname,
+});
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { languageOptions: { globals: globals.browser } },
+  {
+    parserOptions: {
+      project: "./tsconfig.json",
+    },
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  ...compat.extends(["airbnb", "airbnb/hooks", "airbnb-typescript"]),
+  eslintConfigPrettier,
+  eslintPluginPrettierRecommended,
+];

api-playground/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vite-awesome</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>