joinpursuit · ObaidRustemi · Mar 23, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5505
+}
diff --git a/index.css b/index.css
@@ -0,0 +1,46 @@
+body {
+  background-color: black;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: white;
+}
+
+header {
+  width: 70%;
+  height: 150px;
+  display: flex;
+  justify-content: space-around;
+  background-color: green;
+  margin-bottom: 20px;
+  font-family: fantasy;
+}
+
+header > img {
+    height: 100px;
+}
+
+main {
+    display:none;
+    border: 3px solid white;
+    width: 70%;
+    /* visibility: hidden; */
+
+}
+
+input[type="text"] {
+    width: 380px;
+}
+
+#all-characters {
+    display: flex;
+    list-style: none;
+    width: 70%;
+    padding: 0;
+    margin: 0;
+    overflow-x: scroll;
+}
+
+#character-comments-ul {
+   color: white;
+}
diff --git a/index.html b/index.html
@@ -1,11 +1,37 @@
 <!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">
+    <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">
+</header>
+<ul id="all-characters"></ul>
+<main>
+    <section id="character-info">
+        <h3 id="character-name"></h3>
+        <img id="character-image">
+        <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">
+           <ul id="character-comments-ul"></ul>
+        </form>
+    </section>
+</main>
+
+
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,61 @@
+// const { default: axios } = require("axios");
+
+const allCharacters = document.querySelector("#all-characters");
+const main = document.querySelector("main");
+const name = document.querySelector("#character-name");
+const image = document.querySelector("#character-image");
+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");
+    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);
+    });
+  } catch (err) {
+    // console.log(err)
+  }
+};
+getAllCharacters();
+
+allCharacters.addEventListener("click", async (e) => {
+  main.style.display = "flex";
+
+  //   debugger;
+  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:</b>${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);
+debugger
+    comment.value = ""
+
+
+    console.log(comment)
+    // debugger;
+})
diff --git a/index2.css b/index2.css
@@ -0,0 +1,85 @@
+ body {
+  border-style: solid;
+  background-color: black;
+} 
+
+header {
+  background-color: rgb(0, 128, 0);
+  height: 150px;
+  font-family: fantasy;
+  margin-left: 10%;
+  margin-right: 10%;
+  display: flex;
+  justify-content: space-around;
+  /* border-style: solid; */
+}
+
+
+h1 {
+  padding-left: 125px;
+  margin-left: 125px;
+  padding-top: 20px;
+  color: white;
+  font-size: 36px;
+  /* border-style: solid; */
+}
+
+#photo-slider-div {
+  margin-left: 10%;
+  margin-right: 10%; 
+  padding: none;
+  /* height: auto; */
+  /* line-height: 50px; */
+  background-color: black;
+  color: Black;
+  /* overflow:auto; */
+  /* padding: 0.5rem; */
+  overflow-x: scroll; 
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+
+}
+#all-characters {
+    display: flex;
+    margin-left: none;
+    padding-left: none;
+    padding: none;
+    color: white;
+    text-align: center;
+    list-style-type: none;
+}
+
+.slide {
+    margin: none;
+    padding: none;
+    /* flex-shrink: 0; */
+    /* height: 100%;  */
+}
+
+#header-image > img {
+    height: 100px;
+}
+.photo-img {
+  padding: none;
+  margin: none;
+  /* object-fit: cover; */
+  ;
+
+}
+
+main {
+    border-style: solid;
+    border-color: white;
+    display: flex;
+    margin-top: 20px;
+
+}
+
+#character-info {
+    border-style: solid;
+}
+
+
+/* div {
+  border-style: solid;
+} */
diff --git a/index2.html b/index2.html
@@ -0,0 +1,47 @@
+<!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" />
+    <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>
+      <div id="header-h1"><h1>Rick & Morty</h1></div>
+      <div id="header-img">
+        <img
+          src="assets/rickAndMorty.png"
+          alt="rickAndMorty"
+          height="150px"
+          width="auto"
+        />
+      </div>
+    </header>
+    <div id="photo-slider-div">
+      <ul id="all-characters">
+        <!-- <li id="photo-img"></li> -->
+      </ul>
+    </div>
+    <main>
+      <section id="character-info">
+        <h3 id="character-name-h3"></h3>
+        <img />
+        <p></p>
+        <p></p>
+      </section>
+      <section id="character-comments-section">
+        <form>
+          <input type="text" />
+          <button type="submit">Comment</button>
+        </form>
+        <ul id="character-comments-ul"></ul>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/index2.js b/index2.js
@@ -0,0 +1,32 @@
+const characterUl = document.querySelector("#all-characters");
+// const characterPhoto = document.querySelector("#photo-img");
+
+const getRickAndMortyPics = async () => {
+  try {
+    const res = await axios.get("https://rickandmortyapi.com/api/character");
+
+    res.data.results.forEach(async (character) => {
+      const characterLi = document.createElement("li");
+      const pictureDiv = document.createElement("div");
+      const characterName = document.createElement("p");
+      const characterImg = document.createElement("img");
+
+      characterImg.classList.add("photo-img");
+      pictureDiv.classList.add("slide")
+
+      characterName.innerHTML = character.name;
+      characterImg.src = character.image;
+
+      characterUl.appendChild(characterLi);
+
+      characterLi.appendChild(pictureDiv)
+      pictureDiv.appendChild(characterImg);
+      pictureDiv.appendChild(characterName);
+    //   debugger
+    });
+  } catch {
+    console.log("sorry there was an error");
+  }
+};
+getRickAndMortyPics();
+// before