A Pen by christiane gozza on CodePen.
Created
April 29, 2022 01:09
-
-
Save chritianegozza/0c5006536de73d26f110c612138d2eaa 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=""> | |
| <header> | |
| <ui> <nav> | |
| <a href="#">Inicio</a> | |
| <a href="#">Séries</a> | |
| <a href="#">Filmes</a> | |
| <a href="#">Documentários</a> | |
| </nav></ui> | |
| </header> | |
| <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> | |
| <h3> | |
| <p>Assista agora os melhores filmes e series</p> | |
| <iframe width="280" height="157" src="https://www.youtube-nocookie.com/embed/V2AM7I0TcDg?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <iframe width="280" height="157" src="https://www.youtube-nocookie.com/embed/jt3-3LtSj6c?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <iframe width="280" height="157" src="https://www.youtube-nocookie.com/embed/-FZ-pPFAjYY?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <iframe width="280" height="157" src="https://www.youtube-nocookie.com/embed/yJnzCBt5j1M?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <iframe width="280" height="157" src="https://www.youtube-nocookie.com/embed/DzimgW9dsx0?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| <iframe width="280" height="157" src="https://www.youtube-nocookie.com/embed/T6DJcgm3wNY?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </h3> | |
| </div> | |
| <h4 class= "filme">Esquadrão Suicida</h4> <h4 class= "filme"> Liga da justiça</h4> <h4 class= "filme">Batman</h4> | |
| <h4 class= "filme">Aquaman Mulher</h4> <h4 class= "filme"> Maravilha Superman</h4> | |
| </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.innerHTML + elementoFilme | |
| } | |
| const h4 = document.getElementById("filme"); | |
| h4.textContent= 'Nome do filme' |
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://cdn.cinepop.com.br/2020/02/the-dark-knight.jpg'); | |
| 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: 30px; | |
| } | |
| .page-logo { | |
| width: 200px; | |
| } | |
| .alura-logo { | |
| width: 40px; | |
| position: absolute; | |
| top: 10px; | |
| right:10px; | |
| } | |
| #listaFilmes img { | |
| margin: 10px; | |
| } | |
| header{ | |
| color: #ffffff; | |
| margin-top: 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; | |
| } | |
| h3{ | |
| color: #ffffff; | |
| margin-top: 30px; | |
| } | |
| h4{ | |
| color: #ffffff; | |
| margin-top: 10px; | |
| } | |
| header nav{ | |
| text-decoration: none; | |
| color: #aaa; | |
| margin-right: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://codepen.io/chritianegozza/pen/abpBXXp