From 738eb9068abd915be201dac509734319a2496fe2 Mon Sep 17 00:00:00 2001 From: Farrah Isabelle Rios Date: Thu, 18 Mar 2021 19:26:35 -0400 Subject: [PATCH] finsish pre-assessment --- README.md | 2 +- index.html | 41 ++++++++++++++++++- rickMorty.css | 111 ++++++++++++++++++++++++++++++++++++++++++++++++++ rickMorty.js | 98 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 250 insertions(+), 2 deletions(-) create mode 100644 rickMorty.css create mode 100644 rickMorty.js diff --git a/README.md b/README.md index 955af7c..5997c66 100644 --- 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 index 248ffe9..1090ef9 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,50 @@ + + + - + +"Szechuan Sauce" +
+

Rick & Morty

+ +
+ + + + + + + + + + + + + +
+
+

+ +

+

+
+
+
+
+
+ + +
+
    +
+
+
\ No newline at end of file diff --git a/rickMorty.css b/rickMorty.css new file mode 100644 index 0000000..ab29d5d --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/rickMorty.js b/rickMorty.js new file mode 100644 index 0000000..53b752a --- /dev/null +++ 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 = `${title.textContent}: ${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() +}) + + + + + + +// \ No newline at end of file