From 386179eb8f3a8a566681aa6a6d29fcf9a69ce776 Mon Sep 17 00:00:00 2001 From: erika Date: Mon, 29 Apr 2019 22:14:51 -0300 Subject: [PATCH 1/2] exercicio de API - Studio Ghibli --- exe-ghibli/index.html | 4 ++-- exe-ghibli/script.js | 41 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/exe-ghibli/index.html b/exe-ghibli/index.html index eb33e07..42aff28 100644 --- a/exe-ghibli/index.html +++ b/exe-ghibli/index.html @@ -17,8 +17,8 @@
- - + + \ No newline at end of file diff --git a/exe-ghibli/script.js b/exe-ghibli/script.js index ff83131..5fc980a 100644 --- a/exe-ghibli/script.js +++ b/exe-ghibli/script.js @@ -19,4 +19,43 @@ const obj = [ "title": "Only Yesterday", "description": "It’s 1982, and Taeko is 27 years old, unmarried, and has lived her whole life in Tokyo. She decides to visit her family in the countryside, and as the train travels through the night, memories flood back of her younger years: the first immature stirrings of romance, the onset of puberty, and the frustrations of math and boys. At the station she is met by young farmer Toshio, and the encounters with him begin to reconnect her to forgotten longings. In lyrical switches between the present and the past, Taeko contemplates the arc of her life, and wonders if she has been true to the dreams of her childhood self." } - ] \ No newline at end of file + ] + + //Aqui começa o exercicio + + const app = document.getElementById("root"); + const container = document.createElement("div"); + //Atribuindo uma class dentro da div chamada container + container.setAttribute("class", "container"); + + app.appendChild(container); + + //Fazer com que o servidor leia a array de filmes e imprima isso no console + //usando forEach + obj.forEach(filme => { + console.log(filme.title) + console.log(filme.description) + + //Criando os Cards para cada item do array + let card = document.createElement("div"); + card.setAttribute("class", "card"); + //o espaço container vai adotar as variaveis criadas, cards + container.appendChild(card); + + //Criando o elemento de um titulo + let titulo = document.createElement("h1"); + titulo.innerHTML = filme.title + card.appendChild(titulo); + + //Criando o elemento da descrição + let descricao = document.createElement("p"); + descricao.textContent = filme.description + card.appendChild(descricao); + }); + + //usando for + // for(let i=0; i Date: Tue, 30 Apr 2019 19:21:56 -0300 Subject: [PATCH 2/2] Castelo Animado --- exe-ghibli/script.js | 4 ++++ exe-ghibli/style.css | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/exe-ghibli/script.js b/exe-ghibli/script.js index 5fc980a..e975885 100644 --- a/exe-ghibli/script.js +++ b/exe-ghibli/script.js @@ -18,6 +18,10 @@ const obj = [ { "title": "Only Yesterday", "description": "It’s 1982, and Taeko is 27 years old, unmarried, and has lived her whole life in Tokyo. She decides to visit her family in the countryside, and as the train travels through the night, memories flood back of her younger years: the first immature stirrings of romance, the onset of puberty, and the frustrations of math and boys. At the station she is met by young farmer Toshio, and the encounters with him begin to reconnect her to forgotten longings. In lyrical switches between the present and the past, Taeko contemplates the arc of her life, and wonders if she has been true to the dreams of her childhood self." + }, + { + "title": "Howl's Moving Castle", + "description": "The story is set in a fictional kingdom where both magic and early 20th-century technology are prevalent, against the backdrop of a war with another kingdom. The film tells the story of a young hatter named Sophie after she is turned into an old woman by a witch's curse. She encounters a wizard named Howl, and gets caught up in his resistance to fighting for the king." } ] diff --git a/exe-ghibli/style.css b/exe-ghibli/style.css index 37971f0..1f704aa 100644 --- a/exe-ghibli/style.css +++ b/exe-ghibli/style.css @@ -71,7 +71,7 @@ p { } .card:nth-child(2n) h1 { - background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); + background-image: linear-gradient(120deg, #fdfb5d 0%, #cb48ff 100%); } .card:nth-child(4n) h1 {