From 16720a661d34399d224c2d5998d6ddacc3c3fc5d Mon Sep 17 00:00:00 2001 From: Jeffrey Date: Sun, 21 Mar 2021 16:46:16 -0400 Subject: [PATCH] practice exam --- .vscode/settings.json | 3 +++ index.html | 26 ++++++++++++++++++++- index.js | 54 +++++++++++++++++++++++++++++++++++++++++++ style.css | 51 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 133 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json create mode 100644 index.js create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/index.html b/index.html index 248ffe9..31c6f58 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,33 @@ - + Szechuan Sauce + + + +
+

Rick & Morty

+ +
+ +
+
+

+ +

+

+
+
+
+ + +
+
    +
    +
    \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..1974b27 --- /dev/null +++ b/index.js @@ -0,0 +1,54 @@ +console.log("hello"); +const ul = document.querySelector("#all-characters"); +const main = document.querySelector("main"); +const char = document.querySelector("#character-name"); +const species = document.querySelector("#character-status"); +const img = document.querySelector("#character-img"); +const place = document.querySelector("#character-location"); +const title = document.querySelector("title"); + +const form = document.querySelector("form") +const comments = document.querySelector("#character-comments-ul") + +const characters = async () => { + try { + const res = await axios.get("https://rickandmortyapi.com/api/character"); + res.data.results.forEach((charURL) => { + const listOfCharacters = document.createElement("li"); + const img = document.createElement("img"); + const p = document.createElement("p"); + // debugger + img.classList.add("char"); + img.src = charURL.image; + img.value = charURL.id; + p.innerText = charURL.name; + listOfCharacters.classList.add("photo-img"); + listOfCharacters.appendChild(img); + listOfCharacters.appendChild(p); + // debugger + ul.appendChild(listOfCharacters); + }); + } catch (err) { + console.log(err); + } +}; +characters(); +ul.addEventListener("click", async (e) => { + main.style.display = "flex"; + const url = `https://rickandmortyapi.com/api/character/${e.target.value}`; + const res = await axios.get(url); + char.innerText = res.data.name; + img.src = res.data.image; + species.innerHTML = `Status: ${res.data.status}`; + place.innerHTML = `Location: ${res.data.location.name}`; + title.innerHTML = res.data.name; +}); + +form.addEventListener("submit", (e)=>{ + e.preventDefault() + const comment= document.querySelector("#input"); + const li = document.createElement("li") + li.innerHTML = `${title.textContent}: ${comment.value} ` + comments.appendChild(li); + comment.value = "" +}) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6016a5a --- /dev/null +++ b/style.css @@ -0,0 +1,51 @@ +body{ + background-color: black; + display: flex; + flex-direction: column; + align-items: center; + color: white; + /* justify-content: space-around; */ +} + +header{ + background-color: green; + display: flex; + justify-content: space-between; + width: 70%; + height: 150px; + margin-bottom: 20px; + padding: 0 30px; +} +header > #rickAndMorty{ + height: 100px; +} +h1{ + font-family: fantasy; +} + +/* #photo-img{ + list-style: none; +} */ +/* .char{ + height: 60px; + +} */ + + +main{ + display: none; + border: 5px solid white; + width: 70%; +} +input[type="text"]{ + width: 380px; +} + +#all-characters{ + display: flex; + list-style: none; + width: 70%; + padding: 0; + margin: 0; + overflow-x: scroll; +} \ No newline at end of file