Finalizado

JS/script.js

@@ -0,0 +1,203 @@
+
+
+let allAgentes = []
+
+reyna = {
+    nome: "reyna",
+    idade: 25,
+    classe: "Duelista",
+    existe: true,
+    habilidades: ["Comedora de Alma", "Intagibilidade", "Olho que cega", "Eles vão temer"],
+    imagem: "./img/personagens/reyna_thumbnail-min.png",
+    link: "https://playvalorant.com/pt-br/agents/reyna/",
+    posicao: 1,
+}
+
+viper = {
+    nome: "viper",
+    idade: 30,
+    classe: "Controlador",
+    existe: true,
+    habilidades: ["Peido Tenebroso", "Parede de fumaça", "Veneninho Slime", "Bob Marley"],
+    imagem: "./img/personagens/viper.png",
+    link: "https://playvalorant.com/pt-br/agents/viper/",
+    posicao: 2,
+}
+
+phoenix = {
+    nome: "phoenix",
+    idade: 26,
+    classe: "Duelista",
+    existe: true,
+    habilidades: ["Bola curva", "Batata quente", "Parede de fogo", "Phoenix Negra"],
+    imagem: "./img/personagens/phoenix_thumbnail-min.png",
+    link: "https://playvalorant.com/pt-br/agents/phoenix/",
+    posicao: 3,
+}
+
+sova = {
+    nome: "sova",
+    idade: 33,
+    classe: "Iniciador",
+    existe: true,
+    habilidades: ["Flecha ricochete", "Flecha Rastreadora", "Drone Abelha", "Não Existe Fusca!"],
+    imagem: "./img/personagens/sova_thumbnail-min.png",
+    link: "https://playvalorant.com/pt-br/agents/sova/",
+    posicao: 4,
+}
+
+
+let media = (sova.idade + reyna.idade + viper.idade) / 3
+let existe = (sova.existe && reyna.existe && viper.existe)
+
+console.log(media)
+console.log(existe)
+
+// SEMANA 2.2
+
+// SEMANA 4.2 
+if (sova.existe) {
+    allAgentes.push(reyna)
+} else {
+    alert("Não foi adicionado ao array porque o agente não existe.")
+}
+if (reyna.existe) {
+    allAgentes.push(viper)
+} else {
+    alert("Não foi adicionado ao array porque o agente não existe.")
+}
+if (viper.existe) {
+    allAgentes.push(sova)
+} else {
+    alert("Não foi adicionado ao array porque o agente não existe.")
+}
+
+if (phoenix.existe) {
+    allAgentes.push(phoenix)
+} else {
+    alert("Não foi adicionado ao array porque o agente não existe.")
+}
+
+console.log(allAgentes)
+
+// // SEMANA 5
+let stringAgentes1 = ``
+for (i in reyna.habilidades) {
+    stringAgentes1 += `${reyna.habilidades[i]}, `
+}
+
+console.log(stringAgentes1)
+
+let stringAgentes2 = ``
+for (i in sova.habilidades) {
+    stringAgentes2 += `${sova.habilidades[i]}, `
+}
+
+console.log(stringAgentes2)
+
+let stringAgentes3 = ``
+for (i in viper.habilidades) {
+    stringAgentes3 += `${viper.habilidades[i]}, `
+}
+
+console.log(stringAgentes3)
+
+// console.log(nome.toUpperCase(), idade1, classe1, existe1, habilidade1)
+// console.log(nome.toUpperCase(), idade2, classe2, existe2, habilidade2)
+// console.log(nome.toUpperCase(), idade3, classe3, existe3, habilidade3)
+
+// SEMANA 5.2 
+let agentes = []
+agentes.push(reyna, sova, viper)
+
+for (let i in allAgentes) {
+    for (j in allAgentes[i]) {
+        console.log(allAgentes[i][j])
+    }
+
+}
+
+// SEMANA 6.1 
+
+// function imprimiAgente(objeto) {
+//     let stringObjeto = ``
+//     stringObjeto = objeto
+//     console.log(stringObjeto)
+// }
+
+// imprimiAgente(reyna)
+
+// SEMANA 6.2
+
+function retornaAgente(allAgentes, string) {
+    let retornaAgente;
+    for (let i in allAgentes) {      
+            if (allAgentes[i].nome === string) {
+                retornaAgente = allAgentes[i]
+            }
+        }
+        return retornaAgente
+    }
+
+
+retornaAgente(allAgentes, "")
+
+// SEMANA 11
+// Puxar o local do html que queremos alterar(adicionar ou retirar)
+
+const main = document.getElementById("main")
+const div = document.createElement("div")
+div.setAttribute("id", "divSections")
+div.setAttribute("class", "div-sections")
+
+function imprimeObjeto(objeto, div){
+    const section1 = document.createElement("section")
+    section1.setAttribute("id", `section`)
+    section1.innerHTML += `<img src= ${objeto.imagem}>`
+    const ul1 = document.createElement("ul")
+    ul1.innerHTML += `<li class="texto">Nome: <a target="_blank" href=${objeto.link}>${objeto.nome}</a></li>`
+    ul1.innerHTML += `<><li class="texto">Idade: ${objeto.idade}</li>`
+    ul1.innerHTML += `<><li class="texto">Classe: ${objeto.classe}</li>`
+    ul1.innerHTML += `<><li class="texto">Habilidades: ${objeto.habilidades.join(", ")}`
+    section1.appendChild(ul1)
+    section1.insertAdjacentElement("beforeend", ul1)
+    div.appendChild(section1)
+    div.insertAdjacentElement("afterbegin", section1)
+}
+
+
+
+// ESSA FUNÇÃO RECEBE UM ARRAY DE OBJETOS E RETORNA A IMPRESSÃO DE TODOS OS OBJETOS NA TELA. 
+
+function imprimeItems(div, main) {
+    for (i of allAgentes) {
+        imprimeObjeto(i, div)
+
+    }
+    main.appendChild(div)
+    main.insertAdjacentElement("beforeend", div)
+}
+addEventListener(onload,imprimeItems(div, main))
+
+
+function busca(event){
+    event.preventDefault()
+    const main = document.querySelector("main")
+    const input = document.querySelector("input")
+    const string = input.value.toLowerCase().trim()
+    if (string.length === 0){
+        alert("Digite um agente válido")
+        hideAlert()
+         //esconde o alerta para não ficar popando na tela.
+    }
+    document.querySelector("#divSections").remove()
+    const objeto = retornaAgente(allAgentes, string)
+    const divBusca = document.createElement("div")
+    divBusca.setAttribute("class", "divBusca")
+    divBusca.setAttribute("id", "divSections")
+    imprimeObjeto(objeto, divBusca)
+    main.appendChild(divBusca)
+    main.insertAdjacentElement("afterend", divBusca)
+    main.appendChild(divSections)
+}
+

css/main.css

@@ -0,0 +1,124 @@
+* {
+   margin: 0;
+   padding: 0;
+}
+
+
+header {
+   background-color: rgb(181, 26, 26);
+   font-family: 'Courier New', Courier, monospace;
+   color: rgb(0, 0, 0);
+   height: 10vh;
+   display: grid;
+   font-size: 3rem;
+   align-items: center;
+   padding-left: 2%;
+
+}
+
+body {
+   background-image: url(../img/background/cool-geometric-triangular-figure-in-a-neon-laser-light-great-for-backgrounds-and-wallpapers.jpg);
+   background-size: cover;
+}
+
+.home{
+   border: 10;
+   width: 5vw;
+
+
+}
+
+.div-pesquisa{
+   display: flex;
+   justify-content: center;
+   border: 10px;
+   align-items: center;
+   height: 100px;  
+}
+
+.input{
+   border: 10;
+   width: 15vw;
+}
+
+.button{
+   border: 5px;
+   width: 6vw;
+   border: solid 2px black;
+   border-top-right-radius: 10px;
+   border-bottom-right-radius: 10px;
+}
+
+
+img {
+   width: 180px;
+   height: 180px;
+   border-radius: 100px;
+}
+
+.div-sections {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   row-gap: 4vh;
+   padding-bottom: 2vh;
+   justify-items: center;
+
+}
+
+#main {
+   min-height: 38vw;
+
+}
+
+section{
+   display: flex;
+   flex-direction: row;
+   background-color: #000000;
+   width: 30vw;
+   height: 15vw;
+   box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(64,24,1,0);
+   border-radius: 2%;
+   align-items: center;
+   justify-items: center;
+}
+
+ /* #section1 {
+
+}
+
+#section2 {
+
+}
+
+#section3 {
+
+}  */
+
+.lista {
+   display: grid;
+   list-style: none;
+}
+
+.divBusca {
+   display: grid;
+   justify-items: center;
+}
+
+.texto {
+   text-decoration: none;
+   list-style-type: none;
+   font-size: 1rem;
+   font-family: 'Courier New', Courier, monospace;
+   color: antiquewhite;
+}
+
+
+footer {
+   background-color: black;
+   color: white;
+   height: 15vh;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}

index.html

@@ -0,0 +1,30 @@
+<!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="./css/main.css">
+    <script src="./JS/script.js" defer></script>
+    <title>Agentes - Valorant</title>
+</head>
+
+<body>
+    <header>
+        <h6>Agentes - Valorant</h6>
+    </header>
+    <main id="main">
+        <div class="div-pesquisa">
+            <button onclick="home(event)" class="home"> Home </button>
+            <input class="input" placeholder="Pesquise o Agente!" type="text">
+            <button onclick="busca(event)" class="button" >Buscar</button>
+        </div>
+    </main>
+
+    <footer>
+        <h3>Criado por Gabriel Max - Labenu - Barbosa A </p></h3>
+    </footer>
+</body>
+
+</html>