A Pen by Diego Loiola on CodePen.
Created
April 6, 2021 19:05
-
-
Save diegoamloiola/e5f6e0d4c444521b00f7aa58dd124d2e to your computer and use it in GitHub Desktop.
Crunchylura - Funções
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="preconnect" href="https://fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap" rel="stylesheet"> | |
| <title> | |
| Imersão Dev - Aula 05 | |
| </title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="page-title"> | |
| Crunchylura | |
| </h1> | |
| <img src="https://www.alura.com.br/assets/img/imersoes/dev-2021/logo-imersao-aluraflix.svg" class="page-logo" alt=""> | |
| <p class="page-subtitle"> | |
| Traillers da Temporada de Primavera (Abril) | |
| </p> | |
| <div class="form-wrapper"> | |
| <input type="text" id="filme" name="filme" placeholder="Insira um dos nomes da lista abaixo"> | |
| <button onClick="adicionarFilme()">Adicionar Filme</button> | |
| </div> | |
| </div> | |
| <h3 class="mensagem"> | |
| <font color="red"></font> | |
| </h3> | |
| <div class="digiteNome"> | |
| Digite o nome de um dos seguintes Animes: | |
| </div> | |
| <p style=float:left; class="texto"> | |
| - Eden’s Zero <br> | |
| - 86<br> | |
| - Tokyo Revengers<br> | |
| - Isekai Maou to Shoukan Shoujo no Dorei Majutsu<br> | |
| - Shaman King<br> | |
| - Seven Knights Revolution<br> | |
| - Mars Red<br> | |
| - Joran: The Princess of Snow and Blood<br> | |
| - Boku no Hero Academia<br> | |
| </p> | |
| <p style=float:rigth; class="texto"> | |
| - Sentouin, Hakenshimasu!<br> | |
| - Zombieland Revenge<br> | |
| - Ijiranaide, Nagatoro-san<br> | |
| - Osananajimi ga Zettai ni Makenai Love Come<br> | |
| - Hige Wo Soru. Soshite Joshikosei Wo Hirou<br> | |
| - Vivy – Fluorite Eye’s Song<br> | |
| - SSSS.Dynazenon<br> | |
| - The World End With You<br> | |
| - Godzilla Singular Point<br> | |
| </p> | |
| </div> | |
| <div id="listaFilmes"></div> | |
| <a href="https://alura.com.br/" target="_blank"> | |
| <img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"> | |
| </a> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var link; | |
| var mensagem = document.querySelector(".mensagem"); | |
| var listaFilmes = document.querySelector("#listaFilmes"); | |
| var campoFilmeFavorito = document.querySelector("#filme"); | |
| function adicionarFilme() { | |
| var filmeFavorito = campoFilmeFavorito.value; | |
| campoFilmeFavorito.value = ""; | |
| validarFilme(); | |
| listarNaTela(link); | |
| function validarFilme() { | |
| switch(filmeFavorito) { | |
| case "": | |
| mensagem.innerHTML = "Digite uma das opções abaixo. Tente de novo" | |
| link = "" | |
| break | |
| case "Eden’s Zero": | |
| link = "https://www.youtube.com/embed/1Ykbdi94frI" | |
| break | |
| case "86": | |
| link = "https://www.youtube.com/embed/TPHzuEuCFQI" | |
| break | |
| case "Tokyo Revengers": | |
| link = "https://www.youtube.com/embed/RnghCw_LbdA" | |
| break | |
| case "Isekai Maou to Shoukan Shoujo no Dorei Majutsu": | |
| link = "https://www.youtube.com/embed/jsSIL026iSM" | |
| break | |
| case "Shaman King": | |
| link = "https://www.youtube.com/embed/8xL2QQLPm4A" | |
| break | |
| case "Seven Knights Revolution": | |
| link = "https://www.youtube.com/embed/_YhE65JXaxU" | |
| break | |
| case "Mars Red": | |
| link = "https://www.youtube.com/embed/uH5dffS03b4" | |
| break | |
| case "Joran: The Princess of Snow and Blood": | |
| link = "https://www.youtube.com/embed/qJq2cWFkUDo" | |
| break | |
| case "Boku no Hero Academia": | |
| link = "https://www.youtube.com/embed/Q8bmv-14OVI" | |
| break | |
| case "Sentouin, Hakenshimasu!": | |
| link = "https://www.youtube.com/embed/y8JcIEVXNg8" | |
| break | |
| case "Zombieland Revenge": | |
| link = "https://www.youtube.com/embed/HTpxcLNe1_o" | |
| break | |
| case "Ijiranaide, Nagatoro-san": | |
| link = "https://www.youtube.com/embed/umJL7Pbcic8" | |
| break | |
| case "Osananajimi ga Zettai ni Makenai Love Come": | |
| link = "https://www.youtube.com/embed/08jhTwdYypQ" | |
| break | |
| case "Hige Wo Soru. Soshite Joshikosei Wo Hirou": | |
| link = "https://www.youtube.com/embed/PEXu-em2vnw" | |
| break | |
| case "Vivy – Fluorite Eye’s Song": | |
| link = "https://www.youtube.com/embed/Z107_nBjl3Y" | |
| break | |
| case "SSSS.Dynazenon": | |
| link = "https://www.youtube.com/embed/oRem5DkobQM" | |
| break | |
| case "The World End With You": | |
| link = "https://www.youtube.com/embed/ykXutSZejJc" | |
| break | |
| case "Godzilla Singular Point": | |
| link = "https://www.youtube.com/embed/F4xapr1WA2c" | |
| break | |
| default: | |
| mensagem.innerHTML("Não há esse aqui") | |
| } | |
| } | |
| } | |
| function listarNaTela(filme) { | |
| var elementoFilme = `<iframe width="300" heigth="240"src="${filme}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`; | |
| listaFilmes.innerHTML = elementoFilme; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: "New Tegomin", monospace; | |
| text-align: center; | |
| background-image: url("https://i.pinimg.com/originals/49/ac/38/49ac38c78fbf4b6340cb42377a76bf57.jpg"); | |
| background-color: #000000; | |
| background-size: cover; | |
| background-position: center top; | |
| background-repeat: no-repeat; | |
| background-width: 100%; | |
| } | |
| .digiteNome { | |
| font-family: "New Tegomin", monospace; | |
| font-size: 22px; | |
| color: AliceBlue; | |
| } | |
| .texto { | |
| font-family: "New Tegomin"; | |
| font-size: 18px; | |
| color: AliceBlue; | |
| } | |
| .container { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .page-title { | |
| color: #ffffff; | |
| margin: 0 0 5px; | |
| } | |
| .page-subtitle { | |
| color: #ffffff; | |
| margin-top: 5px; | |
| } | |
| .page-logo { | |
| width: 200px; | |
| } | |
| .alura-logo { | |
| width: 40px; | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| } | |
| #listaFilmes img { | |
| margin: 10px; | |
| } | |
| .form-wrapper { | |
| margin: 0 0 15px; | |
| font-family: "New Tegomin"; | |
| } | |
| .form-wrapper input { | |
| display: block; | |
| margin: 0 auto; | |
| padding: 10px 15px; | |
| } | |
| .form-wrapper button { | |
| border: 0; | |
| color: #ffffff; | |
| background: #da1e26; | |
| font-weight: bold; | |
| padding: 15px 20px; | |
| font-size: 16px; | |
| borde-radius: 4px; | |
| margin-top: 20px; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| .form-wrapper button:hover { | |
| opacity: 0.8; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment