├── .vscode
    └── settings.json
├── img
    ├── logo.png
    ├── layout.png
    ├── destaque.png
    ├── logocanal.jpg
    ├── thumb1.webp
    ├── thumb2.webp
    ├── usuario.jpg
    ├── play.svg
    ├── pesquisa.svg
    └── trash.svg
├── reset.css
├── aulas_css.css
├── README.md
├── js
    ├── aula_javaScript.js
    └── script.js
├── aula_html.html
├── index.html
└── style.css


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona_youtube/HEAD/img/logo.png


--------------------------------------------------------------------------------
/img/layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona_youtube/HEAD/img/layout.png


--------------------------------------------------------------------------------
/img/destaque.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona_youtube/HEAD/img/destaque.png


--------------------------------------------------------------------------------
/img/logocanal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona_youtube/HEAD/img/logocanal.jpg


--------------------------------------------------------------------------------
/img/thumb1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona_youtube/HEAD/img/thumb1.webp


--------------------------------------------------------------------------------
/img/thumb2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona_youtube/HEAD/img/thumb2.webp


--------------------------------------------------------------------------------
/img/usuario.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona_youtube/HEAD/img/usuario.jpg


--------------------------------------------------------------------------------
/img/play.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#606060" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>


--------------------------------------------------------------------------------
/img/pesquisa.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>


--------------------------------------------------------------------------------
/img/trash.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#606060" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>


--------------------------------------------------------------------------------
/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed, 
16 | figure, figcaption, footer, header, hgroup, 
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	border: 0;
22 | 	font-size: 100%;
23 | 	font: inherit;
24 | 	vertical-align: baseline;
25 | 	box-sizing: border-box;
26 | }
27 | /* HTML5 display-role reset for older browsers */
28 | article, aside, details, figcaption, figure, 
29 | footer, header, hgroup, menu, nav, section {
30 | 	display: block;
31 | }
32 | body {
33 | 	line-height: 1;
34 | }
35 | ol, ul {
36 | 	list-style: none;
37 | }
38 | blockquote, q {
39 | 	quotes: none;
40 | }
41 | blockquote:before, blockquote:after,
42 | q:before, q:after {
43 | 	content: '';
44 | 	content: none;
45 | }
46 | table {
47 | 	border-collapse: collapse;
48 | 	border-spacing: 0;
49 | }


--------------------------------------------------------------------------------
/aulas_css.css:
--------------------------------------------------------------------------------
 1 | /* CSS => Cascading StyleSheet(Folha de estilo em cascata) */
 2 | 
 3 | /* 
 4 | 
 5 | Anatomia do CSS
 6 | 
 7 | seletor {
 8 |     propriedade: valor da propriedade; => declaração CSS
 9 |     cor: vermelho;
10 | } => regra CSS
11 | 
12 | */
13 | 
14 | /* Tipos de seletores */
15 | 
16 | /* Seletor por nome de elemento/nome de tag */
17 | 
18 | header {
19 |     background-color: cadetblue;
20 | }
21 | 
22 | /* p {
23 |     background-color: cornflowerblue;
24 | } */
25 | 
26 | /* Seletor por classe */
27 | 
28 | .textoSobreMim {
29 |     background-color: cornflowerblue;
30 |     color: white;
31 | }
32 | 
33 | 
34 | /* Seletor por ID */
35 | 
36 | #secaoSobreMim {
37 |     background-color: darkgreen;
38 | }
39 | 
40 | /* Fontes */
41 | 
42 | h2 {
43 |     font-family: Arial;
44 |     font-size: 30px;
45 |     color: white;
46 | }
47 | 
48 | /* Dimensionamento => largura e altura */
49 | 
50 | #secaoSobreMim{
51 |     /* width: 800px; */
52 |     /* height: 300px; */
53 |     /* display: inline; */
54 | }
55 | 
56 | /* Posicionamento */
57 | 
58 | a {
59 |     background-color: darksalmon;
60 |     /* width: 200px;
61 |     height: 200px; */
62 |     display: inline-block;
63 | }
64 | 
65 | /* Flexbox */
66 | 
67 | .exemplificandoFlexbox{
68 |     display: flex;
69 |     justify-content: space-between;
70 |     align-items: flex-end;
71 |     height: 300px;
72 |     background-color: #ccc;
73 | }
74 | 
75 | .exemplificandoFlexbox div{
76 |     width: 200px;
77 |     height: 200px;
78 | }
79 | .div1{
80 |     background-color: darkseagreen;
81 | }
82 | .div2{
83 |     background-color: darkturquoise;
84 | }
85 | .div3{
86 |     background-color: firebrick;
87 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Maratona Kenzie => Desenvolvendo Youtube
 2 | 
 3 | Projeto desenvolvido para o evento Maratona Kenzie.
 4 | 
 5 | ## Ferramentas
 6 | 
 7 | 
 8 | 1. [Instalação do VS Code no Windows](https://kenzie.com.br/blog/instalacao-vs-code-windows/)
 9 | 2. [Como utilizar o codepen e o VSCode](https://kenzie-academy-brasil.github.io/ferramentas/)
10 | 
11 | ## Checkpoints aulas
12 | 
13 | 1. [Introdução ao HTML e estruturação do projeto](https://kenzieacademybr.notion.site/Checkpoint-9c82404fd5c04361aedae97885f2db84)
14 | 2. [Introdução ao CSS e estilização do projeto](https://kenzieacademybr.notion.site/Checkpoint-9b0ef055024440409ee16f387aea7b1b)
15 | 3. [Introdução ao Javascript](https://kenzieacademybr.notion.site/Checkpoint-74a6a7789ddf478e92ed2cf0ebb9cb37)
16 | 
17 | ## O projeto
18 | 
19 | ### Estrutura de arquivos
20 | 
21 | - README.md
22 | - index.html
23 | - /assets
24 |   - /img
25 |   - /css
26 |     - style.css
27 |   - /js
28 |     - script.js
29 | 
30 | ### Fonte
31 | 
32 | - 'Roboto', sans-serif;
33 | 
34 | ### Cores
35 | 
36 | - Branco: #ffffff;
37 | - Cinza Claro: #cccccc;
38 | - Cinza Mais Claro 1: #f8f8f8;
39 | - Cinza Mais Claro 2: #d9d9d9;
40 | - Cinza Mais Claro 3: #fafafa;
41 | - Cinza Escuro 1: rgb(49, 49, 49);
42 | - Cinza Escuro 2: #606060;
43 | 
44 | ## Layout
45 | 
46 | - [Layout Youtube - Maratona Kenzie](./img/layout.png)
47 | 
48 | ## Referências
49 | 
50 | - [W3Schools referência HTML](https://www.w3schools.com/tags/default.asp)
51 | - [W3Schools referência CSS](https://www.w3schools.com/cssref/default.asp)
52 | - [Google Fonts](https://fonts.google.com/)
53 | - [Coolors](https://coolors.co/palettes/trending)
54 | - [Paletton](https://paletton.com/)
55 | - [W3Schools propriedades CSS no DOM](https://www.w3schools.com/jsref/dom_obj_style.asp)
56 | - [MDN lista de eventos](https://developer.mozilla.org/en-US/docs/Web/Events)
57 | - [CSS BEM](https://desenvolvimentoparaweb.com/css/bem/)


--------------------------------------------------------------------------------
/js/aula_javaScript.js:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | // VARIAVEIS COM LET 
  4 | let nomePessoa = "Hudson Carolino"
  5 | let idade = 25
  6 | 
  7 | // VARIAVEIS COM CONST  
  8 | const nome = "Maria"
  9 | 
 10 | // TIPOS DE DADOS
 11 | // "Hudson Carolino" => STRING
 12 | // TIPO DE DADO INTEIRO => let numero = 12
 13 | 
 14 | // BOOLEAN
 15 | //(true => verdadeiro) e (false => falso)
 16 | 
 17 | //MAIS SOBRE STRINGS
 18 | // let primeiroNome = "Hudson "
 19 | // let sobrenome    = "Carolino"
 20 | 
 21 | // let numero1 = "1"
 22 | // let numero2 =  5
 23 | 
 24 | // console.log(primeiroNome + sobrenome)
 25 | // console.log(numero1 + numero2)
 26 | //
 27 | 
 28 | 
 29 | //OPERADORES BÁSICOS
 30 | let numero1 = "1"
 31 | let numero2 =  5
 32 | 
 33 | //console.log(numero1+numero2)
 34 | 
 35 | // (+) SOMA
 36 | // (*) MULTIPLICAÇÃO
 37 | // (/) DIVISÃO 
 38 | // (-) SUBTRAÇÃO
 39 | // (+=) MAIS IGUAL 
 40 | // (-=) MENOS IGUAL
 41 | 
 42 | // let contador  = 0;
 43 | 
 44 | // console.log(contador)
 45 | // contador += 1
 46 | 
 47 | // console.log(contador)
 48 | // contador += 1
 49 | 
 50 | // console.log(contador)
 51 | // contador += 1
 52 | 
 53 | // console.log(contador)
 54 | // contador += 1
 55 | 
 56 | // console.log(contador)
 57 | // contador += 1
 58 | 
 59 | //ESTRUTURAS CONDICIONAIS 
 60 | // OPERADORES DE COMPARAÇÃO E / RELACIONAIS
 61 | // VERIFICAÇÃO IGUALDADE  (1 == 1) => TRUE 
 62 | // VERIFICAÇÃO IGUALDADE/TIPO DE DADO  (1 === "1") => FALSE 
 63 | //VERIFICAÇÃO  MAIOR  (1 > 10) => FALSE 
 64 | //VERIFICAÇÃO  MENOR  (1 < 10) => TRUE 
 65 | 
 66 | //OPERADORES LÓGICOAS 
 67 | 
 68 | // (1 == 1 && 2 == 2) => TRUE 
 69 | // (1 == 1 && 4 == 2) => FALSE 
 70 | 
 71 | // let hudson  = "Hudson"
 72 | // let idadeHudson = 25
 73 | 
 74 | // (hudson == "Hudson" && idadeHudson == 25)
 75 | //
 76 | // (1 == 1 || 4 == 2) => TRUE  
 77 | // 1 !== 2 => TRUE
 78 | // 1 !== 1 => FALSE
 79 | //-----------------------//
 80 | 
 81 | //CONDICIONAIS 
 82 | 
 83 | //SE (TRUE) FAÇA ALGUMA COISA | FAÇA OUTRA COISA
 84 | 
 85 | // if(10 >= 10){
 86 | //     console.log("Verdadeiro")
 87 | // }else{
 88 | //     console.log("False")
 89 | // }
 90 | 
 91 | //FUNÇÕES 
 92 | 
 93 | //DECLARANDO FUNÇÃO 
 94 | // function retornarNomeCompleto(){
 95 | 
 96 | //     let nome = "Hudson"
 97 | //     let sobreNome = "Carolino"
 98 | //     let idade = 25
 99 | //     let profissao = "Desenvolvedor"
100 |     
101 | //     console.log(`Meu nome é: ${nome}`)
102 | //     console.log(`Meu sobrenome é: ${sobreNome}`)
103 | //     console.log(`Minha idade: ${idade}`)
104 | //     console.log(`Minha profissão: ${profissao}`)
105 | 
106 | // }
107 | // //ESTOU CHAMANDO MINHA FUNÇÃO 
108 | // retornarNomeCompleto()
109 | function soma(numero1, numero2){ // RECEBER PARAMETROS
110 |    
111 |     let resultado  = numero1 + numero2
112 |     
113 |     return resultado
114 | }
115 | let resultadoFuncaoSoma = soma(5, 10)//ARGUMENTOS
116 | 
117 | //Estrutura de repetição 
118 | 
119 | //let listaNomes  = "Hudson, Maria, Daniel, Nicholas"
120 | 
121 | //ARRAY SEM DADOS 
122 | //let listaNomes = ["Hudson", "Maria", "Wallace", "Aline", "Pedro", "Daniel", "Amanda"]
123 | //console.log(listaNomes) 
124 | 
125 | //ALTERANDO VALOR DE UMA POSIÇÃO
126 | // listaNomes[0] = "Larissa"
127 | // console.log(listaNomes)
128 | // listaNomes.push("Jardel")
129 | // console.log(listaNomes)
130 | 
131 | const hudson = {
132 |     nome: "Hudson",
133 |     telefone: "00 000000",
134 |     empresa: "Kenzie Academy",
135 |     email: "exemplo@gmail.com"
136 | }
137 | 
138 | const maria = {
139 |     nome: "Maria",
140 |     telefone: "00 000000",
141 |     empresa: "Kenzie Academy",
142 |     email: "maria@gmail.com"
143 | }
144 | 
145 | const arrayPessoas = []
146 | arrayPessoas.push(hudson)
147 | arrayPessoas.push(maria)
148 | 
149 | // console.log(arrayPessoas)
150 | 
151 | 


--------------------------------------------------------------------------------
/aula_html.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br"> 
 3 | 
 4 |     <!-- CABEÇA -> CONFIGURAÇÕES -->
 5 |     <head>
 6 |         <meta charset="UTF-8">
 7 |         <title>Youtube - Kenzie</title>
 8 | 
 9 |         <link rel="stylesheet" type="text/css" href="./aulas_css.css">
10 |     </head>
11 | 
12 |     <!-- CORPO ONDE COLOCAMOS O CONTEÚDO -->
13 |     <body>
14 | 
15 |         <div class="exemplificandoFlexbox">
16 |             <div class="div1"></div>
17 |             <div class="div2"></div>
18 |             <div class="div3"></div>
19 |         </div>
20 |         
21 |         <!-- CABEÇALHO -->
22 |         <header class="cabecalho">
23 |             <h2>Portfólio</h2>
24 | 
25 |             <figure>
26 |                 <img width="100px" src="./img/logo.png" alt="Logo Kenzie">
27 |                 <figcaption>Logo da empresa, 15/01/2022</figcaption>
28 |             </figure>
29 | 
30 |         </header>
31 |         
32 |         <!-- CONTEÚDO MAIS IMPORTANTE DENTRO DO DOCUMENTO -->
33 |         <main>
34 | 
35 |             <h1>Hudson Carolino</h1>
36 | 
37 |             <!--  TAG QUE REPRESENTA UMA SEÇÃO -->
38 |             <section id="secaoSobreMim">
39 |                 <h2>Sobre mim</h2>
40 |                 <p class="textoSobreMim">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere ducimus sit et neque obcaecati minima officia qui tempora totam quam iusto nam nesciunt, id nemo sunt eum voluptate dolores voluptatem.</p>
41 |             </section>
42 | 
43 |             <section>
44 |                 <h2>Cursos</h2>
45 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates natus animi dolor ipsa? Minus qui provident ipsum pariatur, tempora vitae temporibus corrupti, asperiores rem quo facere quos excepturi natus aspernatur.</p>
46 |                 <ul>
47 |                     <li>Front-end</li>
48 |                     <li>Curso de HTML</li>
49 |                 </ul>
50 |                 <ol>
51 |                     <li>Front-end</li>
52 |                     <li>Curso de HTML</li>
53 |                 </ol>
54 |             </section>
55 | 
56 |             <section>
57 |                 <h3>Projetos que desenvolvi</h3>
58 |                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, non. Ducimus eos ut odio exercitationem aut sunt modi deleniti nihil consequatur, aliquam blanditiis facere sapiente deserunt veniam dolorem cum ratione!</p>
59 |             
60 |                 <article>
61 |                     <h2>Sobre o  meu projeto</h2>
62 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor amet, sapiente repellat enim nisi labore optio quae illo reprehenderit, adipisci in libero obcaecati minima facilis dolores earum ratione odio a.</p>
63 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor amet, sapiente repellat enim nisi labore optio quae illo reprehenderit, adipisci in libero obcaecati minima facilis dolores earum ratione odio a.</p>
64 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor amet, sapiente repellat enim nisi labore optio quae illo reprehenderit, adipisci in libero obcaecati minima facilis dolores earum ratione odio a.</p>
65 |                     <section>
66 |                         <h4>Referencias</h4>
67 |                         <a href="">Link 1</a>
68 |                         <a href="">Link 2</a>
69 |                         <a href="">Link 3</a>
70 |                     </section>
71 |                 </article>
72 | 
73 |             </section>
74 | 
75 |             <aside>
76 |                 
77 |             </aside>
78 | 
79 |         </main>
80 | 
81 |         <!-- RODAPÉ -->
82 |         <footer>
83 |             <ul>
84 |                 <li>Telefone: 00-000000</li>
85 |                 <li>Endereço: rua kenzie</li>
86 |                 <li>
87 |                     <a href="https://meusite.com.br">Meu site</a>
88 |                 </li>
89 |             </ul>
90 |         </footer>
91 | 
92 |     </body>
93 | 
94 | </html>


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
  1 | //SELECIONANDO UM ELEMENTO DO MEU HTML, A LISTA DE DESTAQUES
  2 | let listaDestaque  = document.querySelector(".secaoVideosDestaques__lista")
  3 | let secaoTodosVideos  = document.querySelector(".secaoTodosVideos ul")
  4 | let listaReproducao  = document.querySelector(".secaoAdicionarAFila__lista")
  5 | 
  6 | //ARRAY DE VÍDEOS
  7 | const listaVideos = [
  8 |     {
  9 |         id: 0,
 10 |         titulo: "Conheça todo o universo da Kenzie Academy Brasil",
 11 |         visualizacoes: "2,7 mil",
 12 |         descricao: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id dolore vel assumenda porro consequatur cum labore corporis dicta voluptatibus a et dignissimos, neque eligendi quas similique, culpa, error rerum saepe!",
 13 |         thumbnail: "./img/thumb1.webp"
 14 |     },
 15 |     {
 16 |         id: 1,
 17 |         titulo: "Conheça todo o universo da Kenzie Academy Brasil",
 18 |         visualizacoes: "2,7 mil",
 19 |         descricao: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id dolore vel assumenda porro consequatur cum labore corporis dicta voluptatibus a et dignissimos, neque eligendi quas similique, culpa, error rerum saepe!",
 20 |         thumbnail: "./img/thumb2.webp"
 21 |     },
 22 |     {
 23 |         id: 2,
 24 |         titulo: "Conheça todo o universo da Kenzie Academy Brasil",
 25 |         visualizacoes: "2,7 mil",
 26 |         descricao: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id dolore vel assumenda porro consequatur cum labore corporis dicta voluptatibus a et dignissimos, neque eligendi quas similique, culpa, error rerum saepe!",
 27 |         thumbnail: "./img/thumb1.webp"
 28 |     },
 29 |     {
 30 |         id: 3,
 31 |         titulo: "Conheça todo o universo da Kenzie Academy Brasil",
 32 |         visualizacoes: "2,7 mil",
 33 |         descricao: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id dolore vel assumenda porro consequatur cum labore corporis dicta voluptatibus a et dignissimos, neque eligendi quas similique, culpa, error rerum saepe!",
 34 |         thumbnail: "./img/thumb2.webp"
 35 |     }
 36 | ];
 37 | 
 38 | //FUNÇÃO QUE VAI LISTAR OS VÍDEO, UTILIZANDO UM LOOP FOR
 39 | function listarVideos(listaDestaque){
 40 |     for(let i = 0; i < listaVideos.length; i = i + 1){
 41 |         
 42 |         //ACESSANDO VALORES DO VÍDEO
 43 |         let titulo          = listaVideos[i].titulo
 44 |         let visualizacoes   = listaVideos[i].visualizacoes
 45 |         let descricao       = listaVideos[i].descricao
 46 |         let thumbnail       = listaVideos[i].thumbnail
 47 | 
 48 |         //PASSANDO PARA FUNÇÃO CRIAR O TEMPLATE
 49 |         criarTemplate(listaDestaque,titulo, visualizacoes, descricao, thumbnail)
 50 |     }
 51 | }
 52 | 
 53 | //LISTANDO VÍDEOS
 54 | listarVideos(listaDestaque)
 55 | listarVideos(secaoTodosVideos)
 56 | 
 57 | //FUNÇÃO QUE CRIA O TEMPLATE
 58 | function criarTemplate(listaDestaque, titulo, visualizacoes ,descricao, thumbnail){
 59 | 
 60 |     
 61 |     
 62 |     //CRIANDO UM ELEMENTO DO TIPO  HTML => LI
 63 |     let li  = document.createElement("li")
 64 |     
 65 |     //ESTOU ADICIONANDO TAGS E O CONTEÚDO PRA DENTRO DESSE LI
 66 |     li.innerHTML = `
 67 |         <figure>
 68 |             <img src="${thumbnail}" alt="{titulo}">
 69 |         </figure>
 70 | 
 71 |         <div>
 72 |             <h3>${titulo}</h3>
 73 |             <span>${visualizacoes}</span>
 74 |             <p>${descricao}</p>
 75 |             <button class="buttonAdicionarAFila">Adicionar a fila</button>
 76 |         </div>
 77 |     `
 78 |   
 79 |     //ESTOU ADICIONANDO O LI, PREECHIDO DENTRO DA MINHA LISTA LÁ NO HTML
 80 |     listaDestaque.appendChild(li)
 81 | 
 82 | }
 83 | 
 84 | 
 85 | // FUNÇÕES DE CLIQUE 
 86 | listaDestaque.addEventListener("click", adicionarAFila)
 87 | 
 88 | //FUNÇÃO QUE ADICIONA NA LISTA DE REPRODUÇÃO
 89 | function adicionarAFila(event){
 90 | 
 91 |     //PEGA O ELEMENTO CLICADO
 92 |     const button = event.target
 93 | 
 94 |     //PEGA O NOME DO ELEMENTO
 95 |     const buttonName = event.target.tagName
 96 | 
 97 |     //VERIFICAÇÃO SE É UM BOTÃO
 98 |     if(buttonName == "BUTTON"){
 99 | 
100 |         //PEGA O PAI DO BOTÃO
101 |         const li = button.closest("li")
102 |         
103 |         //FAZ UMA CÓPIA DESSE ELEMENTO
104 |         const liCopy = li.cloneNode(true)
105 | 
106 |         //ADICIONA NA LISTA DE REPRODUÇÃO
107 |         listaReproducao.appendChild(liCopy)
108 |        
109 |     }
110 | }
111 | 
112 | 
113 | // FUNÇÕES DE CLIQUE 
114 | listaReproducao.addEventListener("click", removerdaAFila)
115 | 
116 | function removerdaAFila(event){
117 | 
118 |     //PEGA O ELEMENTO CLICADO
119 |     const elemento = event.target
120 | 
121 |     //PEGA O NOME DO ELEMENTO
122 |     const elementoName = event.target.tagName
123 |    
124 |     //VERIFICAÇÃO SE É UM BOTÃO
125 |     if(elementoName !== "LI"){
126 |         elemento.closest("li").remove()
127 |     }else{
128 | 
129 |         elemento.remove()
130 | 
131 |     }
132 | 
133 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br"> 
  3 | 
  4 |     <!-- CABEÇA -> CONFIGURAÇÕES -->
  5 |     <head>
  6 |         <meta charset="UTF-8">
  7 |         <title>Youtube - Kenzie</title>
  8 | 
  9 |         <link rel="stylesheet" type="text/css" href="./reset.css">
 10 | 
 11 |         <link rel="preconnect" href="https://fonts.googleapis.com">
 12 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 13 |         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap" rel="stylesheet">
 14 | 
 15 |         <link rel="stylesheet" type="text/css" href="./style.css">
 16 | 
 17 |     </head>
 18 | 
 19 |     <body>
 20 |         
 21 |         <header class="cabecalho">
 22 | 
 23 |             <!-- LOGO -->
 24 |             <div class="coluna">
 25 |                 <figure>
 26 |                     <img src="./img/logo.png" alt="Youtube - Kenzie">
 27 |                 </figure>
 28 |             </div>
 29 | 
 30 |             <!-- PESQUISA -->
 31 |             <div class="coluna">
 32 | 
 33 |                 <div class="formularioPesquisa">
 34 |                     <input type="text" placeholder="Pesquisar">
 35 |                     <button>
 36 |                         <img src="./img/pesquisa.svg" alt="Botão pesquisar">
 37 |                     </button>
 38 |                 </div>
 39 | 
 40 |             </div>
 41 | 
 42 |              <!-- USUÁRIO -->
 43 |              <div class="coluna">
 44 |                  <figure class="imagemUsuario">
 45 |                      <img src="./img/usuario.jpg" alt="Imagem Usuário">
 46 |                  </figure>
 47 |              </div>
 48 | 
 49 |         </header>
 50 | 
 51 |         <main>
 52 | 
 53 |             <div class="destaqueCanal"></div>
 54 | 
 55 |             <section class="secaoCanal">
 56 | 
 57 |                 <div class="container">
 58 | 
 59 |                     <div class="detalheCanal">
 60 | 
 61 |                         <figure>
 62 |                             <img src="./img/logocanal.jpg" alt="Kenzie Academy Brasil">
 63 |                         </figure>
 64 | 
 65 |                         <div class="detalheCanal__info">
 66 |                             <h1>Kenzie Academy Brasil</h1>
 67 |                             <p>88,5 mil inscritos</p>
 68 |                         </div>
 69 | 
 70 |                     </div>
 71 | 
 72 |                     <nav class="menusNavegacaoCanal">
 73 | 
 74 |                         <ul>
 75 |                             <li>
 76 |                                 <a href="#">Inicío</a>
 77 |                             </li>
 78 |                             <li>
 79 |                                 <a href="#">Vídeos</a>
 80 |                             </li>
 81 |                             <li>
 82 |                                 <a href="#">Playlists</a>
 83 |                             </li>
 84 |                             <li>
 85 |                                 <a href="#">Comunidade</a>
 86 |                             </li>
 87 |                             <li>
 88 |                                 <a href="#">Canais</a>
 89 |                             </li>
 90 |                             <li>
 91 |                                 <a href="#">Sobre</a>
 92 |                             </li>
 93 |                             <li>
 94 |                                 <button>
 95 |                                     <img src="./img/pesquisa.svg" alt="Botão de pesquisa">
 96 |                                 </button>
 97 |                             </li>
 98 |                         </ul>
 99 | 
100 |                     </nav>
101 | 
102 |                 </div>
103 | 
104 |             </section>
105 | 
106 |            <div class="containerVideosDestaques">
107 | 
108 |                 <!--  COLUNA DA ESQUERDA -->
109 |                 <div class="coluna coluna--esquerda">
110 |                     <section class="secaoVideosDestaque">
111 |                         
112 |                         <h2>Conheça mais sobre a Kenzie Academy Brasil</h2>
113 | 
114 |                         <ul class="secaoVideosDestaques__lista"> </ul>
115 | 
116 |                     </section>
117 |                 </div>
118 | 
119 |                 <!--  COLUNA DA DIREITA -->
120 |                 <div class="coluna coluna--direita">
121 |                     <section class="secaoAdicionarAFila">
122 |                         
123 |                         <header class="secaoAdicionarAfila__cabecalho">
124 |                             <h2>Fila de reprodução</h2>
125 |                             <p>Kenzie Academy Brasil</p>
126 |                         </header>
127 | 
128 |                         <ul class="secaoAdicionarAFila__lista"></ul>
129 | 
130 |                     </section>
131 |                 </div>
132 | 
133 |            </div>
134 | 
135 |            <section class="secaoTodosVideos">
136 | 
137 |                 <div class="container">
138 | 
139 |                     <h2><img src="./img/play.svg" alt="Play"> Reproduzir todos</h2>
140 | 
141 |                     <ul class="secaoTodosVideos__lista"></ul>
142 |                 </div>
143 | 
144 |            </section>
145 | 
146 |         </main>
147 |         
148 |     </body>
149 |     
150 |     <script src="./js/aula_javaScript.js"></script>
151 |     <script src="./js/script.js"></script>
152 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |     font-family: 'Roboto', sans-serif;
  3 | }
  4 | 
  5 | main{
  6 |     background-color: #F1F1F1;
  7 |     padding-bottom: 90px;
  8 | }
  9 | 
 10 | .container{
 11 |     width: 1300px;
 12 |     margin: 0 auto;
 13 | }
 14 | 
 15 | .cabecalho{
 16 |     display: flex;
 17 |     justify-content: space-between;
 18 |     align-items: center;
 19 |     padding: 10px 30px;
 20 | }
 21 | .cabecalho .coluna{}
 22 | 
 23 | .cabecalho figure{}
 24 | .cabecalho figure img{
 25 |     width: 90px;
 26 | }
 27 | 
 28 | .formularioPesquisa{
 29 |     display: flex;
 30 |     height: 40px;
 31 | }
 32 | .formularioPesquisa input{
 33 |     width: 500px;
 34 |     font-size: 16px;
 35 |     border: 1px solid #cccccc;
 36 |     padding: 0 10px;
 37 |     border-radius: 2px 0 0 2px;
 38 | }
 39 | .formularioPesquisa button{
 40 |     width: 60px;
 41 |     border: 1px solid #cccccc;
 42 |     border-left: none;
 43 |     border-radius: 0 2px 2px 0;
 44 | }
 45 | .formularioPesquisa button img{
 46 |     width: 18px;
 47 | }
 48 | 
 49 | .imagemUsuario{}
 50 | .cabecalho .imagemUsuario img{
 51 |     width: 35px;
 52 |     border-radius: 100%;
 53 | }
 54 | 
 55 | .destaqueCanal{
 56 |     background-image: url(./img/destaque.png);
 57 |     background-position: center;
 58 |     background-size: cover;
 59 |     background-repeat: no-repeat;
 60 |     height: 300px;
 61 | }
 62 | 
 63 | .secaoCanal{
 64 |     background-color: #fff;
 65 | }
 66 | .secaoCanal .container{}
 67 | 
 68 | .detalheCanal{
 69 |     display: flex;
 70 |     align-items: center;
 71 |     padding-top: 15px;
 72 |     margin-bottom: 15px;
 73 | }
 74 | .detalheCanal figure{
 75 |     margin-right: 20px;
 76 | }
 77 | .detalheCanal figure img{
 78 |     border-radius: 100%;
 79 |     width: 80px;
 80 | }
 81 | 
 82 | .detalheCanal__info{}
 83 | .detalheCanal__info h1{
 84 |     font-size: 20px;
 85 |     margin-bottom: 5px;
 86 | }
 87 | .detalheCanal__info p{
 88 |     font-size: 15px;
 89 | }
 90 | 
 91 | .menusNavegacaoCanal{}
 92 | .menusNavegacaoCanal ul{
 93 |     display: flex;
 94 |     align-items: center;
 95 | }
 96 | .menusNavegacaoCanal ul li{}
 97 | .menusNavegacaoCanal ul li a{
 98 |     color: #606060;
 99 |     text-decoration: none;
100 |     padding: 15px 20px;
101 |     display: inline-block;
102 |     text-transform: uppercase;
103 |     font-size: 15px;
104 | }
105 | .menusNavegacaoCanal ul li button{
106 |     background-color: transparent;
107 |     border: none;
108 | }
109 | .menusNavegacaoCanal ul li button img{
110 |     width: 18px;
111 | }
112 | 
113 | .containerVideosDestaques{
114 |     width: 1300px;
115 |     margin: 0 auto;
116 |     display: flex;
117 |     justify-content: space-between;
118 | }
119 | .containerVideosDestaques .coluna{}
120 | .containerVideosDestaques .coluna--esquerda{
121 |     width: 800px;
122 | }
123 | .containerVideosDestaques .coluna--direita{
124 |     width: 400px;
125 | }
126 | 
127 | .secaoVideosDestaque{}
128 | .secaoVideosDestaque h2{
129 |     font-size: 20px;
130 |     margin-top: 20px;
131 |     margin-bottom: 20px;
132 | }
133 | 
134 | .secaoVideosDestaques__lista{}
135 | .secaoVideosDestaques__lista li{
136 |     display: flex;
137 |     border-bottom: 1px solid #ccc;
138 |     padding-bottom: 15px;
139 |     margin-bottom: 20px;
140 | }
141 | .secaoVideosDestaques__lista li figure{
142 |     margin-right: 20px;
143 | }
144 | .secaoVideosDestaques__lista li figure img{
145 |     width: 250px;
146 | }
147 | .secaoVideosDestaques__lista li div{}
148 | .secaoVideosDestaques__lista li div h3{
149 |     font-size: 18px;
150 |     margin-bottom: 5px;
151 | }
152 | .secaoVideosDestaques__lista li div span{
153 |     font-size: 13px;
154 | }
155 | .secaoVideosDestaques__lista li div p{
156 |     font-size: 15px;
157 |     margin-top: 10px;
158 |     margin-bottom: 15px;
159 | }
160 | .buttonAdicionarAFila{
161 |     background-color: #d9d9d9;
162 |     border: none;
163 |     text-transform: uppercase;
164 |     font-size: 15px;
165 |     padding: 2px 8px;
166 |     color: #606060;
167 |     cursor: pointer;
168 |     font-family: 'Roboto', sans-serif;
169 | }
170 | 
171 | .secaoAdicionarAFila{
172 |     margin-top: 20px;
173 |     background-color: #f8f8f8;
174 | }
175 | 
176 | .secaoAdicionarAfila__cabecalho{
177 |     background-color: #fff;
178 |     padding: 20px;
179 | }
180 | .secaoAdicionarAfila__cabecalho h2{
181 |     font-size: 18px;
182 |     margin-bottom: 2px;
183 | }
184 | .secaoAdicionarAfila__cabecalho p{
185 |     font-size: 15px;
186 | }
187 | 
188 | .secaoAdicionarAFila__lista{
189 |     padding: 20px 20px;
190 |     height: 490px;
191 |     overflow-y: scroll;
192 | }
193 | .secaoAdicionarAFila__lista li{
194 |     display: flex;
195 |     margin-bottom: 10px;
196 | }
197 | .secaoAdicionarAFila__lista li figure{
198 |     margin-right: 10px;
199 | }
200 | .secaoAdicionarAFila__lista li figure img{
201 |     width: 100px;
202 | }
203 | .secaoAdicionarAFila__lista li div{}
204 | .secaoAdicionarAFila__lista li div h3{
205 |     font-size: 16px;
206 | }
207 | .secaoAdicionarAFila__lista li div span{
208 |     display: none;
209 | }
210 | .secaoAdicionarAFila__lista li div p{
211 |     display: none;
212 | }
213 | .secaoAdicionarAFila__lista li div button{
214 |     display: none;
215 | }
216 | 
217 | .secaoTodosVideos{}
218 | .secaoTodosVideos .container{}
219 | 
220 | .secaoTodosVideos h2{
221 |     text-transform: uppercase;
222 |     font-size: 15px;
223 |     display: flex;
224 |     align-items: center;
225 |     padding: 30px;
226 | }
227 | .secaoTodosVideos h2 img{
228 |     margin-right: 10px;
229 | }
230 | 
231 | .secaoTodosVideos__lista{
232 |     display: flex;
233 |     justify-content: space-between;
234 | }
235 | .secaoTodosVideos__lista li{
236 |     width: 200px;
237 | }
238 | .secaoTodosVideos__lista li figure{}
239 | .secaoTodosVideos__lista li figure img{
240 |     width: 100%;
241 | }
242 | .secaoTodosVideos__lista li div{}
243 | .secaoTodosVideos__lista li div h3{
244 |     font-size: 16px;
245 |     margin: 10px 0;
246 | }
247 | .secaoTodosVideos__lista li div span{
248 |     font-size: 13px;
249 | }
250 | .secaoTodosVideos__lista li div p{
251 |     display: none;
252 | }
253 | .secaoTodosVideos__lista li div button{
254 |     margin-top: 10px;
255 | }


--------------------------------------------------------------------------------