joinpursuit · rios-isabelle-farrah · Mar 18, 2021
diff --git a/README.md b/README.md
@@ -60,7 +60,7 @@ Your website should be responsive and work on screens of different sizes.
   - Image should have a height of 100px.
   - Header should have a margin of 20 pixels on the bottom.
   - Header background color should be `green`.
-- **Main Area**
+- **Main Area**'
   - Main area should contain all other content on the page.
   - Width: 70 percent.
   - Content should be oriented in a row

diff --git a/index.html b/index.html
@@ -1,11 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <script src="./rickMorty.js" defer></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="./rickMorty.css">
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="icon" type="image/png" href="./assets/favicon.jpeg"/>
+    <!-- <link rel="icon" type="image/png" href="./assets/favicon.jpeg"/> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
+<title>"Szechuan Sauce"</title>
+    <header>
+        <h1>Rick & Morty</h1>
+    <img src="./assets/rickAndMorty.png" alt=""> 
+    </header>
+
+
+<ul id="all-characters"></ul>
+
+
+
+
+
+
+
+
+
 </body>
+
+<main>
+    <section id="character-info">
+        <h3></h3>
+        <img src="" alt="" id="show-image">
+        <p id='status'></p>
+        <p id='location-name'></p>
+    </section>
+    <section id="character-comments-section">
+        <form action="" id="form">
+            <label for=""></label><br>
+            <input type="text" id='input' required><br>
+            <input type="submit" id='subButton' value="Comment">
+
+        </form>
+       <ul id="character-comments-ul">   
+       </ul>
+    </section>
+</main>
 </html>
diff --git a/rickMorty.css b/rickMorty.css
@@ -0,0 +1,111 @@
+body{
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+header{
+  background-color: green;
+  display: flex;
+  justify-content: space-around;
+  width: 70%;
+  margin: auto;
+  margin-bottom: 20px;
+  align-items: center;
+  height: 200px;
+  font-family: fantasy;
+}
+h1{
+  font-size: 70px;
+  /* padding-left: 5%; */
+}
+header>img{
+width: 130px;
+height: 130px;
+}
+#all-characters{
+  list-style: none;
+  display: flex;
+  width: 70%;
+  margin: auto;
+  padding-inline-start: 0px;
+  justify-content: space-between;
+  overflow-x: scroll;
+  /* margin-left: 15%;  */
+  /* height: 160px; */
+  /* padding: 3px; */
+}
+/* #character-comments-ul{
+  font-size: 40px;
+
+
+} */
+figcaption{
+  background-color: black;
+  text-align: center;
+  color:white;
+  font-size: 28px;
+  margin-top: 14px;
+}
+
+main{
+visibility: hidden;
+background-color: black;
+display: flex;
+width: 70%;
+margin-left: 15%;
+justify-content: space-around;
+color:white;
+border: solid white 4px;
+}
+
+label{
+  font-size: 33px;
+
+}
+
+h3{
+  font-weight: bold;
+  font-size: 38px;
+}
+#liComment{
+  font-weight: bold;
+  font-size: 38px;
+}
+
+form{
+  margin-top: 10%;
+  text-align: center;
+  color:white;
+}
+#status,#location-name{
+  font-size: 24px;
+}
+#subButton{
+
+  height: 30px;
+  font-size: 18px;
+  width:70% ;
+}
+
+#character-comments-section{
+  width: 40%;
+}
+#input{
+  width:90%;
+  height: 30px;
+  margin-top: 8px;
+  font-size: 28px;
+}
+
+#character-comments-ul{
+
+  font-size: 25px;
+font-family: sans-serif;
+}
+
+
+
+.li-class-comments{
+  text-align: left;
+}
diff --git a/rickMorty.js b/rickMorty.js
@@ -0,0 +1,98 @@
+let form = document.getElementById('form')
+let allComments = document.getElementById("character-comments-ul")
+let userInput = document.getElementById('input')
+let title = document.querySelector('title')
+let h3 = document.querySelector('h3')
+let h2 = document.createElement('h2')
+
+form.addEventListener('submit',(event)=>{
+  event.preventDefault()
+  let liComment = document.createElement('li')
+liComment.classList.add("li-class-comments");
+liComment.innerHTML = `<b>${title.textContent}:</b> ${event.target.input.value}`;
+allComments.appendChild(liComment)
+  userInput.value =""
+})
+
+
+const showMain = (el)=>{
+  let main = document.querySelector('main')
+  main.style.visibility = "visible"
+  let showImage = document.getElementById('show-image')
+  showImage.src = el.image
+  showImage.setAttribute("height", "300");
+  let h3 = document.querySelector('h3')
+  let status = document.querySelector('#status')
+  let location = document.querySelector('#location-name')
+  let title = document.querySelector('title')
+  let label = document.querySelector('label')
+  label.textContent.innerHTML = ""
+  h3.textContent = el.name
+  status.textContent = `status: ${el.status}`
+  location.textContent = `location: ${el.location.name}`
+  title.textContent = el.name
+  label.textContent = `What would this character say about Jerry?`
+}
+
+
+
+let ulChars = document.getElementById('all-characters')
+const getRickAndMorty = async (event) => {
+  try {
+    let res = await axios.get("https://rickandmortyapi.com/api/character/");
+    twentyChars = res.data.results
+    twentyChars.forEach(el => {
+      let liChar = document.createElement('li')
+     liChar.id = "photo-img"
+     let eachChar = document.createElement('img')
+            eachChar.setAttribute("width", "200");
+         eachChar.setAttribute("height", "200");
+     let textChar = document.createElement('figcaption')
+     textChar.textContent = el.name
+     eachChar.src = el.image
+     liChar.appendChild(eachChar)
+     liChar.appendChild(textChar)
+     ulChars.appendChild(liChar)
+     liChar.addEventListener('click',(event)=>{
+showMain(el)
+     })            
+   });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+
+
+
+
+document.addEventListener('DOMContentLoaded',(event)=>{
+  getRickAndMorty()
+})
+
+
+
+
+
+
+// <!-- 
+//     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.
+
+//     Please feel free to include additional `section`s and elements if they make styling the **burp** app easier.
+
+//     The user should be able to:
+
+//     - Side scroll through the `all-characters` ul and 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).
+//     <title>Szechuan Sauce</title> -->