joinpursuit · alexanderl96-hub · Mar 23, 2021 · Mar 23, 2021 · Mar 23, 2021 · Mar 24, 2021
diff --git a/assets/1.jpeg b/assets/1.jpeg
diff --git a/index.html b/index.html
@@ -5,7 +5,32 @@
     <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">
+    <title>Szechuan Sauce</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="index.js" defer></script>
 </head>
 <body>
+    <header>
+        <h1>Rick & Morty</h1>
+        <img src="/assets/rickAndMorty.png" class="img">
+    </header>
+    <ul id="all-characters"></ul>
+    <main>
+        <section id="character-info">
+            <h3></h3>
+            <img src="" alt="" id="img">
+            <p id="first"></p>
+            <p id="second"></p>
+        </section>
+        <section id="character-comments-section">
+            <form action="" method="post">
+                <h2>What would this character say about Jerry?</h2>
+                <input type="text">
+                <input type="submit"></button>
+            </form>
+            <ul id="character-comments-ul"></ul>
+        </section>
+    </main>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,61 @@
+const allCharacters = document.querySelector('#all-characters')
+const comments = document.querySelector("#character-comments-ul");
+const form = document.querySelector("form")
+document.addEventListener('DOMContentLoaded', () => {
+
+  form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const input = document.querySelector("input[type=text]")
+      const title = document.querySelector("title").textContent
+      const li = document.createElement("li");
+      li.innerHTML = `<b>${title}:</b> ${input.value}`;
+      comments.appendChild(li);
+      form.reset()
+
+    });
+
+  async function allChar() {
+    const results = await axios.get("https://rickandmortyapi.com/api/character")
+    console.log(results.data)
+    const infoResult = results.data.results
+    for(let character of infoResult) {
+      const item = makeCharItem(character)
+      allCharacters.appendChild(item)
+      console.log(item)
+    }
+    function makeCharItem (character) {
+      const li = document.createElement('li')
+      const img = document.createElement('img')
+      img.src = character.image
+      img.classList.add('photo-img')
+      li.appendChild(img)
+      const text = document.createElement('p')
+      text.textContent = character.name
+      li.appendChild(text)
+      li.addEventListener('click', () => {
+        const main = document.querySelector('main');
+        main.style.display = "flex";
+        const name = document.querySelector('h3')
+        const img = document.getElementById('img')
+        const status = document.getElementById('first')
+        const location = document.getElementById('second')
+        const title = document.querySelector('title')
+        title.textContent = character.name
+        name.textContent = character.name
+        img.src = character.image
+        status.innerHTML = `<b>Status</b>: ${character.status}`
+        location.innerHTML = `<b>Location</b>: ${character.location.name}`
+
+
+
+      })
+
+      return li
+    }
+
+}
+allChar();
+})
+
+
+