labenuexercicios · helanymelo · Jul 25, 2022 · Aug 1, 2022 · Aug 6, 2022 · Aug 6, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -1,62 +1,19 @@
 # Projeto de Introdução ao desenvolvimento web
 
-Esse é o projeto de introdução aos fundamentos do desenvolvimento Web. Aqui, vamos praticar a estrutura do que faremos pelo curso todo. O objetivo é construir uma página estilizada, e com **lista** e **busca** utilizando manipulação de DOM, praticando o conteúdo do módulo com JS:
-
-- Variáveis
-- Operadores
-- Strings
-- Arrays
-- Objetos
-- Condicionais
-- Laços
-- Funções
-- Funções de Array
-- HTML e CSS
-- Flex e Grid
-- DOM e responsividade
-
-## Enunciado
-
-A página consiste em um HTML, ligado a um ou mais arquivos CSS, e um ou mais arquivos JS (recomendamos apenas um de cada, no entanto). O objetivo é conseguir criar uma página estática, depois estilizada, e por fim, dinâmica. A página vai catalogar (ou listar) itens que você escolher, e deve possuir um sistema simples de busca, que recebe um texto, e procura por nomes/títulos que correspondam a este texto.
-
-
-
-[Exemplo](https://user-images.githubusercontent.com/11279432/180304632-97d6705d-100c-4272-8255-8aae19813700.mov)
-
-
-
-### Lista de requisitos
-
-- [ ]  Tela de listagem com título
-- [ ]  Cabeçalho na página
-- [ ]  Área principal com barra de pesquisa e botão
-- [ ]  Espaço para lista dos itens
-- [ ]  ao menos três itens listados
-- [ ]  Itens listados **utilizando manipulação do DOM**
-- [ ]  Rodapé na página com identificação
-- [ ]  Barra de pesquisa com alerta se tentar pesquisar com campo em branco
-- [ ]  Clique do botão executa busca entre os itens
-- [ ]  Relatório impresso no console com as informações de cada item
-- [ ]  Nome/título dos itens em letras maiúsculas
-- [ ]  Média numérica calculada e impressa no console
-- [ ]  Verificação de valores booleanos true impressa no console
-- [ ]  Utilização de Grid ou Flex para estilizar
-- [ ]  Atenção ao padrão de estilização enviado
-
-### Instruções de entrega
-
-- Faça o fork desse repositório e realize o clone da sua cópia `seu-nome-de-usuario/projeto-intro-web`.
-   <details>
-   <summary>Quer uma dica?</summary>
-   <img src="https://firebasestorage.googleapis.com/v0/b/assets-conteudo.appspot.com/o/gerais%2Ffork.png?alt=media&token=7030e997-246a-41fe-a75f-2a2ced61e54d" alt="Como adicionar o projeto no repositório"/>
-   </details>
-- Crie os arquivos do projeto dentro deste repo;
-- Execute o fluxo de entrega do git. **Lembre-se de abrir os PRs para seu próprio repositório.**
-- Para isso, você precisará fazer o projeto utilizando **branches**. Evite fazer as alterações direto na branch ```main```
-    <details>
-       <summary>Dúvidas sobre o Git & Github?</summary>
-       <p>Adiciomos um vídeo explicando o <strong>processo de entrega</strong> [do fork ao pull request] no Material Assincrono da <a href="https://classroom.google.com/w/NTM0NjA2NDg3MjIx/tc/NTM2NDg5NTQyODg4">A005 - Git e Github</a>. Esse vídeo também exemplifica situações que podem acontecer durante o fluxo de utilização do Git.</p>
-    </details>
-- Entregue o **link do repo** no [Formulário de entrega](https://forms.gle/Q1mXTJFxwVUgUnrZA).
-
-**Opcional**: Tente utilizar o **Github pages** para fazer o deploy do seu projeto.
+Página Web estilizada, com lista e busca utilizando a manipulação do DOM.
+
+## [Vídeo de apresentação](https://youtu.be/OPAFVLMZ8PM)
+
+## Landing Page
+
+![capa](https://github.com/labenuexercicios/projeto-intro-web/assets/95080358/d0657647-2861-4c9d-aecb-b5c08299e67e)
+
+
+
+
+
+
+
+
+
+
diff --git a/imagens/Avengers Assemble Scene - The Avengers (2012) Movie Clip HD.mp4 b/imagens/Avengers Assemble Scene - The Avengers (2012) Movie Clip HD.mp4
diff --git a/imagens/vingadores-endgame.jpg b/imagens/vingadores-endgame.jpg
diff --git a/imagens/vingadores-guerra-infinita.webp b/imagens/vingadores-guerra-infinita.webp
diff --git a/imagens/vingadores-infinita-grande.webp b/imagens/vingadores-infinita-grande.webp
diff --git a/imagens/vingadores-ultimato.jpeg b/imagens/vingadores-ultimato.jpeg
diff --git a/imagens/vingadores.jpg b/imagens/vingadores.jpg
diff --git a/imagens/vingadores2.jpg b/imagens/vingadores2.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!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">
+    <title>Document</title>
+    <script src="script.js" defer></script>
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <header>
+        <h1 class="cabecalho">Lista de filmes</h1>
+    </header>
+    <main id="main">
+        <article id="busca">
+            <label for=""></label>
+            <input id="input" type="text" placeholder="Pesquise aqui" value="">
+            <button onclick="busca(event)" >Buscar</button>
+        </article>
+        <div id="div-sections">
+
+        </div>
+    </main>
+    <footer>
+        <p class="proximo">Kieffer Andersen Torricilia</p>
+        <a class="proximo" target="_blank" href="https://github.com/KiefferTorricilia">GitHub</a>
+        <a class="proximo" href="https://www.linkedin.com/in/kieffer-torricilia/" target="_blank" >linkedin</a>
+    </footer>
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,209 @@
+//Filmes para ver antes de morrer
+
+let objeto1 = {
+    nome: "OS VINGADORES",
+    anoLancamento: 2012,
+    valeAPena: true,
+    diretor: "Joss Whedon",
+    elenco: ["Robert Downey Jr.", " Scarlett Johansson", " Chris Evans", " Mark Rufallo", " Chris Hemsworth", " Jeremy Renner",
+        " Tom Hiddleston", " Samuel L. Jackson"],
+    imagem: `./imagens/vingadores.jpg`,
+    link: "https://www.adorocinema.com/filmes/filme-130440/",
+};
+
+
+let objeto2 = {
+    nome: "VINGADORES: ERA DE ULTRON",
+    anoLancamento: 2015,
+    valeAPena: true,
+    diretor: "Joss Whedon",
+    elenco: [" Robert Downey Jr.", " Scarlett Johansson", " Chris Evans", " Mark Rufallo", " Chris Hemsworth", " Jeremy Renner",
+        " Tom Hiddleston", " Samuel L. Jackson", " Elizabeth Olsen", " James Spader", " Paul Bettany",],
+    imagem: `./imagens/vingadores2.jpg`,
+    link: "https://www.adorocinema.com/filmes/filme-198488/"
+};
+
+let objeto3 = {
+    nome: "VINGADORES: GUERRA INFINITA",
+    anoLancamento: 2018,
+    valeAPena: true,
+    diretor: "Anthony e Joe Russo",
+    elenco: [" Robert Downey Jr.", " Scarlett Johansson", " Chris Evans", " Mark Rufallo", " Chris Hemsworth", " Jeremy Renner",
+        " Tom Hiddleston", " Samuel L. Jackson", " Elizabeth Olsen", " Paul Bettany",],
+    imagem: `./imagens/vingadores-guerra-infinita.webp`,
+    link: "https://www.adorocinema.com/filmes/filme-218265/"
+};
+
+let objeto4 = {
+    nome: "VINGADORES: ULTIMATO",
+    anoLancamento: 2019,
+    valeAPena: true,
+    diretor: "Anthony e Joe Russo",
+    elenco: [" Robert Downey Jr.", " Scarlett Johansson", " Chris Evans", " Mark Rufallo", " Chris Hemsworth", " Jeremy Renner",
+        " Tom Hiddleston", " Samuel L. Jackson", " Elizabeth Olsen", " Paul Bettany"],
+    imagem: "./imagens/vingadores-ultimato.jpeg",
+    link: "https://www.adorocinema.com/filmes/filme-232669/"
+};
+
+let arrayObjetos = []
+arrayObjetos.push(objeto1, objeto2, objeto3, objeto4)
+
+let media = 0
+for (let i in arrayObjetos) {
+    media += arrayObjetos[i].anoLancamento
+}
+console.log(`Media dos anos de lançamento: ${media / arrayObjetos.length}`)
+
+let verificarValeAPena = arrayObjetos[0].valeAPena && arrayObjetos[1].valeAPena && arrayObjetos[2].valeAPena && arrayObjetos[3].valeAPena
+console.log(verificarValeAPena)
+
+
+//Semana 4 exercício 1
+let lista = []
+let filmes = []
+for (i in arrayObjetos) {
+    filmes.push(arrayObjetos[i].nome)
+}
+
+for (i in arrayObjetos) {
+    arrayObjetos[i].valeAPena ? lista.push(arrayObjetos[i]) : alert(`O filme ${filmes[i]} não foi adicionado`)
+}
+console.log(lista)
+
+
+
+let elenco1 = ``
+for (i in objeto1.elenco) {
+    elenco1 += `${objeto1.elenco[i]}, `
+}
+
+let elenco2 = ``
+for (i in objeto2.elenco) {
+    elenco2 += `${objeto2.elenco[i]}, `
+}
+
+let elenco3 = ``
+for (i in objeto3.elenco) {
+    elenco3 += `${objeto3.elenco[i]}, `
+}
+
+let elenco4 = ``
+for (i in objeto4.elenco) {
+    elenco4 += `${objeto4.elenco[i]}, `
+}
+
+let listaElencos = []
+listaElencos.push(elenco1, elenco2, elenco3, elenco4)
+
+
+
+
+// for(i in arrayObjetos){
+//  console.log(`nome: ${arrayObjetos[i].nome} \nlançamento: ${arrayObjetos[i].anoLancamento} \nvale a pena?: ${arrayObjetos[i].valeAPena} \ndiretor: ${arrayObjetos[i].diretor} \nroteiro: ${listaElencos[i]}`)
+// }
+
+
+
+impressaoRelatorio = (objeto) => {
+    let imprimir = ``
+    for (i in objeto) {
+        imprimir += `${i}: ${objeto[i]}\n`
+    }
+    return imprimir
+}
+console.log(impressaoRelatorio(objeto1))
+console.log(impressaoRelatorio(objeto2))
+console.log(impressaoRelatorio(objeto3))
+console.log(impressaoRelatorio(objeto4))
+
+for (i in arrayObjetos) {
+    let div = document.getElementById("div-sections")
+    let section = document.createElement("section")
+    let ul = document.createElement("ul")
+    let li1 = document.createElement("li")
+    let li2 = document.createElement("li")
+    let li3 = document.createElement("li")
+    let li4 = document.createElement("li")
+    let li5 = document.createElement("li")
+    let a = document.createElement("a")
+    let imagem = document.createElement("img")
+    section.setAttribute("id", "section1")
+    imagem.setAttribute("id", "imagem1")
+    ul.setAttribute("id", "lista1")
+    ul.setAttribute("class", "lista")
+    imagem.src = arrayObjetos[i].imagem
+    a.setAttribute("target", "_blank")
+    a.setAttribute("href", arrayObjetos[i].link)
+    a.innerHTML += `${arrayObjetos[i].nome.toUpperCase()}`
+    li1.appendChild(a)
+    li2.innerHTML = `Ano de lançamento: ${arrayObjetos[i].anoLancamento}`
+    li3.innerHTML = `Vale a pena: ${arrayObjetos[i].valeAPena}`
+    li4.innerHTML = `Diretor: ${arrayObjetos[i].diretor}`
+    li5.innerHTML = `Elenco: ${arrayObjetos[i].elenco}`
+    div.appendChild(section)
+    section.appendChild(imagem)
+    section.appendChild(ul)
+    ul.appendChild(li1)
+    ul.appendChild(li2)
+    ul.appendChild(li3)
+    ul.appendChild(li4)
+    ul.appendChild(li5)
+}
+
+
+funcBusca = (arrayObjetos, string) => {
+    for (i in arrayObjetos) {
+        if (arrayObjetos[i].nome === string) {
+            let main = document.getElementById("main")
+            let div = document.createElement("div")
+            let section = document.createElement("section")
+            let ul = document.createElement("ul")
+            let li1 = document.createElement("li")
+            let li2 = document.createElement("li")
+            let li3 = document.createElement("li")
+            let li4 = document.createElement("li")
+            let li5 = document.createElement("li")
+            let a = document.createElement("a")
+            let imagem = document.createElement("img")
+            div.setAttribute("id", "div-sections")
+            section.setAttribute("id", "section1")
+            imagem.setAttribute("id", "imagem1")
+            ul.setAttribute("id", "lista1")
+            ul.setAttribute("class", "lista")
+            imagem.src = arrayObjetos[i].imagem
+            a.setAttribute("target", "_blank")
+            a.setAttribute("href", arrayObjetos[i].link)
+            a.innerHTML += `${arrayObjetos[i].nome.toUpperCase()}`
+            li1.appendChild(a)
+            li2.innerHTML = `Ano de lançamento: ${arrayObjetos[i].anoLancamento}`
+            li3.innerHTML = `Vale a pena: ${arrayObjetos[i].valeAPena}`
+            li4.innerHTML = `Diretor: ${arrayObjetos[i].diretor}`
+            li5.innerHTML = `Elenco: ${arrayObjetos[i].elenco}`
+            main.appendChild(div)
+            div.appendChild(section)
+            section.appendChild(imagem)
+            section.appendChild(ul)
+            ul.appendChild(li1)
+            ul.appendChild(li2)
+            ul.appendChild(li3)
+            ul.appendChild(li4)
+            ul.appendChild(li5)
+        }
+    }
+}
+
+function busca(event){
+    event.preventDefault()
+    let input = document.getElementById("input").value.toUpperCase()
+    if(input === ""){
+        alert("Nenhum objeto encontrado")
+    }else{
+        document.getElementById("div-sections").remove()
+        funcBusca(arrayObjetos, input)
+    }
+}
+
+
+
+
+