benrbryant · benrbryant · Aug 26, 2022 · Jul 14, 2022 · Jul 14, 2022 · Aug 26, 2022
diff --git a/README.md b/README.md
@@ -1,51 +1,47 @@
 # JavaScript Promises
 
+## Objective
+
+Your objective is to handle the result of a promise with promise consumers, and update the DOM based on resolution or rejection. The Promise will resolve with an array of hobbits that should be rendered on the DOM in the form of list items. If any errors occur, feedback should be displayed to the user on the DOM.
+
 ## Getting Started
 
-1. Open your command line and navigate to your `repos` directory (if you do not have a `repos` folder, then you can use `mkdir repos` to create one)
-2. Use this template repository to start a new project in your repos folder: `git clone <repo_name>`
-3. cd `repo_name` to navigate into your new repo directory
-4. Start Visual Studio Code and select 'Open Folder'. Then select `repo_name` to open the folder in the editor (or just type `code .` in your terminal inside the repo directory)
-5. Follow the instructions on the README.md file to complete exercises
-6. Open the app.js file to get started
-
-## Exercise 1
-
-```
-function watchTurorialCallback(callback, errorCallback) {
-  let userLeft = false;
-  let userWatchingLiveStream = true;
-
-  if (userLeft) {
-    errorCallback({
-      name: "User Left",
-      message: ":(",
-    });
-  } else if (userWatchingLiveStream) {
-    callback("Thumbs up and Subscribe");
-  }
-}
-
-watchTurorialCallback(
-  (message) => {
-    console.log(message);
-  },
-  (error) => {
-    console.log(error.name + " " + error.message);
-  }
-);
-```
-
-- The above function can be replicated as a Promise.
-
-1. Declare a variable `watching` and assign it a new promise object
-2. Inside of the promise constructor, declare a variable named `userWatchingLiveStream`.
-3. Add a `if/else` conditional that checks if `userWatchingLiveStream` is true
-4. If `userWatchingLiveStream` is true, call the `resolve` method with "Thumbs up and Subscribe!"
-5. If false, call the `reject` method with "User left."
-
-- Once you have created your new promise:
-
-1. Call `watching` and add a promise chain using `.then` and `.catch`
-2. Pass in a function callback to `.then` that takes in a message and `console.log`'s the message
-3. Pass in a function callback to `.catch` that takes in an error and `console.log`'s the error
+Fork and Close the Exercise Repo to get started: [JavaScript Promises](https://github.com/Bryantellius/JavaScript_Promises)
+
+## Steps
+
+The JavaScript Promises exercise has multiple steps:
+
+- [Exercise 1: Select the Needed DOM Elements](#exercise-1-select-the-needed-dom-elements)
+- [Exercise 2: Handle the Promise](#exercise-2-handle-the-promise)
+- [Exercise 3: Update the DOM](#exercise-3-update-the-dom)
+
+### Exercise 1: Select the Needed DOM Elements
+
+1. Select the paragraph with `id="error"` and assign it to a variable
+2. Select the unordered list with `id="list"` and assign it to a variable
+
+### Exercise 2: Handle the Promise
+
+1. Call `getList`
+2. From the result, call the `then` promise consumer method and pass in a callback function
+   - The callback function should receive the resolved value as the parameter
+   - Start out just logging the result to console to check if it is the value you expect
+3. From the result of the `then` promise consumer method, chain a `catch` method consumer and pass in a callback function
+   - The callback function should receive the resolved value as the parameter
+   - Start out just logging the result to console to check if it is the value you expect
+
+### Exercise 3: Update the DOM
+
+1. Replace the `console.log` statement in the `then` method callback parameter to
+   - iterate through the resolved list of hobbits
+   - create a `li` for each hobbit, and append the `li` to the selected `ul` from the DOM
+2. Replace the `console.log` statement in the `catch` method callback parameter to
+   - display the resolved failure object's `message` property as the text content of the selected `p` from the DOM
+
+## Helpful Links
+
+If you feel stuck, or would like to see the finished code for this exercise to check your work, check out:
+
+- [JavaScript Promises Exercise Video on Vimeo](#)
+- [JavaScript Promises Exercise Repo on Github](https://github.com/Bryantellius/JavaScript_Promises/tree/Answer)
diff --git a/app.js b/app.js
@@ -1,18 +1,25 @@
-console.log("Hello World!\n==========\n");
+/**
+ * 
+ * @returns A promise that is designed to resolve with a list of hobbits, or potentially fail with an failure object. The failure object includes a boolean success property and a string message property.  
+ */
+function getList() {
+  return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        let potentialFail = Math.round(Math.random() * 100) < 10;
+        if (potentialFail) {
+          resolve(["Bilbo", "Frodo", "Sam", "Merry", "Pippin"])
+        } else {
+          reject({ success: false, message: "Failed to get list of hobbits." })
+        }
+
+      }, 10)
+  })
+}
 
-// Exercise 1 Section
-console.log("EXERCISE 1:\n==========\n");
+// TODO: Handle the resolved or rejected states of the promise
 
-let watching = new Promise((resolve, reject) => {
-  let userWatchingLiveStream = false;
+// TODO: If the promise resolves with the list of hobbits
+// Render the list of hobbits as list items within the unordered list with id="list" (check the index.html file)
 
-  if (userWatchingLiveStream) {
-    resolve("Thumbs up and Subscribe!");
-  } else {
-    reject("User left.");
-  }
-});
-
-watching
-  .then((message) => console.log(message))
-  .catch((error) => console.log(error));
+// TODO: If the promise rejects with the failure object
+// Display the failure message in the paragraph element with id="error" (check index.html file)
diff --git a/index.html b/index.html
@@ -16,10 +16,11 @@
     >
       <div>
         <h1>JavaScript Promises</h1>
-        <p>
-          Open the Browser Console to view your work (Right-Click => Inspect or
-          fn+F12)
-        </p>
+        <section>
+          <h2>List of Hobbits</h2>
+          <p id="error"></p>
+          <ul id="list"></ul>
+        </section>
       </div>
     </main>