Resilient-Labs · mau11 · Oct 4, 2025 · Oct 5, 2025 · Oct 5, 2025 · Oct 5, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,42 @@
-# 📊 Project: Complex API 2
-
-### Goal: Use data returned from one api to make a request to another api and display the data returned
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# Baby Name Selector App
+
+> Get inspired to choose the perfect baby name by checking out related songs.
+
+> <img src="./images/screenshot.png" alt="Screenshot of completed Baby Name Selector API App" width="500">
+
+## Table of Contents
+
+1. [Tech Stack](#tech-stack)
+1. [Development](#development)
+   1. [Baby Names API](#baby-names-api)
+   1. [Spotify API](#spotify-api)
+   1. [Notes](#notes)
+
+## Tech Stack
+
+- **HTML**
+- **CSS**
+- **JavaScript**
+
+## Development
+
+### Baby Names API
+
+- Obtain a free API key from API Ninjas at: https://api-ninjas.com/.
+- Update the `API_NINJA_KEY` value with your key on line 1 of main.js.
+
+### Spotify API
+
+- Obtain your free `CLIENT_ID` and `CLIENT_SECRET` from Spotify at: https://developer.spotify.com/documentation/web-api.
+- In the terminal, run the following command to get a temporary access token, replacing `CLIENT_ID` and `CLIENT_SECRET` accordingly (tokens expire in one hour). See https://developer.spotify.com/documentation/web-api/tutorials/client-credentials-flow for more information.
+
+  `curl -X POST "https://accounts.spotify.com/api/token" \
+-H "Content-Type: application/x-www-form-urlencoded" \
+-d "grant_type=client_credentials&client_id=CLIENT_ID&client_secret=CLIENT_SECRET"`
+
+- Update the `SPOTIFY_TOKEN` value with your generated token on line 2 of main.js.
+- Open the app in your browser, select a gender, pick a name and get inspired!
+
+### Notes
+
+Visit the official API Ninjas' Baby Names documentation at https://api-ninjas.com/api/babynames and the Spotify documentation at https://developer.spotify.com/documentation/web-api/ for more information on API use, copyright, and rate limitations.
diff --git a/images/screenshot.png b/images/screenshot.png
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Get inspired to choose the perfect baby name with a musical twist."
+    />
+    <meta
+      name="keywords"
+      content="baby, name, selector, generator, spotify, music"
+    />
+
+    <title>Baby Name Selector</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Baby Name Selector</h1>
+    <main>
+      <section id="genders">
+        <label class="card">
+          <span>Girl</span>
+          <input name="gender" id="girl" type="radio" value="girl" />
+        </label>
+        <label class="card">
+          <span>Boy</span>
+          <input name="gender" id="boy" type="radio" value="boy" />
+        </label>
+        <label class="card">
+          <span>Neutral</span>
+          <input name="gender" id="neutral" type="radio" value="neutral" />
+        </label>
+      </section>
+
+      <button>Find a Name</button>
+    </main>
+    <section id="name-list"></section>
+    <section id="music-list"></section>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>