diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 76232264..1f237bd5 100644
--- 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`.
-
- Quer uma dica?
-
-
-- 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```
-
- Dúvidas sobre o Git & Github?
-
Adiciomos um vídeo explicando o processo de entrega [do fork ao pull request] no Material Assincrono da A005 - Git e Github. Esse vídeo também exemplifica situações que podem acontecer durante o fluxo de utilização do Git.
-
-- 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
+
+
+
+
+
+
+
+
+
+
+
+
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
new file mode 100644
index 00000000..066f6e7b
Binary files /dev/null and b/imagens/Avengers Assemble Scene - The Avengers (2012) Movie Clip HD.mp4 differ
diff --git a/imagens/vingadores-endgame.jpg b/imagens/vingadores-endgame.jpg
new file mode 100644
index 00000000..3cf29d03
Binary files /dev/null and b/imagens/vingadores-endgame.jpg differ
diff --git a/imagens/vingadores-guerra-infinita.webp b/imagens/vingadores-guerra-infinita.webp
new file mode 100644
index 00000000..252146be
Binary files /dev/null and b/imagens/vingadores-guerra-infinita.webp differ
diff --git a/imagens/vingadores-infinita-grande.webp b/imagens/vingadores-infinita-grande.webp
new file mode 100644
index 00000000..8b063f72
Binary files /dev/null and b/imagens/vingadores-infinita-grande.webp differ
diff --git a/imagens/vingadores-ultimato.jpeg b/imagens/vingadores-ultimato.jpeg
new file mode 100644
index 00000000..4e22de1b
Binary files /dev/null and b/imagens/vingadores-ultimato.jpeg differ
diff --git a/imagens/vingadores.jpg b/imagens/vingadores.jpg
new file mode 100644
index 00000000..fd6dd4d5
Binary files /dev/null and b/imagens/vingadores.jpg differ
diff --git a/imagens/vingadores2.jpg b/imagens/vingadores2.jpg
new file mode 100644
index 00000000..2fe64090
Binary files /dev/null and b/imagens/vingadores2.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..23c40e77
--- /dev/null
+++ b/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
Lista de filmes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..b3e19573
--- /dev/null
+++ 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)
+ }
+}
+
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..90a70862
--- /dev/null
+++ b/style.css
@@ -0,0 +1,88 @@
+* {
+ padding: 0px;
+ margin: 0px;
+}
+header {
+ background-color: black;
+ color: white;
+ padding: 20px;
+}
+#busca {
+ text-align: center;
+ margin: 20px;
+}
+img {
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+ padding: 2vh 1vw;
+ margin-left: 2vw;
+}
+.lista {
+ list-style-type: none;
+ padding: 10px;
+}
+body {
+ background-image: url(./imagens/vingadores-infinita-grande.webp);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+}
+main{
+ display: grid;
+ align-items: center;
+ justify-items: center;
+ min-height: 75vh;
+}
+div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-items: center;
+ row-gap: 2vh;
+ margin-bottom: 2vh;
+ width: 40vw;
+}
+a {
+ text-decoration: none;
+}
+a:hover {
+ color: blue;
+}
+
+#section1 {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ background-color: rgb(190, 141, 50, 0.75);
+ width: 50vw;
+}
+/* #section1:hover{
+ background-image: url(./imagens/vingadores-ultimato.jpeg);
+} */
+
+
+
+footer {
+ background-color: black;
+ color: white;
+ padding: 20px;
+ text-align: center;
+}
+
+
+@media screen and (min-device-width : 481px) and (max-device-width : 920px) {
+ #section1 {
+ width: 100vw;
+ }
+}
+@media screen and (min-device-width : 280px) and (max-device-width : 510px){
+ #section1 {
+ display: grid;
+ align-items: center;
+ justify-items: center;
+ grid-template-rows: 1fr 3fr;
+ grid-template-columns: 1fr;
+ width: 100vw;
+ height: 45vh;
+ }
+}
\ No newline at end of file
-