├── previews ├── preview-ex04-tabuada.png ├── preview-ex01-hora-do-dia.png ├── preview-ex03-vamos-contar.png ├── preview-ex02-verificador-de-idade.png └── preview-ex05-Analisador-de-numeros.png ├── Hora-do-dia ├── assets │ ├── img │ │ ├── foto-manha.png │ │ ├── foto-noite.png │ │ └── foto-tarde.png │ └── style.css ├── src │ └── main.js └── index.html ├── Verificador-de-idade ├── assets │ ├── img │ │ ├── adulto-F.png │ │ ├── adulto-M.png │ │ ├── idoso-F.png │ │ ├── idoso-M.png │ │ ├── criança-F.png │ │ ├── criança-M.png │ │ ├── adolescente-F.png │ │ └── adolescente-M.png │ └── style.css ├── src │ └── main.js └── index.html ├── Tabuada ├── src │ └── main.js ├── assets │ └── style.css └── index.html ├── LICENSE ├── Vamos-contar ├── src │ └── main.js ├── assets │ └── style.css └── index.html ├── Analisador-de-numeros ├── index.html ├── src │ └── script.js └── assets │ └── style.css ├── .gitignore └── README.md /previews/preview-ex04-tabuada.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/previews/preview-ex04-tabuada.png -------------------------------------------------------------------------------- /Hora-do-dia/assets/img/foto-manha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Hora-do-dia/assets/img/foto-manha.png -------------------------------------------------------------------------------- /Hora-do-dia/assets/img/foto-noite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Hora-do-dia/assets/img/foto-noite.png -------------------------------------------------------------------------------- /Hora-do-dia/assets/img/foto-tarde.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Hora-do-dia/assets/img/foto-tarde.png -------------------------------------------------------------------------------- /previews/preview-ex01-hora-do-dia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/previews/preview-ex01-hora-do-dia.png -------------------------------------------------------------------------------- /previews/preview-ex03-vamos-contar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/previews/preview-ex03-vamos-contar.png -------------------------------------------------------------------------------- /Verificador-de-idade/assets/img/adulto-F.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Verificador-de-idade/assets/img/adulto-F.png -------------------------------------------------------------------------------- /Verificador-de-idade/assets/img/adulto-M.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Verificador-de-idade/assets/img/adulto-M.png -------------------------------------------------------------------------------- /Verificador-de-idade/assets/img/idoso-F.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Verificador-de-idade/assets/img/idoso-F.png -------------------------------------------------------------------------------- /Verificador-de-idade/assets/img/idoso-M.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Verificador-de-idade/assets/img/idoso-M.png -------------------------------------------------------------------------------- /Verificador-de-idade/assets/img/criança-F.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Verificador-de-idade/assets/img/criança-F.png -------------------------------------------------------------------------------- /Verificador-de-idade/assets/img/criança-M.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Verificador-de-idade/assets/img/criança-M.png -------------------------------------------------------------------------------- /previews/preview-ex02-verificador-de-idade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/previews/preview-ex02-verificador-de-idade.png -------------------------------------------------------------------------------- /previews/preview-ex05-Analisador-de-numeros.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/previews/preview-ex05-Analisador-de-numeros.png -------------------------------------------------------------------------------- /Verificador-de-idade/assets/img/adolescente-F.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Verificador-de-idade/assets/img/adolescente-F.png -------------------------------------------------------------------------------- /Verificador-de-idade/assets/img/adolescente-M.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CarlaBruckmann/CursoemVideo-JavaScript/HEAD/Verificador-de-idade/assets/img/adolescente-M.png -------------------------------------------------------------------------------- /Hora-do-dia/src/main.js: -------------------------------------------------------------------------------- 1 | function carregar(){ 2 | var msg = window.document.getElementById('msg') 3 | var img = window.document.getElementById('imagem') 4 | var data = new Date() 5 | var hora = data.getHours() 6 | 7 | 8 | if(hora >= 0 && hora < 12){ 9 | img.src = 'assets/img/foto-manha.png' 10 | document.body.style.background = '#FFC26C' 11 | msg.innerHTML = `Agora são ${hora} horas.
Bom dia!` 12 | 13 | }else if(hora >= 12 && hora <= 18){ 14 | img.src = 'assets/img/foto-tarde.png' 15 | document.body.style.background = '#C0D8D8' 16 | msg.innerHTML = `Agora são ${hora} horas.
Boa tarde!` 17 | 18 | }else{ 19 | img.src = 'assets/img/foto-noite.png' 20 | document.body.style.background = '#203F54' 21 | msg.innerHTML = `Agora são ${hora} horas.
Boa noite!` 22 | } 23 | 24 | } 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Tabuada/src/main.js: -------------------------------------------------------------------------------- 1 | (async function () { 2 | if (CSS["paintWorklet"] === undefined) 3 | await import("https://unpkg.com/css-paint-polyfill"); 4 | CSS.paintWorklet.addModule( 5 | "https://rawcdn.githack.com/CSSHoudini/css-houdini/6979b873e80f9120f52bd481fbdf2d4c60db6b19/src/connections/dist/connections.js" 6 | ); 7 | })(); 8 | 9 | function multiplicar() { 10 | let num = window.document.getElementById('txtn') 11 | let tab = window.document.getElementById('seltab') 12 | 13 | if (num.value.length == 0) { 14 | window.alert('Por favor, digite um número!') 15 | } else { 16 | let n = Number(num.value) 17 | tab.innerHTML = '' 18 | for(let c = 1;c <= 10;c++){ 19 | let item = document.createElement('option') 20 | item.text = `${n} x ${c} = ${n*c}` 21 | item.value = `tab${c}` 22 | tab.appendChild(item) 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Carla Bruckmann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Vamos-contar/src/main.js: -------------------------------------------------------------------------------- 1 | function contar() { 2 | var formInicio = window.document.getElementById('txtini') 3 | var formFim = window.document.getElementById('txtfim') 4 | var formPas = window.document.getElementById('txtpas') 5 | var res = window.document.getElementById('res') 6 | 7 | if (formInicio.value.length === 0 || formFim.value.length === 0 || formPas.value.length === 0) { 8 | res.innerHTML = `Impossível realizar a contagem!` 9 | } else { 10 | res.innerHTML = 'Contando:
' 11 | var i = Number(formInicio.value) 12 | var f = Number(formFim.value) 13 | var p = Number(formPas.value) 14 | if (p <= 0) { 15 | window.alert('Passo Inválido! Considerando Passo 1') 16 | p = 1 17 | } 18 | if (i < f) { 19 | for (var c = i; c <= f; c += p) { 20 | res.innerHTML += ` ${c} \u{1F449} ` 21 | } 22 | } else { 23 | for (var c = i; c >= f; c -= p) { 24 | res.innerHTML += ` ${c} \u{1F449} ` 25 | } 26 | } 27 | res.innerHTML += `\u{1F3C1}` 28 | } 29 | 30 | 31 | } -------------------------------------------------------------------------------- /Hora-do-dia/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;500&display=swap"); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | text-decoration: none; 7 | } 8 | body { 9 | background: rgb(102, 150, 255); 10 | font-family: "Poppins", Arial; 11 | font-size: 18px; 12 | display: flex; 13 | flex-direction: column; 14 | justify-content: space-around; 15 | align-items: center; 16 | height: 500px; 17 | } 18 | header { 19 | color: white; 20 | font-weight: 500; 21 | } 22 | section { 23 | background: rgba(255, 255, 255, 0.637); 24 | border: solid 2px white; 25 | border-radius: 5%; 26 | padding: 15px; 27 | width: 250px; 28 | height: 300px; 29 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.342); 30 | display: flex; 31 | flex-direction: column; 32 | justify-content: space-around; 33 | align-items: center; 34 | font-weight: 200; 35 | text-align: center; 36 | color: rgb(85, 85, 85); 37 | } 38 | #msg { 39 | margin-bottom: 10px; 40 | } 41 | footer { 42 | margin-top: 25px; 43 | } 44 | a { 45 | font-size: 24px; 46 | margin: 10px; 47 | color: white; 48 | } 49 | a:hover { 50 | transform: scale(1.1); 51 | } 52 | -------------------------------------------------------------------------------- /Hora-do-dia/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hora do Dia 8 | 9 | 10 | 11 | 12 |
13 |

Hora do Dia

14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | Foto do dia 22 |
23 |
24 | 25 | 51 | 52 | 53 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Verificador-de-idade/src/main.js: -------------------------------------------------------------------------------- 1 | function verificar() { 2 | var data = new Date() 3 | var ano = data.getFullYear() 4 | var formAno = window.document.getElementById('txtano') 5 | var res = window.document.querySelector('div#res') 6 | if (formAno.value.length === 0 || Number(formAno.value) > ano) { 7 | window.alert('[ERRO]Verifique os dados e tente novamente!') 8 | } else { 9 | var fsex = window.document.getElementsByName('radsex') 10 | var idade = ano - Number(formAno.value) 11 | var gênero = '' 12 | var img = document.createElement('img') 13 | img.setAttribute('id', 'foto') 14 | if (fsex[0].checked) { 15 | gênero = 'Mulher' 16 | if (idade >= 0 && idade < 10) { 17 | img.setAttribute('src', 'assets/img/criança-F.png') 18 | } else if (idade < 21) { 19 | img.setAttribute('src', 'assets/img/adolescente-F.png') 20 | } else if (idade < 50) { 21 | img.setAttribute('src', 'assets/img/adulto-F.png') 22 | } else { 23 | img.setAttribute('src', 'assets/img/idoso-F.png') 24 | } 25 | } else if (fsex[1].checked) { 26 | gênero = 'Homem' 27 | if (idade >= 0 && idade < 10) { 28 | img.setAttribute('src', 'assets/img/criança-M.png') 29 | } else if (idade < 21) { 30 | img.setAttribute('src', 'assets/img/adolescente-M.png') 31 | } else if (idade < 50) { 32 | img.setAttribute('src', 'assets/img/adulto-M.png') 33 | } else { 34 | img.setAttribute('src', 'assets/img/idoso-M.png') 35 | } 36 | } 37 | res.innerHTML = `${gênero} com ${idade} anos` 38 | res.appendChild(img) 39 | } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /Analisador-de-numeros/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Analisador de Números 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |

Analisador de Números

17 |
18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 |
26 |
27 | 29 |
30 |
31 | 32 |
33 |
34 |
35 |

36 |
37 |
38 | 46 | 47 | 48 | 49 |
50 | 51 | 52 | -------------------------------------------------------------------------------- /Analisador-de-numeros/src/script.js: -------------------------------------------------------------------------------- 1 | var num = window.document.getElementById('fnum') 2 | var lista = window.document.getElementById('flista') 3 | var res = window.document.getElementById('res') 4 | var valores = [] 5 | 6 | function isNumero(n) { 7 | if (Number(n) >= 1 && Number(n) <= 100) { 8 | return true 9 | } else { 10 | return false 11 | } 12 | } 13 | 14 | function inLista(n, l) { 15 | if (l.indexOf(Number(n)) != -1) { 16 | return true 17 | } else { 18 | return false 19 | } 20 | } 21 | 22 | function adicionar() { 23 | if (isNumero(num.value) && !inLista(num.value, valores)) { 24 | valores.push(Number(num.value)) 25 | var item = document.createElement('option') 26 | item.text = `Valor ${Number(num.value)} adicionado` 27 | lista.appendChild(item) 28 | res.innerHTML = '' 29 | } else { 30 | window.alert('Valor inválido ou já encontrado na lista.') 31 | } 32 | num.value = '' 33 | num.focus() 34 | } 35 | 36 | function finalizar() { 37 | if (valores.length == 0) { 38 | window.alert('Por favor, adicione número antes de finalizar') 39 | } else { 40 | var total = valores.length 41 | var menor = valores[0] 42 | var maior = valores[0] 43 | var soma = 0 44 | var média = 0 45 | for (var pos in valores) { 46 | soma += valores[pos] 47 | if (valores[pos] > maior) { 48 | maior = valores[pos] 49 | } 50 | if (valores[pos] < menor) { 51 | menor = valores[pos] 52 | } 53 | } 54 | média = soma / total 55 | res.innerHTML = '' 56 | res.innerHTML += `Ao todo, temos ${total} números cadastrados.
` 57 | res.innerHTML += `O maior número informado foi ${maior}.
` 58 | res.innerHTML += `O menor número informado foi ${menor}.
` 59 | res.innerHTML += `Somando todos os valores, temos ${soma}.
` 60 | res.innerHTML += `A média dos valores informados é ${média}.` 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /Vamos-contar/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap"); 2 | 3 | :root { 4 | --font-title: 24px; 5 | --font-text: 18px; 6 | --background-rainbow: linear-gradient( 7 | 90.06deg, 8 | #6cdeff 0.18%, 9 | #acfeea 32.92%, 10 | #fee7d4 62.02%, 11 | #ffb3c8 90.07% 12 | ); 13 | } 14 | * { 15 | padding: 0; 16 | margin: 0; 17 | box-sizing: border-box; 18 | text-decoration: none; 19 | } 20 | body { 21 | background: var(--background-rainbow); 22 | display: grid; 23 | place-items: center; 24 | height: 100vh; 25 | font-family: "Overpass"; 26 | color: #302f2f; 27 | } 28 | h1 { 29 | text-transform: uppercase; 30 | font-size: var(--font-title); 31 | font-weight: bold; 32 | padding: 30px 0; 33 | } 34 | label, 35 | input { 36 | font-size: var(--font-text); 37 | font-weight: normal; 38 | color: #302f2f; 39 | } 40 | label { 41 | padding-right: 5px; 42 | } 43 | input:focus { 44 | outline: none; 45 | } 46 | form input { 47 | background: #e4e3e3; 48 | border-radius: 30px; 49 | border: 1px solid #ffffff; 50 | padding: 5px 0 5px 10px; 51 | } 52 | a { 53 | margin: 0 10px; 54 | font-size: 24px; 55 | color: #302f2f; 56 | } 57 | #btn { 58 | padding: 8px 20px; 59 | border: solid 1px; 60 | border-image: conic-gradient(#fee7d4, #ffb3c8, #6cdeff, #acfeea) 1; 61 | background: #ffffff; 62 | margin-bottom: 30px; 63 | cursor: pointer; 64 | } 65 | #btn:hover, a:hover { 66 | transform: scale(1.1); 67 | } 68 | #res{ 69 | margin: 10px 0; 70 | font-size: var(--font-text); 71 | max-width: 205px; 72 | } 73 | .d-flex-form { 74 | display: flex; 75 | flex-direction: row; 76 | justify-content: space-between; 77 | margin: 20px 0; 78 | } 79 | .title-section { 80 | background-color: rgba(255, 255, 255, 0.267); 81 | } 82 | .d-flex-section { 83 | display: flex; 84 | flex-direction: column; 85 | align-items: center; 86 | justify-content: center; 87 | } 88 | .card-section { 89 | background: rgba(255, 255, 255, 0.34); 90 | border: 2px solid #fffdfd; 91 | border-radius: 0px 30px 0px 0px; 92 | padding: 30px; 93 | } 94 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | lerna-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # TypeScript v1 declaration files 46 | typings/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Microbundle cache 58 | .rpt2_cache/ 59 | .rts2_cache_cjs/ 60 | .rts2_cache_es/ 61 | .rts2_cache_umd/ 62 | 63 | # Optional REPL history 64 | .node_repl_history 65 | 66 | # Output of 'npm pack' 67 | *.tgz 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | 72 | # dotenv environment variables file 73 | .env 74 | .env.test 75 | 76 | # parcel-bundler cache (https://parceljs.org/) 77 | .cache 78 | 79 | # Next.js build output 80 | .next 81 | 82 | # Nuxt.js build / generate output 83 | .nuxt 84 | dist 85 | 86 | # Gatsby files 87 | .cache/ 88 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 89 | # https://nextjs.org/blog/next-9-1#public-directory-support 90 | # public 91 | 92 | # vuepress build output 93 | .vuepress/dist 94 | 95 | # Serverless directories 96 | .serverless/ 97 | 98 | # FuseBox cache 99 | .fusebox/ 100 | 101 | # DynamoDB Local files 102 | .dynamodb/ 103 | 104 | # TernJS port file 105 | .tern-port 106 | -------------------------------------------------------------------------------- /Tabuada/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap"); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | } 9 | .wrapper { 10 | background-color: #000000; 11 | height: 100vh; 12 | display: grid; 13 | place-items: center; 14 | font-family: "Roboto"; 15 | color: #ffff; 16 | margin: 0; 17 | } 18 | section { 19 | background-color: #515554; 20 | border: 1px solid #00a97f; 21 | border-radius: 6px; 22 | padding: 25px 25px 0 25px; 23 | } 24 | div { 25 | margin: 25px 0; 26 | } 27 | h1, 28 | a { 29 | font-weight: 400; 30 | font-size: 28px; 31 | } 32 | label, 33 | input { 34 | font-weight: 300; 35 | font-size: 18px; 36 | } 37 | input, 38 | select { 39 | border: 1px solid #00a97f; 40 | border-radius: 6px; 41 | overflow: visible; 42 | } 43 | input:focus, 44 | select:focus { 45 | outline: none; 46 | } 47 | select { 48 | width: 100%; 49 | } 50 | option { 51 | font-weight: 300; 52 | font-size: 16px; 53 | padding: 5px 5px 2px 5px; 54 | border-radius: 6px; 55 | } 56 | a { 57 | margin: 10px; 58 | color: #ffff; 59 | } 60 | a:hover { 61 | transform: scale(1.1); 62 | color: #00a97f; 63 | } 64 | #txtn { 65 | padding: 2px 0 2px 5px; 66 | } 67 | #btn { 68 | padding: 5px 15px; 69 | cursor: pointer; 70 | background: #515554; 71 | color: #ffff; 72 | } 73 | #btn:hover { 74 | transform: scale(1.1); 75 | } 76 | .d-flex-section { 77 | display: flex; 78 | flex-direction: column; 79 | align-items: center; 80 | } 81 | .connections { 82 | --connections-particleColor: rgb(0, 169, 127); 83 | --connections-lineColor: rgb(0, 169, 127); 84 | --connections-particleAmount: 250; 85 | --connections-defaultRadius: 3; 86 | --connections-variantRadius: 2; 87 | --connections-linkRadius: 150; 88 | background-image: paint(connections); 89 | } 90 | @media screen and (max-width: 1350px) { 91 | .connections { 92 | --connections-linkRadius: 100; 93 | } 94 | } 95 | @media screen and (max-width: 815px) { 96 | .connections { 97 | --connections-linkRadius: 60; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /Tabuada/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tabuada 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Tabuada

15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 | 28 |
29 |
30 | 33 |
34 |
35 |
36 | 62 | 63 | 67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Curso em Vídeo - JavaScript - ECMAScript: 2 | #### Arquivos de Exercícios realizados no curso de `JavaScript`, disponibilizado pelo `Canal Curso em Vídeo - Gustavo Guanabara (YouTube)`:rocket:. 3 | 4 | #### :white_check_mark: Tecnologias utilizadas: `HTML5`, `CSS3` e `JavaScript`. 5 | 6 |
7 |
8 | 9 | ### :dart: Exercício 1 - `Hora do Dia`. 10 | #### 🌎 *[CodePen - Hora do dia](https://codepen.io/carlabruckmann/full/LYWrYgv)* 11 | 12 | [Preview - Hora do Dia] 13 | preview project Hora do dia 14 | 15 |
16 |
17 | 18 | ### :dart: Exercício 2 - `Verificador de Idade`. 19 | #### 🌎 *[CodePen - Verificador de Idade](https://codepen.io/carlabruckmann/full/GRWXKWv)* 20 | 21 | [Preview - Verificador de Idade] 22 | preview project Verificador de Idade 23 | 24 |
25 |
26 | 27 | ### :dart: Exercício 3 - `Vamos Contar`. 28 | #### 🌎 *[CodePen - Vamos Contar](https://codepen.io/carlabruckmann/full/poemPMy)* 29 | 30 | [Preview - Vamos Contar] 31 | preview project Vamos Contar 32 | 33 |
34 |
35 | 36 | ### :dart: Exercício 4 - `Tabuada`. 37 | #### 🌎 *[CodePen - Tabuada](https://codepen.io/carlabruckmann/full/qBrGzvL)* 38 | 39 | [Preview - Tabuada] 40 | preview project Tabuada 41 | 42 |
43 |
44 | 45 | ### :dart: Exercício 5 - `Analisador de Números`. 46 | #### 🌎 *[CodePen - Analisador de Números](https://codepen.io/carlabruckmann/full/qBmEaWm)* 47 | 48 | [Preview - Analisador de Números] 49 | preview project Analisador de Números 50 | 51 |
52 |
53 | -------------------------------------------------------------------------------- /Vamos-contar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vamos Contar 8 | 9 | 10 | 11 |
12 |
13 |

Vamos Contar

14 |
15 |
16 |
17 |
18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 |
31 | 32 |
33 |
34 |

Preparando a contagem...

35 |
36 |
37 |
38 | 39 | 65 | 66 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /Verificador-de-idade/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Verificador de Idade 8 | 9 | 10 | 11 |
12 |
13 |

Verificador de Idade

14 |
15 |
16 |
17 | 18 | 19 |
20 |
21 | Sexo: 22 | 23 | 24 | 25 | 26 |
27 |
28 |

29 | 35 |

36 |
37 |
38 |
39 |
Preencha os dados acima para ver o resultado!
40 |
41 |
42 | 68 | 69 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /Analisador-de-numeros/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"); 3 | 4 | * { 5 | padding: 0; 6 | margin: 0; 7 | box-sizing: border-box; 8 | text-decoration: none; 9 | } 10 | h1 { 11 | font-family: "Inter"; 12 | font-weight: 500; 13 | font-size: 24px; 14 | margin-bottom: 30px; 15 | } 16 | p, 17 | label, 18 | select, 19 | option { 20 | font-family: "Source Sans Pro"; 21 | font-weight: 400; 22 | font-size: 18px; 23 | } 24 | input:focus, 25 | select:focus { 26 | outline: none; 27 | } 28 | .wrapper { 29 | background-color: white; 30 | width: 100vw; 31 | height: 100vh; 32 | display: grid; 33 | place-items: center; 34 | color: black; 35 | margin: 0; 36 | } 37 | .confettis { 38 | background: paint(extra-confetti); 39 | 40 | --extra-confettiNumber: 300; /* defaults to 30 */ 41 | --extra-confettiLengthVariance: 15; /* Defaults to 15 */ 42 | --extra-confettiWeightVariance: 3; /* Defaults to 4 */ 43 | } 44 | section { 45 | background-color: white; 46 | border: solid 1px #0000ca; 47 | border-radius: 0 20px; 48 | width: auto; 49 | height: auto; 50 | display: flex; 51 | flex-direction: column; 52 | align-items: center; 53 | padding: 30px; 54 | } 55 | div { 56 | margin-bottom: 20px; 57 | } 58 | select, 59 | input { 60 | border: solid 1px #ffac34; 61 | } 62 | select { 63 | width: 100%; 64 | background-color: #ffbe6221; 65 | } 66 | option{ 67 | padding: 2px 5px; 68 | } 69 | #fnum { 70 | width: 90px; 71 | padding: 3px; 72 | background-color: #ffbe6221; 73 | } 74 | .btn { 75 | font-family: "Source Sans Pro"; 76 | font-weight: 600; 77 | font-size: 18px; 78 | background-color: #ffac34; 79 | border-radius: 0 10px; 80 | padding: 5px 10px; 81 | } 82 | .btn:hover, 83 | a:hover { 84 | transform: scale(1.05); 85 | transition: 0.1s ease-in-out; 86 | } 87 | .wrapper-button-1 { 88 | display: flex; 89 | flex-direction: row; 90 | justify-content: flex-end; 91 | margin-bottom: 30px; 92 | } 93 | .wrapper-button-2 { 94 | display: flex; 95 | flex-direction: row; 96 | justify-content: center; 97 | } 98 | .wrapper-res { 99 | display: flex; 100 | align-items: center; 101 | margin-top: 20px; 102 | } 103 | a { 104 | font-size: 24px; 105 | color: #ffac34; 106 | margin: 0 10px; 107 | } 108 | a:hover { 109 | color: #0000ca; 110 | } 111 | -------------------------------------------------------------------------------- /Verificador-de-idade/assets/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"); 2 | :root { 3 | --white-background: #f2f2f2; 4 | --white: rgba(255, 255, 255, 0.945); 5 | --blue-light: #39c3e5ad; 6 | --blue-dark: #363e61; 7 | --red: #ff6855; 8 | } 9 | * { 10 | padding: 0; 11 | margin: 0; 12 | box-sizing: border-box; 13 | text-decoration: none; 14 | } 15 | 16 | body { 17 | height: auto; 18 | background: var(--white-background); 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | font-family: "Lato"; 23 | font-size: 20px; 24 | } 25 | 26 | .wrapper { 27 | background: var(--white); 28 | width: 300px; 29 | height: auto; 30 | margin: 50px 10px 50px 10px; 31 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.226); 32 | border-radius: 30px; 33 | display: flex; 34 | flex-direction: column; 35 | justify-content: space-around; 36 | align-items: flex-start; 37 | color: var(--blue-dark); 38 | } 39 | header { 40 | padding: 30px 0; 41 | text-align: center; 42 | } 43 | form { 44 | background-color: var(--blue-light); 45 | width: 100%; 46 | padding: 25px 20px; 47 | border-radius: 30px 30px 0 0; 48 | box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.226); 49 | } 50 | legend { 51 | margin-bottom: 5px; 52 | } 53 | #txtano { 54 | width: 260px; 55 | margin-bottom: 20px; 56 | padding: 10px; 57 | font-family: "Lato"; 58 | font-size: 18px; 59 | font-weight: 400; 60 | color: var(--red); 61 | border: solid 2px var(--red); 62 | border-radius: 30px; 63 | } 64 | #txtano:focus { 65 | outline: none; 66 | } 67 | .radio { 68 | display: none; 69 | } 70 | .radio-label::before { 71 | content: "\2613"; 72 | background-color: var(--white); 73 | margin-right: 5px; 74 | padding: 1px 5px 0; 75 | border: 2px solid var(--red); 76 | border-radius: 50%; 77 | transition: 0.3s ease-in-out; 78 | font-size: 15px; 79 | color: var(--white); 80 | } 81 | .radio:checked + .radio-label:before { 82 | background-color: var(--red); 83 | } 84 | .radio-2 { 85 | margin-left: 15px; 86 | } 87 | #btn { 88 | background-color: var(--white); 89 | margin: 25px 0 0 30%; 90 | padding: 5px 10px; 91 | border-radius: 30px; 92 | border: solid 2px var(--red); 93 | font-family: "Lato"; 94 | font-size: 18px; 95 | font-weight: 700; 96 | color: var(--blue-dark); 97 | } 98 | #btn:hover { 99 | box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.226); 100 | transform: scale(1.1); 101 | transition: 0.2s ease-in-out; 102 | } 103 | .wrapper-res { 104 | background-color: var(--blue-light); 105 | width: 100%; 106 | border-radius: 0 0px 30px 30px; 107 | } 108 | #res { 109 | background-color: var(--blue-dark); 110 | padding: 25px 20px; 111 | border-radius: 30px; 112 | box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.226); 113 | text-align: center; 114 | color: white; 115 | } 116 | #foto { 117 | margin-top: 30px; 118 | } 119 | a { 120 | margin: 10px; 121 | color: var(--red); 122 | } 123 | a:hover { 124 | transform: scale(1.1); 125 | color: var(--blue-light); 126 | } 127 | --------------------------------------------------------------------------------