diff --git a/2019-setembro/GabrielVais/README.md b/2019-setembro/GabrielVais/README.md new file mode 100644 index 0000000..c56bd54 --- /dev/null +++ b/2019-setembro/GabrielVais/README.md @@ -0,0 +1,22 @@ +# Challenge Twitch Setembro Finalizado + +* Tecnologias utilizadas + +1. HTML + +2. CSS + +3. JS + +* Maior dificuldade ? + +Implementar a função de calculadora e de som no mesmo botao sem ocorrer conflito. + + +## Projeto finalizado +https://gabrielvais.github.io/desafio-collab-demonstracao/. + + + + + diff --git a/2019-setembro/GabrielVais/assets/css/styles.css b/2019-setembro/GabrielVais/assets/css/styles.css new file mode 100644 index 0000000..107538e --- /dev/null +++ b/2019-setembro/GabrielVais/assets/css/styles.css @@ -0,0 +1,584 @@ +*{ + + margin:0; + padding:0; + +} + +html, body{ + + height:100%; + +} + +.container{ + + display:flex; + flex-direction:column; + margin-top:10%; + align-items:center; + width: auto; + + + +} + + +.display{ + + width:100%; + height:600px; + + + +} + +.tela{ + + width:600px; + border:30px solid #252423; + height:200px; + border-top-left-radius:10px; + border-top-right-radius:10px; + margin:auto; + -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); + -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); + box-shadow:0 0 20px rgba(0,0,0,0.8); + background:#000; + + + +} + +.tela-content{ + + background:#30336b; + width:100%; + height:100%; + display:flex; + justify-content:center; + align-items:center; + opacity:0; + + +} + + +.tela-content span{ + + color:#b71540; + letter-spacing: 0.5rem; + white-space: nowrap; + overflow: hidden; + font-family: 'Orbitron', sans-serif; + font-size:50px; + +} + +.content{ + + width:700px; + height:auto; + border:30px solid #252423; + background:#0101; + margin:auto; + display:flex; + flex-wrap:wrap; + padding-bottom:10px; + justify-content:flex-end; + border-radius:5px; + box-shadow: inset 0 0 20px rgba(0,0,0,0.6); + padding-top:10px; + + + + +} + + +.input-items{ + + + display:flex; + flex-direction:row; + margin-top:10px; + margin:auto; + flex-wrap:wrap; + align-items:center; + +} + +.input-items .input-group .btn-big{ + + width:200px; + height:88px; + border-radius:10px; + color:#FFFF; + font-size:30px; + box-shadow: inset 0 0 6px rgba(0,0,0,0.6); + font-family:Verdana; + font-weight:bold; + + +} + +.input-items .input-group .btn-big:hover{ + + cursor:pointer; + +} + + + +.input-items .input-group-2 .btn-medium{ + + + width:150px; + height:88px; + color:#FFFF; + font-size:22px; + border-radius:10px; + margin-left:18px; + box-shadow: inset 0 0 6px rgba(0,0,0,0.6); + font-family:Verdana; + font-weight:bold; + + +} + +.btn-medium-numbers{ + + width:50px; + height:70px; + margin:10px 10px 20px 0px; + color:#3c40c6; + background:#FFF; + font-size:27px; + display:flex; + flex-direction:column; + align-items:center; + box-shadow: inset 0 0 10px rgba(0,0,0,0.6); + border-radius:5px; + font-family: 'Orbitron', sans-serif; + +} + +.btn-medium-numbers span{ + + color:#ffff; + font-size:12px; + width:50px; + height:100%; + background:#A52A2A; + display:flex; + justify-content:center; + align-items:center; + border-radius:5px; + font-weight:bold; + +} + +.input-group-2 { + + margin:auto; +} + +.btn-medium-numbers:hover{ + + cursor:pointer; + opacity:0.8; +} + + + +.input-items .input-group-2 .btn-medium:hover{ + + cursor:pointer; + +} + + +.input-items .input-group-2 .btn-medium-output{ + + width:120px; + height:50px; + color:#FFF; + font-size:30px; + background:#575fcf; + border-radius:5px; + box-shadow: inset 0 0 6px rgba(0,0,0,0.6); + font-family:verdana; + font-weight:bold; + + +} + +.input-items .input-group-2 .btn-medium-output:hover{ + + cursor:pointer; + opacity:0.7; + +} + + +#btnLimpar{ + + background:#eb4d4b; + +} + + +#btnLimpar:hover{ + + background:#A52A2A; + transition:ease 0.3s; + +} + +#btnDesligar{ + + background:#eb2f06; + +} + +#btnDesligar:hover{ + + background:#B22222 ; + transition:ease 0.3s; + + +} + + +#btnLigar{ + + background:#05c46b; +} + + +#btnLigar:hover{ + + background:#006400; + transition:ease 0.3s; + +} + + + +.desligado{ + + opacity:0; +} + +.ligado{ + + opacity:1; +} + + +.animation{ + + animation:shutdown 1s; +} + +/*----------------------------------------*/ + @-webkit-keyframes shutdown { + 0% { opacity: 0; } + 8%, 46% { transform: scale(1, 1); opacity: 1; } + 50% { transform: scale(1, 0.02); opacity: 0.8; } + 55%, 100% { transform: scale(0, 0); opacity: 0.3; } + } + + + @-webkit-keyframes neon4 { + from { + box-shadow: 0 0 10px #fff, 0 0 20px #fff; + } + to { + box-shadow: 0 0 5px #fff, 0 0 10px #fff; + } +} + + +/*RESPONSIVIDADE ---------------------------- //*/ +@media (min-width: 690px) and (max-width: 1024px) { + + +.display{ + + width:100%; + height:600px; +} + +.tela{ + + width:530px; + height:200px; + +} + +.content{ + + width:620px; + height:auto; +} + +.input-items .input-group .btn-big{ + + width:150px; + height:88px; + font-size:25px; + margin-right:20px; + +} + +.input-items .input-group-2 .btn-medium{ + + + width:125px; + height:88px; + font-size:22px; +} + +.input-items .input-group-2 .btn-medium-output{ + + width:120px; + height:50px; + font-size:30px; + + + } + + +} + +@media (min-width: 481px) and (max-width: 690px) { + + +.display{ + + width:100%; + height:600px; +} + +.tela{ + + width:370px; + height:200px; + +} + +.tela-content span{ + + font-size:30px; + color:#b71540; + letter-spacing: 0.5rem; + + +} + +.content{ + + width:450px; + height:300px; +} + +.input-items .input-group .btn-big{ + + width:120px; + height:88px; + font-size:20px; + margin-right:20px; + + +} + +.input-items .input-group-2 .btn-medium{ + + + width:100px; + height:88px; + font-size:22px; +} + +.btn-medium-numbers{ + + width:30px; + height:55px; + font-size:18px; + +} + + +.btn-medium-numbers span{ + + + width:30px; + font-size:11px; + overflow:hidden; + +} + + +.input-items .input-group-2 .btn-medium-output{ + + width:90px; + height:50px; + font-size:30px; + + + } + + +} +@media (min-width: 320px) and (max-width: 480px) { + + +.display{ + + width:100%; + height:600px; +} + +.tela{ + + width:250px; + height:200px; + +} + +.tela-content span{ + + font-size:30px; +} + +.content{ + + width:315px; + height:300px; +} + +.input-items .input-group .btn-big{ + + width:70px; + height:88px; + font-size:13px; + +} + +.input-items .input-group-2 .btn-medium{ + + + width:80px; + height:88px; + font-size:22px; + margin-left:20px; +} + +.btn-medium-numbers{ + + width:18px; + height:47px; + font-size:16px; + +} + +.btn-medium-numbers span{ + + + width:18px; + font-size:7px; + + +} + + +.input-items .input-group-2 .btn-medium-output{ + + width:60px; + height:50px; + font-size:30px; + + + } +} + + + +@media (max-width: 320px){ + + +.display{ + + width:100%; + height:600px; +} + +.tela{ + + width:100%; + height:200px; + +} + +.tela-content span{ + + font-size:30px; +} + +.content{ + + width:100%; + height:auto; +} + +.input-items .input-group .btn-big{ + + width:50px; + height:60px; + font-size:11px; + +} + + + +.input-items .input-group-2 .btn-medium{ + + + width:80px; + height:60px; + font-size:17px; + margin-left:20px; +} + +.btn-medium-numbers{ + + width:22px; + height:35px; + font-size:16px; + +} + +.btn-medium-numbers span{ + + + width:22px; + font-size:8px; + + +} + + + +.input-items .input-group-2 .btn-medium-output{ + + width:40px; + height:50px; + font-size:20px; + + + } + + + +} \ No newline at end of file diff --git a/2019-setembro/GabrielVais/assets/js/app.js b/2019-setembro/GabrielVais/assets/js/app.js new file mode 100644 index 0000000..2b77efc --- /dev/null +++ b/2019-setembro/GabrielVais/assets/js/app.js @@ -0,0 +1,217 @@ +const btnLigar = document.querySelector("#btnLigar"); + +const btnDesligar = document.querySelector("#btnDesligar"); + +const btnLimpar = document.querySelector("#btnLimpar"); + +const display = document.querySelector(".tela-content"); + +const output = document.querySelector("#output"); + +const players = []; + + +btnLigar.addEventListener('click', function(){ + +if(display.classList.contains("desligado") || display.classList.contains("animation")){ + + display.classList.remove("desligado"); + + display.classList.remove("animation"); + + display.classList.add("ligado"); + + getAudio("./assets/sounds/button-3.mp3"); + + + } + + +}); + +btnPause = document.querySelector("#btnPause"); + +btnPause.addEventListener('click', function(){ + + + +}); + + + +btnDesligar.addEventListener('click', function(){ + + if(display.classList.contains("ligado")){ + + display.classList.remove("ligado"); + + getAudio("./assets/sounds/button-2.mp3"); + + display.classList.add("animation"); + + + + + } + +}); + +var buttons = document.querySelectorAll('.button'); + +var action = null; +var current = 0; + +var actions = { + '/': ' / ', + 'x': ' * ', + '-': ' - ', + '+': ' + ', + '=': '=', +}; + +for (button in buttons) { + buttons[button].onclick = function (e) { + + if(display.classList.contains("ligado")){ + + var input = e.target.innerText; + var num = parseInt(input); + + if (isNaN(num)) { + if (input == 'Limpar') { + console.log('clear'); + action = null; + current = 0; + output.innerText = 0; + + getAudio("./assets/sounds/button-38.mp3"); + + + }else if(input.length >= 2){ + + e.preventDefault(); + console.log("clique em um numero caso queira usar a calculadora"); + + }else{ + if (action && action !== '=') { + + var calculation = current + actions[action] + parseInt(output.innerText); + + if(isNaN(calculation)){ + + output.innerText = 0; + + } + console.log('calculate', calculation); + output.innerText = eval(calculation).toFixed(0); + } + + getAudio("./assets/sounds/beep-23.mp3"); + + current = parseInt(output.innerText); + action = input; + } + } else { + + getAudio("./assets/sounds/click.mp3"); + + if (current === parseInt(output.innerText)) { + output.innerText = num; + } else { + output.innerText += num; + } + } + console.log({ + action: action, + current: current, + input: input, + }); + }; +} + +} + + function PlaySound(melody) { + alert("On Press of "+melody); + var path = "path\\to\\melody\\" + var snd = new Audio(path + melody + ".wav"); + snd.play(); +} +btnsAll = document.querySelectorAll(".btn-medium-numbers"); + +var audio = ''; + +var pause = false; + +btnsAll.forEach(btn =>{ + + btn.addEventListener('click', function(e){ + + let input = e.target.innerText; + + if(display.classList.contains("ligado")){ + + switch(input) { + + case 'Pausa': + + if(pause){ + + pause = false; + + }else{ + + pause = true; + } + + break; + case 'DÓ': + getAudio("./assets/sounds/do.wav"); + break; + case 'RÉ': + getAudio("./assets/sounds/re.wav"); + break; + case 'MI': + getAudio("./assets/sounds/mi.wav"); + break; + case 'FÁ': + getAudio("./assets/sounds/fa.wav"); + break; + case 'FÁ': + getAudio("./assets/sounds/sol.wav"); + break; + case 'SOL': + getAudio("./assets/sounds/la.wav"); + break; + case 'LÁ': + getAudio("./assets/sounds/si.wav"); + break; + case 'SI': + getAudio("./assets/sounds/do-stretched.wav"); + break; + case 'DÒ': + getAudio("./assets/sounds/re-stretched.wav"); + break; + case 'RÈ': + getAudio("./assets/sounds/do.wav"); + break; + default:console.log('Botao invalido'); + } + + } + + }); + +}); + + +function getAudio(src){ + + if(pause === false){ + + audio = new Audio(src); + + audio.play(); + + } +} diff --git a/2019-setembro/GabrielVais/assets/plugins b/2019-setembro/GabrielVais/assets/plugins new file mode 100644 index 0000000..e69de29 diff --git a/2019-setembro/GabrielVais/assets/sounds/beep-23.mp3 b/2019-setembro/GabrielVais/assets/sounds/beep-23.mp3 new file mode 100644 index 0000000..4b1139c Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/beep-23.mp3 differ diff --git a/2019-setembro/GabrielVais/assets/sounds/button-2.mp3 b/2019-setembro/GabrielVais/assets/sounds/button-2.mp3 new file mode 100644 index 0000000..a539f57 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/button-2.mp3 differ diff --git a/2019-setembro/GabrielVais/assets/sounds/button-3.mp3 b/2019-setembro/GabrielVais/assets/sounds/button-3.mp3 new file mode 100644 index 0000000..075ad08 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/button-3.mp3 differ diff --git a/2019-setembro/GabrielVais/assets/sounds/button-38.mp3 b/2019-setembro/GabrielVais/assets/sounds/button-38.mp3 new file mode 100644 index 0000000..13d461e Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/button-38.mp3 differ diff --git a/2019-setembro/GabrielVais/assets/sounds/click.mp3 b/2019-setembro/GabrielVais/assets/sounds/click.mp3 new file mode 100644 index 0000000..c68ef0b Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/click.mp3 differ diff --git a/2019-setembro/GabrielVais/assets/sounds/do-octave.wav b/2019-setembro/GabrielVais/assets/sounds/do-octave.wav new file mode 100644 index 0000000..2bf7c41 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/do-octave.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/do-stretched-octave.wav b/2019-setembro/GabrielVais/assets/sounds/do-stretched-octave.wav new file mode 100644 index 0000000..f8be59b Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/do-stretched-octave.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/do-stretched.wav b/2019-setembro/GabrielVais/assets/sounds/do-stretched.wav new file mode 100644 index 0000000..5c2b512 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/do-stretched.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/do.wav b/2019-setembro/GabrielVais/assets/sounds/do.wav new file mode 100644 index 0000000..921575a Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/do.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/fa-stretched.wav b/2019-setembro/GabrielVais/assets/sounds/fa-stretched.wav new file mode 100644 index 0000000..5637dc8 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/fa-stretched.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/fa.wav b/2019-setembro/GabrielVais/assets/sounds/fa.wav new file mode 100644 index 0000000..731da28 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/fa.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/la-stretched.wav b/2019-setembro/GabrielVais/assets/sounds/la-stretched.wav new file mode 100644 index 0000000..03c3a45 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/la-stretched.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/la.wav b/2019-setembro/GabrielVais/assets/sounds/la.wav new file mode 100644 index 0000000..cd55d11 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/la.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/mi-stretched.wav b/2019-setembro/GabrielVais/assets/sounds/mi-stretched.wav new file mode 100644 index 0000000..419041e Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/mi-stretched.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/mi.wav b/2019-setembro/GabrielVais/assets/sounds/mi.wav new file mode 100644 index 0000000..8fa7208 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/mi.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/re-stretched.wav b/2019-setembro/GabrielVais/assets/sounds/re-stretched.wav new file mode 100644 index 0000000..2df6e5e Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/re-stretched.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/re.wav b/2019-setembro/GabrielVais/assets/sounds/re.wav new file mode 100644 index 0000000..b73d922 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/re.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/si-stretched.wav b/2019-setembro/GabrielVais/assets/sounds/si-stretched.wav new file mode 100644 index 0000000..3920d8f Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/si-stretched.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/si.wav b/2019-setembro/GabrielVais/assets/sounds/si.wav new file mode 100644 index 0000000..cd0d5de Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/si.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/sol-stretched.wav b/2019-setembro/GabrielVais/assets/sounds/sol-stretched.wav new file mode 100644 index 0000000..d953def Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/sol-stretched.wav differ diff --git a/2019-setembro/GabrielVais/assets/sounds/sol.wav b/2019-setembro/GabrielVais/assets/sounds/sol.wav new file mode 100644 index 0000000..6747524 Binary files /dev/null and b/2019-setembro/GabrielVais/assets/sounds/sol.wav differ diff --git a/2019-setembro/GabrielVais/index.html b/2019-setembro/GabrielVais/index.html new file mode 100644 index 0000000..95aad62 --- /dev/null +++ b/2019-setembro/GabrielVais/index.html @@ -0,0 +1,107 @@ + + +
+ + + + + +