joinpursuit · AnJuHyppolite · Mar 19, 2021 · Mar 20, 2021 · Mar 21, 2021 · Mar 23, 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.
+<!-- - 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. -->
 
 Please feel free to include additional `section`s and elements if they make styling the **burp** app easier.
 

diff --git a/index.css b/index.css
@@ -0,0 +1,41 @@
+body {
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: white;
+}
+
+header {
+    background-color: green;
+    width: 70%;
+    height: 150px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 30px;
+    margin-bottom: 20px;
+}
+
+h1 {
+   font-family: fantasy;
+}
+
+header > img {
+    height: 100px;
+}
+
+main {
+    width: 70%;
+    border: 5px solid white;
+    display: none;
+}
+
+input[type="text"] {
+    width: 380px;
+}
+#all-characters {
+    display: flex;
+    list-style: none;
+    width: 70%;
+    overflow-x: scroll;
+}
diff --git a/index.html b/index.html
@@ -1,11 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <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">
-</head>
-<body>
-</body>
-</html>
+  <head>
+    <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://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="./index.js" defer></script>
+    <link rel="stylesheet" href="index.css" />
+    <title>Szechuan Sauce</title>
+  </head>
+
+  <body>
+    <header>
+      <h1>Rick & Morty</h1>
+      <img src="./assets/rickAndMorty.png" alt="Ricky and Morty" />
+    </header>
+
+    <ul id="all-characters"></ul>
+
+    <main>
+      <section id="character-info">
+        <h3 id="character-name"></h3>
+        <img id="character-img" />
+        <p id="character-status"></p>
+        <p id="character-location"></p>
+      </section>
+
+      <section id="character-comments-section">
+        <form>
+          <input id="comment" type="text" />
+          <input type="submit" />
+        </form>
+
+        <ul id="character-comments-ul"></ul>
+
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,53 @@
+const allCharacters = document.querySelector("#all-characters");
+const main = document.querySelector("main");
+const name = document.querySelector("#character-name");
+const image = document.querySelector("#character-img");
+const status = document.querySelector("#character-status");
+const place = document.querySelector("#character-location");
+const title = document.querySelector("title");
+const form = document.querySelector("form")
+const comments = document.querySelector("#character-comments-ul")
+
+const getAllCharacters = async () => {
+  try {
+    const res = await axios.get("https://rickandmortyapi.com/api/character");
+    // debugger;
+    res.data.results.forEach((character) => {
+      const li = document.createElement("li");
+      const img = document.createElement("img");
+      const p = document.createElement("p");
+      // console.log(character);
+      img.src = character.image;
+      img.value = character.id;
+      p.innerText = character.name;
+      li.appendChild(img);
+      li.appendChild(p);
+      allCharacters.appendChild(li);
+      // debugger;
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+getAllCharacters();
+
+allCharacters.addEventListener("click", async (e) => {
+  main.style.display = "flex";
+  const url = `https://rickandmortyapi.com/api/character/${e.target.value}`;
+  const res = await axios.get(url);
+  name.innerText = res.data.name;
+  image.src = res.data.image;
+  status.innerHTML = `<b>Status:</b> ${res.data.status}`;
+  place.innerHTML = `<b>Location: ${res.data.location.name}`;
+  title.innerText = res.data.name;
+})
+
+form.addEventListener("submit", (e) => {
+  e.preventDefault();
+  const comment = document.querySelector("#comment");
+  const li = document.createElement("li");
+  li.innerHTML = `<b>${title.textContent}:</b> ${comment.value}`
+  comments.appendChild(li)
+  comment.value = ""
+
+})