├── README.md ├── assets ├── css │ ├── reset.css │ └── style.css ├── img │ ├── Group (1).png │ ├── Group (2).png │ ├── Group (3).png │ ├── Group.png │ ├── Hashtag.png │ ├── Home.png │ ├── Notification.png │ ├── ProfilePic (1).png │ ├── ProfilePic (2).png │ ├── ProfilePic.png │ ├── bird 1.svg │ └── twitter.png └── js │ └── script.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Maratona de Programação 3: Twitter 2 | 3 | Projeto desenvolvido na parte 3 da maratona de programação da Kenzie Academy Brasil. 4 | 5 | ## Ferramentas 6 | 7 | 1. [Instalação do VS Code no Windows](https://kenzie.com.br/blog/instalacao-vs-code-windows/) 8 | 2. [Como utilizar o codepen e o VSCode](https://kenzie-academy-brasil.github.io/ferramentas/) 9 | 10 | ## O Projeto 11 | 12 | ### Estrutura de arquivos 13 | 14 | - README.md 15 | - index.html 16 | - /assets 17 | - /img 18 | - /js 19 | - script.js 20 | - /css 21 | - style.css 22 | 23 | ### Fonte 24 | 25 | - 'Roboto', sans-serif; 26 | 27 | ### Cores 28 | 29 | - Azul principal: #1da1f2; 30 | - Opacidade: 0.4; 31 | - Cinza: #828282; 32 | - Cinza escuro: #333333; 33 | - Cinza azulado: #e7ecf0; 34 | - Preto: #000000; 35 | - Branco: #ffffff; 36 | 37 | ## Layout 38 | 39 | - [Twitter](./assets/img/twitter.png) 40 | 41 | ## Referências 42 | - [w3schools lista de tags](https://www.w3schools.com/tags/default.asp) 43 | - [Google Fonts](https://fonts.google.com/) 44 | - [w3schools - css](https://www.w3schools.com/css/) 45 | - [CSS tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 46 | - [w3schools - js](https://www.w3schools.com/js/default.asp) 47 | - [Introdução CSS BEM](http://getbem.com/introduction/) 48 | - [CSS BEM](http://getbem.com/naming/) -------------------------------------------------------------------------------- /assets/css/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 | } -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* CSS => Cascading StyleSheet(Folha de estilo em cascata) 2 | 3 | Estrutura 4 | 5 | Regra CSS: 6 | seletor { 7 | propriedade: valor; -> declaração 8 | } 9 | 10 | CSS BEM 11 | 12 | B -> Bloco 13 | E -> Elemento 14 | M -> Modificador 15 | 16 | font-family: 'Roboto', sans-serif; 17 | 18 | */ 19 | 20 | /* BODY */ 21 | body{ 22 | font-family: 'Roboto', sans-serif; 23 | } 24 | 25 | .container{ 26 | width: 100%; 27 | max-width: 900px; 28 | margin: 0 auto; 29 | display: flex; 30 | 31 | /* margin-top: 50px; 32 | margin-bottom: ; 33 | margin-left: ; 34 | margin-right: ; 35 | margin: top right bottom left; 36 | margin: top right/left bottom; 37 | margin: top/bottom right/left; 38 | margin: todos os lados; */ 39 | } 40 | 41 | /* CABEÇALHO */ 42 | .cabecalho{ 43 | flex-basis: 30%; 44 | } 45 | .cabecalho__logo{ 46 | margin-bottom: 50px; 47 | } 48 | .cabecalho__logo img{} 49 | .cabecalho__logo figcaption{ 50 | display: none; 51 | } 52 | 53 | .cabecalho__menuNavegacao{} 54 | .cabecalho__menuLista{} 55 | .cabecalho__menuItem{ 56 | margin-bottom: 25px; 57 | } 58 | .cabecalho__menuItem img{ 59 | max-width: 26px; 60 | } 61 | .cabecalho__menuItem a{ 62 | color: #000; 63 | text-decoration: none; 64 | font-size: 22px; 65 | vertical-align: top; 66 | } 67 | 68 | 69 | /* CONTEÚDO PRINCIPAL */ 70 | .conteudoPrincipal{ 71 | flex-basis: 70%; 72 | border-left: 1px solid #e7ecf0; 73 | border-right: 1px solid #e7ecf0; 74 | } 75 | .conteudoPrincipal__titulo{ 76 | padding: 10px 30px; 77 | } 78 | 79 | .conteudoPrincipal__formulario{ 80 | padding: 10px 30px; 81 | border-top: 1px solid #e7ecf0; 82 | border-bottom: 10px solid #e7ecf0; 83 | text-align: right; 84 | } 85 | .conteudoPrincipal__formulario textarea{ 86 | display: block; 87 | width: 100%; 88 | border: none; 89 | outline: none; 90 | resize: none; 91 | height: 55px; 92 | } 93 | .conteudoPrincipal__formulario button{ 94 | background-color: #1da1f2; 95 | border: none; 96 | padding: 8px 20px; 97 | color: #fff; 98 | border-radius: 20px; 99 | } 100 | 101 | .conteudoPrincipal__feed{} 102 | .conteudoPrincipal__listaTweets{ 103 | display: flex; 104 | flex-flow: column-reverse nowrap; 105 | } 106 | .conteudoPrincipal__tweet{ 107 | padding: 20px 32px; 108 | display: flex; 109 | align-items: flex-start; 110 | border-bottom: 1px solid #e7ecf0; 111 | } 112 | 113 | .tweet__fotoPerfil{} 114 | .tweet__conteudo{ 115 | margin-left: 15px; 116 | } 117 | .tweet__conteudo h2{ 118 | display: inline-block; 119 | } 120 | .tweet__conteudo span{ 121 | display: inline-block; 122 | color: #828282; 123 | } 124 | .tweet__conteudo p{ 125 | margin-top: 15px; 126 | color: #333333; 127 | } -------------------------------------------------------------------------------- /assets/img/Group (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/Group (1).png -------------------------------------------------------------------------------- /assets/img/Group (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/Group (2).png -------------------------------------------------------------------------------- /assets/img/Group (3).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/Group (3).png -------------------------------------------------------------------------------- /assets/img/Group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/Group.png -------------------------------------------------------------------------------- /assets/img/Hashtag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/Hashtag.png -------------------------------------------------------------------------------- /assets/img/Home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/Home.png -------------------------------------------------------------------------------- /assets/img/Notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/Notification.png -------------------------------------------------------------------------------- /assets/img/ProfilePic (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/ProfilePic (1).png -------------------------------------------------------------------------------- /assets/img/ProfilePic (2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/ProfilePic (2).png -------------------------------------------------------------------------------- /assets/img/ProfilePic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/ProfilePic.png -------------------------------------------------------------------------------- /assets/img/bird 1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kenzie-Academy-Brasil/maratona-twitter/024c6a637741bb6812b07d397008f0600f2da988/assets/img/twitter.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | // VARIÁVEIS 2 | // uma caixinha na memória, onde eu guardo algum valor 3 | 4 | // var => má prática, não utilizem 5 | 6 | // let 7 | // const 8 | 9 | let numero = 0; 10 | const nome = "Maria"; 11 | const boleano = false; 12 | 13 | // console.log(numero); 14 | // console.log(nome); 15 | // console.log(boleano); 16 | 17 | /* 18 | operadores básicos 19 | 20 | soma: + 21 | subtração: - 22 | multiplicação: * 23 | divisão: / 24 | */ 25 | 26 | let numero2 = 3; 27 | let numero3 = 5; 28 | 29 | let soma = 2 + 2; 30 | let soma2 = numero2 + numero3; 31 | 32 | // console.log(soma) 33 | // console.log(soma2) 34 | 35 | /** 36 | * operadores lógicos 37 | * 38 | * == / === 39 | * != / !== 40 | * > / >= 41 | * < / <= 42 | * 43 | */ 44 | 45 | // console.log(!(numero2 > numero3)); 46 | 47 | /** 48 | * funções 49 | */ 50 | 51 | // declaração apenas 52 | function calcularSoma(numero1, numero2) { 53 | let total = numero1 + numero2; 54 | console.log(total); 55 | } 56 | 57 | // chamada da função -> momento em que ela vai ser exacutada 58 | // calcularSoma(7, 9); 59 | // calcularSoma(2, 5); 60 | // calcularSoma(7, 4); 61 | // calcularSoma(1, 9); 62 | 63 | /** 64 | * 65 | * DOM 66 | * Document Object Model(Modelo de Objeto do Documento) 67 | * 68 | */ 69 | 70 | const cabecalho = document.querySelector('header'); 71 | 72 | // console.log(cabecalho); 73 | 74 | /** 75 | * 76 | * eventos 77 | * 78 | * addEventListener 79 | * 80 | * elemento.addEventListener('evento', função); 81 | * 82 | */ 83 | 84 | // const tweetar = document.querySelector('button'); 85 | 86 | // function imprimirNoConsole() { 87 | // console.log('clicou no botão!') 88 | // } 89 | 90 | // tweetar.addEventListener('click', imprimirNoConsole); 91 | 92 | /** 93 | * passo a passo 94 | * 95 | * 1º passo: capturar o valor da textarea para criar o tweet 96 | * 2º passo: construir o tweet 97 | * 3º passo: imprimir esse tweet 98 | * 99 | */ 100 | 101 | const textarea = document.querySelector('textarea'); 102 | const tweetar = document.querySelector('button'); 103 | const feed = document.querySelector(".conteudoPrincipal__listaTweets") 104 | 105 | function pegarTweet(event) { 106 | event.preventDefault(); 107 | 108 | const tweetTextarea = textarea.value; 109 | criarTweet(tweetTextarea) 110 | } 111 | 112 | tweetar.addEventListener('click', pegarTweet); 113 | 114 | 115 | 116 | function criarTweet(tweetTexto){ 117 | 118 | let data = new Date(); 119 | let hora = data.getHours(); 120 | let minutos = data.getMinutes(); 121 | 122 | //OBJETO 123 | const tweet = { 124 | nome: "Daniel", 125 | foto: "./assets/img/ProfilePic.png", 126 | usuario: "@danielkenzie", 127 | texto:tweetTexto, 128 | tempo:`${hora}:${minutos}` 129 | } 130 | 131 | 132 | listarTemplateTweet(tweet); 133 | } 134 | 135 | function listarTemplateTweet(tweet){ 136 | 137 | const {nome,foto,usuario,texto,tempo} = tweet 138 | 139 | //CRIANDO ELEMENTOS PARA LISTAR O TEMPLATE 140 | let li = document.createElement("li"); 141 | li.classList.add("conteudoPrincipal__tweet") 142 | let img = document.createElement("img"); 143 | img.src = foto 144 | img.classList.add("tweet__fotoPerfil") 145 | 146 | let div = document.createElement("div"); 147 | div.classList.add("tweet__conteudo") 148 | let h2 = document.createElement("h2"); 149 | h2.innerText = nome 150 | 151 | let span = document.createElement("span"); 152 | span.innerText = ` ${usuario} - ${tempo}` 153 | 154 | let p = document.createElement("p"); 155 | p.innerText = texto 156 | 157 | //ADICIONANDO ELEMENTOS DENTRO DA DIV 158 | div.appendChild(h2) 159 | div.appendChild(span) 160 | div.appendChild(p) 161 | 162 | //ADICIONANDO ELEMENTOS DENTRO DA LI 163 | li.appendChild(img) 164 | li.appendChild(div) 165 | 166 | feed.appendChild(li) 167 | textarea.value = "" 168 | } 169 | 170 | 171 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Ken-Te-Vi 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 |
24 | 25 | 26 | 30 | 31 | 32 | 79 | 80 |
81 | 82 | 83 |
84 | 85 | 86 |

Home

87 | 88 | 89 |
90 | 91 | 92 | 93 |
94 | 95 | 96 |
97 | 98 | 99 |
    100 | 101 |
  • 102 | 103 | Daniel 104 | 105 | 106 |
    107 |

    Hudson Carolino

    108 | @hudsoncarolino 14s 109 |

    98% de #empregabilidade? Só na Kenzie... Pois é, 98% dos alunos formados estão trabalhando na área menos de 1 mês após a graduação #ninguemmesegura 🤯

    110 |
    111 | 112 |
    • 113 | 114 |
  • 115 | 116 | Daniel 117 | 118 | 119 |
    120 |

    Maria Porcina

    121 | @mariap.na 14s 122 |

    Este é um tweet. Pode ser longo ou curto. Depende do que você tem a dizer. Ele pode ter algumas hashtags também. #likethis

    123 |
    124 | 125 |
    • 126 | 127 |
  • 128 | 129 | Daniel 130 | 131 | 132 |
    133 |

    Daniel

    134 | @danielkenzie 14s 135 |

    MAIS DE 1 MILHÃO DE VAGAS! Artigo da McKinsey aponta que, 136 | até 2030, o Brasil terá um gargalo de 1 mi profissionais de tecnologia. 137 | É hora de se preparar... #VouSerDev #DoZeroAoCodigo 138 |

    139 |
    140 | 141 |
    • 142 |
143 | 144 |
145 | 146 |
147 | 148 |
149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | --------------------------------------------------------------------------------