reprograma · PaulaReisT · Jul 23, 2022
diff --git a/paula-reis/data.json b/paula-reis/data.json
@@ -0,0 +1,47 @@
+[
+  {
+    "imagem": "./images/pose.jpg",
+    "titulo": "Pose",
+    "ano": "2018",
+    "diretor": "Ryan Murphy",
+    "generos": ["Drama"],
+    "elenco": ["Dominique Jackson", "Indya Moore", "Mj Rodriguez", "Angelica Ross", "Hailie Sahar"], 
+    "instagram": "https://www.instagram.com/poseonfx/"
+  },
+  {
+    "imagem": "./images/manhas.jpg",
+    "titulo": "Manhãs de Setembro",
+    "ano": "2021",
+    "diretor": "Luis Pinheiro",
+    "generos": ["Drama"],
+    "elenco": ["Liniker", "Linn da Quebrada"], 
+    "instagram": "https://www.instagram.com/explore/tags/manhasdesetembroserie/"
+  },
+  {
+    "imagem": "./images/euphoria.jpg",
+    "titulo": "Euphoria",
+    "ano": "2019",
+    "diretor": "Sam Levinson",
+    "generos": ["Drama"],
+    "elenco": ["Hunter Schafer", "Ron Leshem", "Daphna Levin"], 
+    "instagram": "https://www.instagram.com/euphoria/"
+  },
+  {
+    "imagem": "./images/veneno.jpeg",
+    "titulo": "Veneno",
+    "ano": "2020",
+    "diretor": "Javier Ambrossi",
+    "generos": ["Drama", "Biografia"],
+    "elenco": ["Daniela Santiago", "Jedet Sánchez", "Isabel Torres", "Lola Rodríguez", "Paca La Piraña"], 
+    "instagram": "https://www.instagram.com/venenolaserie/"
+  },
+  {
+    "imagem": "./images/legendary.jpg",
+    "titulo": "Legendary",
+    "ano": "2020",
+    "diretor": "Rik Reinholdtsen",
+    "generos": ["Reality Show", "Competição"],
+    "elenco": ["Leiomy Maldonado", "Megan Thee Stallion", "Dashaun Wesley"], 
+    "instagram": "https://www.instagram.com/legendarymax/"
+  }
+]
diff --git a/paula-reis/images/Pose.jpg b/paula-reis/images/Pose.jpg
diff --git a/paula-reis/images/euphoria.jpg b/paula-reis/images/euphoria.jpg
diff --git a/paula-reis/images/legendary.jpg b/paula-reis/images/legendary.jpg
diff --git a/paula-reis/images/manhas.jpg b/paula-reis/images/manhas.jpg
diff --git a/paula-reis/images/veneno.jpeg b/paula-reis/images/veneno.jpeg
diff --git a/paula-reis/index.html b/paula-reis/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Desafio JSON-CARDS</title>
+</head>
+
+<body>
+    <h1>Séries das lacradoras</h1>
+
+
+    <section class="cards_container">
+
+    </section>
+
+
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/paula-reis/script.js b/paula-reis/script.js
@@ -0,0 +1,123 @@
+/* 
+
+O exercício consiste em usar JavaScript para popular os campos corretamente com os dados do arquivo data.json (ou do objeto JSON) um site de informações sobre séries protagonizadas por mulheres trans e travestis, neste caso a página exibe 5 séries, em 5 cards diferentes em uma só página;
+
+Importante:
+
+1. Crie seu próprio layout usando HTML e CSS nos arquivos já criados nesta pasta;
+2. Repare que este Json é uma matriz, logo é possível usar métodos de array para acessar seu conteúdo;
+3. Entregue este exercício da maneira que conseguir, use o exemplo da sala para guiar nesta construção;
+
+*/
+
+let JSON = [
+  {
+    "imagem": "./images/pose.jpg",
+    "titulo": "Pose",
+    "ano": "2018",
+    "diretor": "Ryan Murphy",
+    "generos": ["Drama"],
+    "elenco": ["Dominique Jackson", "Indya Moore", "Mj Rodriguez", "Angelica Ross", "Hailie Sahar"], 
+    "instagram": "https://www.instagram.com/poseonfx/"
+  },
+  {
+    "imagem": "./images/manhas.jpg",
+    "titulo": "Manhãs de Setembro",
+    "ano": "2021",
+    "diretor": "Luis Pinheiro",
+    "generos": ["Drama"],
+    "elenco": ["Liniker", "Linn da Quebrada"], 
+    "instagram": "https://www.instagram.com/explore/tags/manhasdesetembroserie/"
+  },
+  {
+    "imagem": "./images/euphoria.jpg",
+    "titulo": "Euphoria",
+    "ano": "2019",
+    "diretor": "Sam Levinson",
+    "generos": ["Drama"],
+    "elenco": ["Hunter Schafer", "Ron Leshem", "Daphna Levin"], 
+    "instagram": "https://www.instagram.com/euphoria/"
+  },
+  {
+    "imagem": "./images/veneno.jpeg",
+    "titulo": "Veneno",
+    "ano": "2020",
+    "diretor": "Javier Ambrossi",
+    "generos": ["Drama", "Biografia"],
+    "elenco": ["Daniela Santiago", "Jedet Sánchez", "Isabel Torres", "Lola Rodríguez", "Paca La Piraña"], 
+    "instagram": "https://www.instagram.com/venenolaserie/"
+  },
+  {
+    "imagem": "./images/legendary.jpg",
+    "titulo": "Legendary",
+    "ano": "2020",
+    "diretor": "Rik Reinholdtsen",
+    "generos": ["Reality Show", "Competição"],
+    "elenco": ["Leiomy Maldonado", "Megan Thee Stallion", "Dashaun Wesley"], 
+    "instagram": "https://www.instagram.com/legendarymax/"
+  },
+]
+
+const cardContainer = document.querySelector(".cards_container");
+
+/* CRIAR UMA FUNÇÃO PARA PREENCHER OS CARDS */
+
+function preencherCards() {
+JSON.forEach((obj) => {
+  const div = document.createElement("div"); // Criando o elemento no html
+  div.className = "card"; // Criando um nome para o elemenro no html
+  cardContainer.appendChild(div); // Adotando esse elemento (Container adota a div)
+
+  //repetir os comandos para todos os items
+
+  const img = document.createElement("img");
+  img.setAttribute("src", obj.imagem); // Preenchendo os elementos com a informção dada pela lista do array (tbm repetir esse processo para as demais informações)
+  img.className = "card_image";
+  div.appendChild(img);
+
+  const titulo = document.createElement("h2");
+  titulo.className = "card_h2";
+  titulo.innerText = `${obj.titulo}`;
+  div.appendChild(titulo);
+
+  const hr = document.createElement("hr");
+  div.appendChild(hr);
+
+  const ano = document.createElement("p");
+  ano.className = "ano"
+  ano.innerText = `${obj.ano}`;
+  div.appendChild(ano);
+
+  const diretor = document.createElement("p");
+  diretor.className = "diretor";
+  diretor.innerText = `${obj.diretor}`;
+  div.appendChild(diretor);
+
+  const generos = document.createElement("p");
+  generos.className = "generos";
+  generos.innerText = `${obj.generos}`;
+  div.appendChild(generos);
+
+  const elenco = document.createElement("p");
+  elenco.className = "elenco";
+  elenco.innerText = `${obj.elenco}`;
+  div.appendChild(generos);
+
+  const hrDois = document.createElement("hr");
+  div.appendChild(hrDois);
+
+  const ancora = document.createElement("a");
+  ancora.className = "card_ancora";
+  ancora.setAttribute("href", obj.instagram);
+  div.appendChild(ancora);
+
+  const instagramImage = document.createElement("img");
+  instagramImage.className = "instagram_image";
+  instagramImage.setAttribute("src", "./images/instagram.png");
+
+  ancora.appendChild(instagramImage);
+});
+}
+
+preencherCards(); 
+
diff --git a/paula-reis/style.css b/paula-reis/style.css
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;1,400&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    list-style: none;
+    font-size: 10px;
+    font-family: 'Nunito', sans-serif;
+    /* https://fonts.google.com/specimen/Nunito */
+}
+
+body {
+    min-height: 100vh;
+    width: 100%;
+    background-color: #1f1f1f;
+}
+
+h1 {
+    text-align: center;
+    padding-top: 5vh;
+    font-size: 40px;
+    box-sizing: border-box;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    color: white;
+    text-shadow: 2px 2px 0 #7A7A7A;
+}
+
+
+h2 {
+    font-size: 3rem;
+}
+
+p {
+    font-size: 2rem;
+    color: white;
+}
+
+.cards_container {
+    display: flex;
+    width: 100vw;
+    height: 85vh;
+    justify-content: center;
+    align-items: center;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    background-color: rgb(107, 107, 107);
+    width: 350px;
+    height: 550px;
+    margin: 10px;
+    border-radius: 10px;
+    align-items: center;
+    justify-content: space-evenly;
+    -webkit-box-shadow: 0px 8px 15px 2px rgba(255,255,255,0.42); 
+    box-shadow: 0px 8px 15px 2px rgba(255, 255, 255, 0.42);
+}
+
+.card_image {
+    margin-top: 1rem;
+    border-radius: 5%;
+    border: solid 2px #aaaaaa50;
+    width: 200px;
+    height: 180px;
+}
+
+.card_h2 {
+    font-size: 16x;
+    color: rgb(255, 255, 255);
+}
+
+hr {
+    width: 250px;
+    opacity: 0.2;
+    margin: 1rem 0;
+}
+
+.instagram_image {
+    width: 45px
+}