From 8761acd46fc5698229ba0aaf37bd2a9fe996f061 Mon Sep 17 00:00:00 2001 From: Jolena Truong Date: Tue, 23 Feb 2021 19:27:19 -0500 Subject: [PATCH] first commit --- Studio Ghibli/index.html | 17 ++++++++++++++++ Studio Ghibli/scripts.js | 40 ++++++++++++++++++++++++++++++++++++ Studio Ghibli/style.css | 44 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+) create mode 100644 Studio Ghibli/index.html create mode 100644 Studio Ghibli/scripts.js create mode 100644 Studio Ghibli/style.css diff --git a/Studio Ghibli/index.html b/Studio Ghibli/index.html new file mode 100644 index 0000000..9688895 --- /dev/null +++ b/Studio Ghibli/index.html @@ -0,0 +1,17 @@ + + + + + + + Ghibli App + + + + + + +
+ + + diff --git a/Studio Ghibli/scripts.js b/Studio Ghibli/scripts.js new file mode 100644 index 0000000..663f397 --- /dev/null +++ b/Studio Ghibli/scripts.js @@ -0,0 +1,40 @@ +const app = document.getElementById('root') + +const logo = document.createElement('img') +logo.src = 'https://p.kindpng.com/picc/s/57-578400_official-studio-ghibli-logo-hd-png-download.png' + +const container = document.createElement('div') +container.setAttribute('class', 'container') + +app.appendChild(logo) +app.appendChild(container) + +var request = new XMLHttpRequest() +request.open('GET', 'https://ghibliapi.herokuapp.com/films', true) +request.onload = function () { + // Begin accessing JSON data here + var data = JSON.parse(this.response) + if (request.status >= 200 && request.status < 400) { + data.forEach((movie) => { + const card = document.createElement('div') + card.setAttribute('class', 'card') + + const h1 = document.createElement('h1') + h1.textContent = movie.title + + const p = document.createElement('p') + movie.description = movie.description.substring(0, 300) + p.textContent = `${movie.description}...` + + container.appendChild(card) + card.appendChild(h1) + card.appendChild(p) + }) + } else { + const errorMessage = document.createElement('marquee') + errorMessage.textContent = `Gah, it's not working!` + app.appendChild(errorMessage) + } +} + +request.send() diff --git a/Studio Ghibli/style.css b/Studio Ghibli/style.css new file mode 100644 index 0000000..d62fd7a --- /dev/null +++ b/Studio Ghibli/style.css @@ -0,0 +1,44 @@ +body{ + background-image: url(https://data.whicdn.com/images/291635471/original.gif); + background-size: 100%; + +} +#root { + max-width: 1200px; + margin: 0 auto; +} + +.container { + display: flex; + flex-wrap: wrap; +} + +.card { + margin: 1rem; + border: 1px solid gray; + border-radius: 30px; + margin-bottom: 20px; + background: white; +} + +@media screen and (min-width: 600px) { + .card { + flex: 1 1 calc(50% - 2rem); + } +} + +@media screen and (min-width: 900px) { + .card { + flex: 1 1 calc(33% - 2rem); + } +} +h1{ + border: 1px solid pink; + border-top: 50px; + border-radius: 30px; + background-color: pink; + font-size: 30px; +} +p{ + margin: 0 20px; +}