diff --git a/index.css b/index.css new file mode 100644 index 0000000..8cb1dd9 --- /dev/null +++ b/index.css @@ -0,0 +1,85 @@ +body { + background-color: rgb(0, 0, 0); + display: flex; + flex-direction: column; + align-items: center; + color: rgb(255, 255, 255); +} + +header { + display: flex; + justify-content: space-around; + align-items: center; + font-size: 1.6em; + background-color: rgb(0, 128, 0); + width: 70%; + height: 150px; +} + +#header-img { + height: 100px; +} + +h1 { + font-family: fantasy; +} + +.photo-img { + width: 150px; +} + +#all-characters { + display: flex; + width: 70%; + overflow: scroll; + overflow-y: hidden; + margin: 20px; + padding: 0px; + list-style-type: none; +} + +#all-characters li { + text-align: center; +} + +main { + display: none; +} + +.main-show { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + width: 70%; + font-size: 1.1em; + border: 3px solid rgba(255, 217, 0, 0.8); +} + +#input-comment { + width: 380px; +} + +#character-info { + display: flex; + flex-direction: column; + align-items: center; +} + +#character-comments-section { + display: flex; + flex-direction: column; + align-items: center; +} +form { + display: flex; + flex-direction: column; + align-items: center; +} +#form-submit { + margin: 5px; +} + +#character-comments-ul { + align-self: flex-start; + padding: 0px 0px 0px 15px; +} \ No newline at end of file diff --git a/index.html b/index.html index 248ffe9..f78c5cd 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,28 @@ + Szechuan Sauce + + + +
+

Rick & Morty

+ +
+ +
+
+
+
+

What would this character say about Jerry?

+
+ + +
+ +
+
\ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..b00d0f3 --- /dev/null +++ b/index.js @@ -0,0 +1,48 @@ +document.addEventListener("DOMContentLoaded", async () => { + await axios.get("https://rickandmortyapi.com/api/character") + .then(response => { + for(const char of response.data.results){ + const li = document.createElement("li") + const img = document.createElement("img") + const p = document.createElement("p") + img.className = "photo-img" + img.src = char.image + p.textContent = char.name + li.append(img, p) + li.addEventListener("click", ()=> { + document.title = char.name + const main = document.querySelector("main") + if(main.className !== "main-show"){ + main.className = "main-show" + } + const section = document.getElementById("character-info") + const h3 = document.createElement("h3") + const img1 = document.createElement("img") + const p1 = document.createElement("p") + const p2 = document.createElement("p") + h3.id = "name" + h3.textContent = char.name + img1.src = char.image + p1.innerHTML = `Status: ${char.status}` + p2.innerHTML = `Location: ${char.location.name}` + section.innerHTML = "" + section.append(h3, img1, p1, p2) + }) + document.getElementById("all-characters").append(li) + } + }) + + const form = document.querySelector("form") + form.addEventListener("submit", event => { + event.preventDefault() + const userInput = document.querySelector("input") + if(!userInput.value.trim()){ + userInput.value = "" + return + } + const li = document.createElement("li") + li.innerHTML = `${document.getElementById("name").textContent}: ${userInput.value}` + document.getElementById("character-comments-ul").append(li) + userInput.value = "" + }) +}) \ No newline at end of file