A Pen by Felicio-Jessica on CodePen.
Created
April 20, 2021 13:01
-
-
Save Felicio-Jessica/26cd717a8e3bd7a607e69d2a34767b03 to your computer and use it in GitHub Desktop.
Aluraflix2 - Funções
This file contains 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> | |
| <title> | |
| Imersão Dev - Aula 05 | |
| </title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="page-title"> | |
| Aluraflix | |
| </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"> | |
| Qual seu filme favorito? | |
| </p> | |
| <div class="form-wrapper"> | |
| <input type="text" id="filme" name="filme" placeholder="Insira endereço de imagem"> | |
| <button onClick="adicionarFilme()">Adicionar Filme</button> | |
| </div> | |
| </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 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
| function adicionarFilme() { | |
| var campoFilmeFavorito = | |
| document.querySelector('#filme') | |
| var filmeFavorito = | |
| campoFilmeFavorito.value | |
| if (filmeFavorito.endsWith('.jpg')){ | |
| listarFilmesNaTela(filmeFavorito) | |
| } else { | |
| alert("Imagem inválida") | |
| } | |
| campoFilmeFavorito.value = "" | |
| } | |
| function listarFilmesNaTela(filme) { | |
| var listaFilmes = document.querySelector('#listaFilmes') | |
| var elementoFilme = "<img src=" + filme + ">" | |
| listaFilmes.innerHTML = listaFilmes.ineerHTML + elementoFilme | |
| } |
This file contains 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: 'Roboto Mono',monospace; | |
| text-align:center; | |
| background-image: url('https://www.alura.com.br/assets/img/imersoes/dev-2021/dia-04-aluraflix-e-filmes.png'); | |
| background-color: #000000; | |
| background-size: cover; | |
| background-position: center top; | |
| background-repeat: no-repeat; | |
| } | |
| .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; | |
| } | |
| .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: .3s; | |
| } | |
| .form-wrapper button:hover { | |
| opacity:.8; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment