joinpursuit · CoreenCooper · Mar 19, 2021 · Mar 19, 2021 · Mar 19, 2021 · Mar 19, 2021
diff --git a/README.md b/README.md
@@ -24,17 +24,17 @@ Wubba lubba dub dub!!! Create an out of this world app using the [Rick And Morty
 See an app video [here](https://www.youtube.com/watch?v=bGyZYHU3cJ0) and can be played with [here](https://joinpursuit.github.io/Module-2-Practice-Final-Assessment/)
 
 This **burp** app should have (in order of placement in the HTML):
-- A title tag that starts with the text "Szechuan Sauce"
-- A header tag. Make it mean and make it green. 
-- Inside the header an `h1` that reads "Rick & Morty" with fantasy font.
-- Inside the header an image of Rick and Morty (check your assets folder!)
-
-- A `ul` with the id `all-characters` that contains an `li`'s with an image (id=`photo-img`) of each character in the API (first page only), as well as the characters name.
-- A `main` tag that starts not on the page
-- Inside of `main` should be two sections. The first section should have the id `character-info` the second should have the id `character-comments-section`.
-- Inside of `character-info` should be be an `h3` an `img` and two `p` tags. 
-- Inside of `character-comments-section` should be a `form`, including a "text" `input` and a "submit" `input`, that allows users to submit (not save, just add to the frontend) what they would say about the character Jerry. On submission the input should clear.
-- Also insider `character-comments-section`  should be a `ul` with the id `character-comments-ul` that contains the submitted comments of each character.
+- *html - A title tag that starts with the text "Szechuan Sauce"
+- css - A header tag. Make it mean and make it green. 
+- css *html - Inside the header an `h1` that reads "Rick & Morty" with fantasy font.
+- *html - Inside the header an image of Rick and Morty (check your assets folder!)
+
+- js *html - A `ul` with the id `all-characters` that contains an `li`'s with an image (id=`photo-img`) of each character in the API (first page only), as well as the characters name.
+- js - A `main` tag that starts not on the page
+- js - Inside of `main` should be two sections. The first section should have the id `character-info` the second should have the id `character-comments-section`.
+- js - Inside of `character-info` should be be an `h3` an `img` and two `p` tags. 
+- js - Inside of `character-comments-section` should be a `form`, including a "text" `input` and a "submit" `input`, that allows users to submit (not save, just add to the frontend) what they would say about the character Jerry. On submission the input should clear.
+- js - Also insider `character-comments-section`  should be a `ul` with the id `character-comments-ul` that contains the submitted comments of each character.
 
 Please feel free to include additional `section`s and elements if they make styling the **burp** app easier.
 

diff --git a/cypress/integration/initial_layout_spec.js → cypress/integration/1initial_layout_spec.js b/cypress/integration/initial_layout_spec.js → cypress/integration/1initial_layout_spec.js
diff --git a/cypress/integration/styling_spec.js → cypress/integration/2styling_spec.js b/cypress/integration/styling_spec.js → cypress/integration/2styling_spec.js
diff --git a/cypress/integration/core_interaction_spec.js → ...ess/integration/3core_interaction_spec.js b/cypress/integration/core_interaction_spec.js → ...ess/integration/3core_interaction_spec.js
diff --git a/index.css b/index.css
@@ -0,0 +1,45 @@
+body {
+    background-color: black;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+header {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin: auto;
+    width: 70%;
+    height: 150px;
+    background-color: rgb(0, 128, 0);
+    font-family: fantasy;
+}
+
+header > img {
+    height: 100px;
+}
+
+main {
+    display: none;
+    width: 70%;
+    border: white solid 1px;
+    /* display: flex; */
+    margin: auto;
+    /* justify-content: space-around; */
+}
+
+#all-characters {
+    display: flex;
+    list-style-type: none;
+    width: 70%;
+    padding: 0;
+    margin: auto;
+    overflow-x: scroll;
+    text-align: center;
+}
+
+input[type="text"] {
+    width: 380px;
+}
diff --git a/index.html b/index.html
@@ -1,11 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <title>Szechuan Sauce</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <link rel="icon" type="image/png" href="./assets/favicon.jpeg"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous"></script>
+    <script src="index.js" defer></script>
+
+    <link rel="stylesheet" href="index.css">
+
 </head>
+
 <body>
+    <header>
+        <h1>Rick & Morty</h1>
+        <img src="/assets/rickAndMorty.png" alt="Rick and Morty">
+    </header>
+    <ul id="all-characters"></ul>
+    <main>
+        <section id="character-info">
+            <h3 id="name"></h3>
+            <img id="picture" src="" alt="">
+            <p id="status"></p>
+            <p id="location"></p>
+        </section>
+
+        <section id="character-comments-section">
+            <form>
+                <h2>What would this character say about Jerry?</h2>
+                <input id="user-input" type="text" required>
+                <input id="submit-comment" type="submit" value="Comment">
+            </form>
+            <ul id="character-comments-ul"></ul>
+        </section>
+    </main>
+
 </body>
-</html>
+</html>
+
diff --git a/index.js b/index.js
@@ -0,0 +1,123 @@
+// click on a character.
+// When they select a character, the `main` should appear and information about that
+// character (name, image, status, location name) should populate in the `character-info` section.
+// When they click on a different character, this information should be replaced.
+// The page `title` should also match the name of the character selected.
+// Use the `form`, to submit a character comment. Each comment should be a new `li` inside of
+// `character-comments-ul`, with the selected character's name (in bold) and a comment (not bold).
+
+// https://rickandmortyapi.com/documentation
+
+const ul = document.querySelector("#all-characters");
+const name = document.querySelector("#name");
+const main = document.querySelector("main");
+const form = document.querySelector("form");
+const title = document.querySelector("title");
+const picture = document.querySelector("#picture");
+const userInput = document.querySelector("#user-input");
+const charStatus = document.querySelector("#status");
+const charLocation = document.querySelector("#location");
+const characterCommentsUl = document.querySelector("#character-comments-ul");
+
+const displayAllCharacters = (res) => {
+  res.results.forEach((char) => {
+    const li = document.createElement("li");
+    const img = document.createElement("img");
+    const p = document.createElement("p");
+    p.textContent = char["name"]; // display name
+    img.src = char["image"]; // display image
+    li.classList.add("photo-img"); // add class name
+    ul.appendChild(li);
+    li.appendChild(img);
+    li.appendChild(p);
+  });
+};
+
+// event.path[0][0].value
+const eachCharacter = (res, event) => {
+  // debugger;
+  // remove if statement
+  main.style.display = "flex";
+  const selection = event.target.parentElement.innerText;
+  res.results.forEach((char) => {
+    if (selection === char.name) {
+      title.textContent = char.name;
+      name.textContent = char.name;
+      picture.src = char.image;
+      charStatus.textContent = char.status;
+      charLocation.textContent = char.location.name;
+    }
+  });
+};
+
+const displayComments = (event) => {
+  event.preventDefault();
+  const li = document.createElement("li");
+  li.innerHTML = `<b>${title.textContent}:</b> ${userInput.value}`;
+  characterCommentsUl.appendChild(li);
+  userInput.value = "";
+};
+
+// async - allows us to assign the results of fetch to a variable
+const getCharacters = async () => {
+  // res variable has the same value as the result from .them(promise object)
+  try {
+    // const res = await fetch("https://rickandmortyapi.com/api/character?page=1");
+    const res = await axios.get("https://rickandmortyapi.com/api/character?page=1");
+    // to get json it must be assigned to a variable with await - must put await in front of json()
+    // axios skips the step of adding await to json()
+    // remove  axios returns json() for us
+    // const data = await res.json();
+
+    displayAllCharacters(res.data);
+
+    // look about creating this event listener outside
+    ul.addEventListener("click", (event) => {
+      // updated res to data
+      eachCharacter(res.data, event);
+    });
+
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+// const getCharacters = () => {
+//   fetch("https://rickandmortyapi.com/api/character?page=1")
+//     .then((res) => {
+//       if (!res.ok) {
+//         throw Error(`Girrrl ya wrong! ${res.status}`);
+//       }
+//       return res.json();
+//     })
+//     .then((res) => {
+//       displayAllCharacters(res);
+
+//       // look about creating this event listener outside
+//       ul.addEventListener("click", (event) => {
+//         eachCharacter(res, event);
+
+//       });
+
+//     })
+//     .catch((err) => {
+//       console.log(err);
+//     });
+// };
+
+document.addEventListener("submit", displayComments);
+
+getCharacters();
+
+// Vanessa ///////////
+
+// const chosenCharacter = e.target.parentElement.innerText;
+// res.data.results.forEach((el) => {
+//   if (el.name === chosenCharacter) {
+//     debugger;
+//     characterHeader.textContent = el.name;
+//     characterImage.src = el.image;
+//     characterStatus.textContent = el.status;
+//     characterLocation.textContent = el.location.name;
+//   }
+// });