├── Geolocalização ├── index.html └── script.js ├── Leaflet ├── index.html └── script.js ├── QRCode_GoogleCharts ├── index.html └── script.js ├── Tirando_Foto_Camera ├── index.html └── script.js ├── projeto_ratinho ├── audios │ ├── grito.mp3 │ ├── jesus.mp3 │ ├── nao-e-o-pai.mp3 │ ├── pare.mp3 │ ├── que-isso-meu-filho.mp3 │ ├── ratinhoo.mp3 │ ├── uepa.mp3 │ ├── vixi-ratinho.mp3 │ └── xaropinho.mp3 ├── imagens │ ├── botao.png │ └── foto_ratinho.png ├── index.html ├── script.js └── style.css ├── projeto_relogio_digital ├── index.html ├── script.js └── style.css ├── projeto_spotify_parte_1 ├── imagens │ ├── piano.jpg │ ├── rock.jpg │ └── samba.jpg ├── index.html ├── musicas │ ├── A Brand New Start - TrackTribe (1).mp3 │ ├── Ella Vater - The Mini Vandals.mp3 │ └── We Ride! - Reed Mathis.mp3 ├── script.js └── style.css ├── projeto_spotify_parte_2 ├── imagens │ ├── piano.jpg │ ├── rock.jpg │ └── samba.jpg ├── index.html ├── musicas │ ├── A Brand New Start - TrackTribe (1).mp3 │ ├── Ella Vater - The Mini Vandals.mp3 │ └── We Ride! - Reed Mathis.mp3 ├── script.js └── style.css └── youtube_download_node └── script.js /Geolocalização/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Geolocalização 8 | 9 | 10 |

Sua localização é:

11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Geolocalização/script.js: -------------------------------------------------------------------------------- 1 | let h2 = document.querySelector('h2'); 2 | 3 | function success(pos){ 4 | console.log(pos.coords.latitude, pos.coords.longitude); 5 | h2.textContent = `Latitude:${pos.coords.latitude}, Longitude:${pos.coords.longitude}`; 6 | } 7 | 8 | function error(err){ 9 | console.log(err); 10 | } 11 | 12 | var watchID = navigator.geolocation.watchPosition(success, error, { 13 | enableHighAccuracy: true, 14 | timeout: 5000 15 | }); 16 | 17 | //navigator.geolocation.clearWatch(watchID); 18 | -------------------------------------------------------------------------------- /Leaflet/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | 11 | 14 | Leaflet 15 | 21 | 22 | 23 |

Sua localização é:

24 |

25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Leaflet/script.js: -------------------------------------------------------------------------------- 1 | 2 | let h2 = document.querySelector('h2'); 3 | var map; 4 | 5 | function success(pos){ 6 | console.log(pos.coords.latitude, pos.coords.longitude); 7 | h2.textContent = `Latitude:${pos.coords.latitude}, Longitude:${pos.coords.longitude}`; 8 | 9 | if (map === undefined) { 10 | map = L.map('mapid').setView([pos.coords.latitude, pos.coords.longitude], 13); 11 | } else { 12 | map.remove(); 13 | map = L.map('mapid').setView([pos.coords.latitude, pos.coords.longitude], 13); 14 | } 15 | 16 | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 17 | attribution: '© OpenStreetMap contributors' 18 | }).addTo(map); 19 | 20 | L.marker([pos.coords.latitude, pos.coords.longitude]).addTo(map) 21 | .bindPopup('Eu estou aqui!') 22 | .openPopup(); 23 | } 24 | 25 | function error(err){ 26 | console.log(err); 27 | } 28 | 29 | var watchID = navigator.geolocation.watchPosition(success, error, { 30 | enableHighAccuracy: true, 31 | timeout: 5000 32 | }); 33 | 34 | //navigator.geolocation.clearWatch(watchID); 35 | 36 | 37 | -------------------------------------------------------------------------------- /QRCode_GoogleCharts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | QRCode 8 | 9 | 10 |

Crie seu QRCode

11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /QRCode_GoogleCharts/script.js: -------------------------------------------------------------------------------- 1 | function GerarQRCode(){ 2 | var inputUsuario = document.querySelector('textarea').value; 3 | var GoogleChartAPI = 'https://chart.googleapis.com/chart?cht=qr&chs=500x500&chld=H&chl='; 4 | var conteudoQRCode = GoogleChartAPI + encodeURIComponent(inputUsuario); 5 | document.querySelector('#QRCodeImage').src = conteudoQRCode; 6 | } 7 | -------------------------------------------------------------------------------- /Tirando_Foto_Camera/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Webcam 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Tirando_Foto_Camera/script.js: -------------------------------------------------------------------------------- 1 | var video = document.querySelector('video'); 2 | 3 | navigator.mediaDevices.getUserMedia({video:true}) 4 | .then(stream => { 5 | video.srcObject = stream; 6 | video.play(); 7 | }) 8 | .catch(error => { 9 | console.log(error); 10 | }) 11 | 12 | document.querySelector('button').addEventListener('click', () => { 13 | var canvas = document.querySelector('canvas'); 14 | canvas.height = video.videoHeight; 15 | canvas.width = video.videoWidth; 16 | var context = canvas.getContext('2d'); 17 | context.drawImage(video, 0, 0); 18 | var link = document.createElement('a'); 19 | link.download = 'foto.png'; 20 | link.href = canvas.toDataURL(); 21 | link.textContent = 'Clique para baixar a imagem'; 22 | document.body.appendChild(link); 23 | }); 24 | -------------------------------------------------------------------------------- /projeto_ratinho/audios/grito.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/grito.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/audios/jesus.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/jesus.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/audios/nao-e-o-pai.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/nao-e-o-pai.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/audios/pare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/pare.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/audios/que-isso-meu-filho.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/que-isso-meu-filho.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/audios/ratinhoo.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/ratinhoo.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/audios/uepa.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/uepa.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/audios/vixi-ratinho.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/vixi-ratinho.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/audios/xaropinho.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/audios/xaropinho.mp3 -------------------------------------------------------------------------------- /projeto_ratinho/imagens/botao.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/imagens/botao.png -------------------------------------------------------------------------------- /projeto_ratinho/imagens/foto_ratinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_ratinho/imagens/foto_ratinho.png -------------------------------------------------------------------------------- /projeto_ratinho/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Projeto ratinho 9 | 10 | 11 |
12 | 13 |
14 |
15 |
16 | 17 |

Legenda

18 |
19 |
20 | 21 |

Legenda

22 |
23 |
24 | 25 |

Legenda

26 |
27 |
28 | 29 |

Legenda

30 |
31 |
32 | 33 |

Legenda

34 |
35 |
36 | 37 |

Legenda

38 |
39 |
40 | 41 |

Legenda

42 |
43 |
44 | 45 |

Legenda

46 |
47 |
48 | 49 |

Legenda

50 |
51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /projeto_ratinho/script.js: -------------------------------------------------------------------------------- 1 | let audios = [ 2 | {caminho:'audios/grito.mp3', legenda:'GRITO'}, 3 | {caminho:'audios/jesus.mp3', legenda:'Jesus'}, 4 | {caminho:'audios/nao-e-o-pai.mp3', legenda:'Ele não é o pai'}, 5 | {caminho:'audios/pare.mp3', legenda:'PARE'}, 6 | {caminho:'audios/que-isso-meu-filho.mp3', legenda:'Que isso meu fio'}, 7 | {caminho:'audios/ratinhoo.mp3', legenda:'RATINHO'}, 8 | {caminho:'audios/uepa.mp3', legenda:'UEPA'}, 9 | {caminho:'audios/vixi-ratinho.mp3', legenda:'VIXI'}, 10 | {caminho:'audios/xaropinho.mp3', legenda:'Xaropinho'}, 11 | ]; 12 | 13 | let botoes = document.querySelectorAll('.botao'); 14 | let legendas = document.querySelectorAll('p'); 15 | 16 | for (let i=0; i < 9; i++){ 17 | legendas[i].textContent = audios[i].legenda; 18 | botoes[i].setAttribute('data-item', i); 19 | } 20 | 21 | let audioTag = document.querySelector('audio'); 22 | 23 | botoes.forEach(botao => { 24 | botao.addEventListener('click', () => { 25 | let som = audios[botao.getAttribute('data-item')]; 26 | audioTag.setAttribute('src', som.caminho); 27 | 28 | audioTag.addEventListener('loadeddata', () => { 29 | audioTag.play(); 30 | }); 31 | }); 32 | }); 33 | 34 | -------------------------------------------------------------------------------- /projeto_ratinho/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #dbb1bd; 5 | } 6 | 7 | .foto-container { 8 | width: 100%; 9 | text-align: center; 10 | } 11 | 12 | .botao { 13 | width: 60px; 14 | height: 60px; 15 | } 16 | 17 | .container { 18 | display: grid; 19 | grid-template-columns: 1fr 1fr 1fr; 20 | max-width: 400px; 21 | margin: 0 auto; 22 | margin-top: 30px; 23 | text-align: center; 24 | } 25 | 26 | p { 27 | margin-top: 0; 28 | } 29 | 30 | .container > div { 31 | cursor: pointer; 32 | } -------------------------------------------------------------------------------- /projeto_relogio_digital/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Projeto relógio 12 | 13 | 14 |
15 |
00:00:00
16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /projeto_relogio_digital/script.js: -------------------------------------------------------------------------------- 1 | function atualizarTempo(){ 2 | var display = document.querySelector('.display'); 3 | 4 | var agora = new Date(); 5 | 6 | var horario = corrigirHorario(agora.getHours()) + ':' + corrigirHorario(agora.getMinutes()) + ':' + corrigirHorario(agora.getSeconds()); 7 | 8 | display.textContent = horario; 9 | } 10 | 11 | function corrigirHorario(numero){ 12 | if (numero < 10) { 13 | numero = '0' + numero; 14 | } 15 | return numero; 16 | } 17 | 18 | atualizarTempo(); 19 | setInterval(atualizarTempo, 1000); 20 | 21 | console.log(horario); -------------------------------------------------------------------------------- /projeto_relogio_digital/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #aaa; 5 | } 6 | 7 | .relogio { 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .display { 16 | background-color: #2C2E43; 17 | width: 300px; 18 | height: 200px; 19 | text-align: center; 20 | line-height: 200px; 21 | border-radius: 10px; 22 | color: #fff; 23 | font-size: 7rem; 24 | border: 10px solid #FFD523; 25 | font-family: 'Qahiri', sans-serif; 26 | } 27 | 28 | footer { 29 | font-size: 2rem; 30 | margin-top: 10px; 31 | color: #333; 32 | font-family: 'Barlow Condensed', sans-serif; 33 | } -------------------------------------------------------------------------------- /projeto_spotify_parte_1/imagens/piano.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_1/imagens/piano.jpg -------------------------------------------------------------------------------- /projeto_spotify_parte_1/imagens/rock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_1/imagens/rock.jpg -------------------------------------------------------------------------------- /projeto_spotify_parte_1/imagens/samba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_1/imagens/samba.jpg -------------------------------------------------------------------------------- /projeto_spotify_parte_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Projeto Player Spotify 13 | 14 | 15 | 16 |
17 |

Nome da música

18 | João Tinti 19 |
20 |
21 |
22 | 23 |
24 |
25 |
26 |

0:00

27 |

3:40

28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /projeto_spotify_parte_1/musicas/A Brand New Start - TrackTribe (1).mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_1/musicas/A Brand New Start - TrackTribe (1).mp3 -------------------------------------------------------------------------------- /projeto_spotify_parte_1/musicas/Ella Vater - The Mini Vandals.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_1/musicas/Ella Vater - The Mini Vandals.mp3 -------------------------------------------------------------------------------- /projeto_spotify_parte_1/musicas/We Ride! - Reed Mathis.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_1/musicas/We Ride! - Reed Mathis.mp3 -------------------------------------------------------------------------------- /projeto_spotify_parte_1/script.js: -------------------------------------------------------------------------------- 1 | let musicas = [ 2 | {titulo:'Guitar solo', artista:'João Tinti', source:'musicas/We Ride! - Reed Mathis.mp3', img:'imagens/rock.jpg'}, 3 | {titulo:'Samba raiz', artista:'Bossa Nova Brasil', source:'musicas/Ella Vater - The Mini Vandals.mp3', img:'imagens/samba.jpg'}, 4 | {titulo:'Música piano', artista:'John Green', source:'musicas/A Brand New Start - TrackTribe (1).mp3', img:'imagens/piano.jpg'} 5 | ]; 6 | 7 | // INICIO 8 | let musica = document.querySelector('audio'); 9 | let musicaIndex = 0; 10 | 11 | let nomeMusica = document.querySelector('.descricao h2'); 12 | let nomeArtista = document.querySelector('.descricao i'); 13 | let imagem = document.querySelector('img'); 14 | let tempoDecorrido = document.querySelector('.tempo .inicio'); 15 | let duracaoMusica = document.querySelector('.tempo .fim'); 16 | 17 | nomeMusica.textContent = musicas[musicaIndex].titulo; 18 | nomeArtista.textContent = musicas[musicaIndex].artista; 19 | imagem.setAttribute('src', musicas[musicaIndex].img); 20 | duracaoMusica.textContent = segundosParaMinutos(Math.floor(musica.duration)); 21 | 22 | // EVENTOS 23 | document.querySelector('.botao-play').addEventListener('click', tocarMusica); 24 | 25 | document.querySelector('.botao-pause').addEventListener('click', pausarMusica); 26 | 27 | musica.addEventListener('timeupdate', atualizarBarra); 28 | 29 | document.querySelector('.anterior').addEventListener('click', () => { 30 | musicaIndex--; 31 | if (musicaIndex < 0){ 32 | musicaIndex = 2; 33 | } 34 | renderizarMusica(musicaIndex); 35 | }); 36 | 37 | document.querySelector('.proximo').addEventListener('click', () => { 38 | musicaIndex++; 39 | if (musicaIndex > 2){ 40 | musicaIndex = 0; 41 | } 42 | renderizarMusica(musicaIndex); 43 | }); 44 | 45 | // FUNÇÕES 46 | 47 | function renderizarMusica(musicaIndex){ 48 | musica.setAttribute('src', musicas[musicaIndex].source); 49 | 50 | musica.addEventListener('loadeddata', () => { 51 | nomeMusica.textContent = musicas[musicaIndex].titulo; 52 | nomeArtista.textContent = musicas[musicaIndex].artista; 53 | imagem.src = musicas[musicaIndex].img; 54 | 55 | duracaoMusica.textContent = segundosParaMinutos(Math.floor(musica.duration)); 56 | }); 57 | 58 | document.body.append(musica); 59 | } 60 | 61 | function tocarMusica(){ 62 | musica.play(); 63 | document.querySelector('.botao-play').style.display = 'none'; 64 | document.querySelector('.botao-pause').style.display = 'block'; 65 | } 66 | 67 | function pausarMusica(){ 68 | musica.pause(); 69 | document.querySelector('.botao-play').style.display = 'block'; 70 | document.querySelector('.botao-pause').style.display = 'none'; 71 | } 72 | 73 | function segundosParaMinutos(segundos){ 74 | let campoMinutos = Math.floor(segundos / 60); 75 | let campoSegundos = segundos % 60; 76 | 77 | if (campoSegundos < 10){ 78 | campoSegundos = '0'+ campoSegundos; 79 | } 80 | return `${campoMinutos}:${campoSegundos}`; 81 | } 82 | 83 | function atualizarBarra(){ 84 | let barra = document.querySelector('progress'); 85 | barra.style.width = Math.floor((musica.currentTime / musica.duration)*100) + '%'; 86 | tempoDecorrido.textContent = segundosParaMinutos(Math.floor(musica.currentTime)); 87 | } -------------------------------------------------------------------------------- /projeto_spotify_parte_1/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | padding: 0; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | height: 100vh; 9 | background-color: #333; 10 | color: #ddd; 11 | font-family: 'Montserrat', sans-serif; 12 | } 13 | 14 | img { 15 | width: 300px; 16 | height: 300px; 17 | } 18 | 19 | .descricao { 20 | width: 300px; 21 | } 22 | 23 | h2 { 24 | margin-bottom: 5px; 25 | } 26 | 27 | .duracao { 28 | width: 300px; 29 | margin-top: 25px; 30 | } 31 | 32 | .barra { 33 | width: 300px; 34 | height: 6px; 35 | border: 1px solid #eee; 36 | border-radius: 5px; 37 | display: flex; 38 | align-items: center; 39 | justify-content: flex-start; 40 | } 41 | 42 | progress { 43 | height: 6px; 44 | width: 0%; 45 | background-color: #333; 46 | } 47 | 48 | .ponto { 49 | width: 20px; 50 | height: 20px; 51 | background-color: #eee; 52 | border-radius: 50%; 53 | margin-left: -10px; 54 | } 55 | 56 | .tempo { 57 | display: flex; 58 | width: 300px; 59 | justify-content: space-between; 60 | } 61 | 62 | .player { 63 | width: 300px; 64 | display: flex; 65 | justify-content: space-around; 66 | align-items: center; 67 | margin-top: 15px; 68 | } 69 | 70 | .botao-play, .botao-pause { 71 | font-size: 50px; 72 | cursor: pointer; 73 | } 74 | 75 | .setas { 76 | font-size: 40px; 77 | cursor: pointer; 78 | } 79 | 80 | .botao-pause { 81 | display: none; 82 | } -------------------------------------------------------------------------------- /projeto_spotify_parte_2/imagens/piano.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_2/imagens/piano.jpg -------------------------------------------------------------------------------- /projeto_spotify_parte_2/imagens/rock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_2/imagens/rock.jpg -------------------------------------------------------------------------------- /projeto_spotify_parte_2/imagens/samba.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_2/imagens/samba.jpg -------------------------------------------------------------------------------- /projeto_spotify_parte_2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Projeto Player Spotify 13 | 14 | 15 | 16 |
17 |

Nome da música

18 | João Tinti 19 |
20 |
21 |
22 | 23 |
24 |
25 |
26 |

0:00

27 |

3:40

28 |
29 |
30 |
31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /projeto_spotify_parte_2/musicas/A Brand New Start - TrackTribe (1).mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_2/musicas/A Brand New Start - TrackTribe (1).mp3 -------------------------------------------------------------------------------- /projeto_spotify_parte_2/musicas/Ella Vater - The Mini Vandals.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_2/musicas/Ella Vater - The Mini Vandals.mp3 -------------------------------------------------------------------------------- /projeto_spotify_parte_2/musicas/We Ride! - Reed Mathis.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaotinti75/Projetos-Javascript/88940d560a6a151f056180b796cea4f69ce11689/projeto_spotify_parte_2/musicas/We Ride! - Reed Mathis.mp3 -------------------------------------------------------------------------------- /projeto_spotify_parte_2/script.js: -------------------------------------------------------------------------------- 1 | let musicas = [ 2 | {titulo:'Guitar solo', artista:'João Tinti', src:'musicas/We Ride! - Reed Mathis.mp3', img:'imagens/rock.jpg'}, 3 | {titulo:'Samba raiz', artista:'Bossa Nova Brasil', src:'musicas/Ella Vater - The Mini Vandals.mp3', img:'imagens/samba.jpg'}, 4 | {titulo:'Música piano', artista:'John Green', src:'musicas/A Brand New Start - TrackTribe (1).mp3', img:'imagens/piano.jpg'} 5 | ]; 6 | 7 | let musica = document.querySelector('audio'); 8 | let indexMusica = 0; 9 | 10 | let duracaoMusica = document.querySelector('.fim'); 11 | let imagem = document.querySelector('img'); 12 | let nomeMusica = document.querySelector('.descricao h2'); 13 | let nomeArtista = document.querySelector('.descricao i'); 14 | 15 | renderizarMusica(indexMusica); 16 | 17 | // Eventos 18 | document.querySelector('.botao-play').addEventListener('click', tocarMusica); 19 | 20 | document.querySelector('.botao-pause').addEventListener('click', pausarMusica); 21 | 22 | musica.addEventListener('timeupdate', atualizarBarra); 23 | 24 | document.querySelector('.anterior').addEventListener('click', () => { 25 | indexMusica--; 26 | if (indexMusica < 0) { 27 | indexMusica = 2; 28 | } 29 | renderizarMusica(indexMusica); 30 | }); 31 | 32 | document.querySelector('.proxima').addEventListener('click', () => { 33 | indexMusica++; 34 | if (indexMusica > 2){ 35 | indexMusica = 0; 36 | } 37 | renderizarMusica(indexMusica); 38 | }); 39 | 40 | // Funções 41 | function renderizarMusica(index){ 42 | musica.setAttribute('src', musicas[index].src); 43 | musica.addEventListener('loadeddata', () => { 44 | nomeMusica.textContent = musicas[index].titulo; 45 | nomeArtista.textContent = musicas[index].artista; 46 | imagem.src = musicas[index].img; 47 | duracaoMusica.textContent = segundosParaMinutos(Math.floor(musica.duration)); 48 | }); 49 | } 50 | 51 | function tocarMusica(){ 52 | musica.play(); 53 | document.querySelector('.botao-pause').style.display = 'block'; 54 | document.querySelector('.botao-play').style.display = 'none'; 55 | } 56 | 57 | function pausarMusica(){ 58 | musica.pause(); 59 | document.querySelector('.botao-pause').style.display = 'none'; 60 | document.querySelector('.botao-play').style.display = 'block'; 61 | } 62 | 63 | function atualizarBarra(){ 64 | let barra = document.querySelector('progress'); 65 | barra.style.width = Math.floor((musica.currentTime / musica.duration) * 100) + '%'; 66 | let tempoDecorrido = document.querySelector('.inicio'); 67 | tempoDecorrido.textContent = segundosParaMinutos(Math.floor(musica.currentTime)); 68 | } 69 | 70 | function segundosParaMinutos(segundos){ 71 | let campoMinutos = Math.floor(segundos / 60); 72 | let campoSegundos = segundos % 60; 73 | if (campoSegundos < 10){ 74 | campoSegundos = '0' + campoSegundos; 75 | } 76 | 77 | return campoMinutos+':'+campoSegundos; 78 | } 79 | 80 | -------------------------------------------------------------------------------- /projeto_spotify_parte_2/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | padding: 0; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | height: 100vh; 9 | background-color: #333; 10 | color: #ddd; 11 | font-family: 'Montserrat', sans-serif; 12 | } 13 | 14 | img { 15 | width: 300px; 16 | height: 300px; 17 | } 18 | 19 | .descricao { 20 | width: 300px; 21 | } 22 | 23 | h2 { 24 | margin-bottom: 5px; 25 | } 26 | 27 | .duracao { 28 | width: 300px; 29 | margin-top: 25px; 30 | } 31 | 32 | .barra { 33 | width: 300px; 34 | height: 6px; 35 | border: 1px solid #eee; 36 | border-radius: 5px; 37 | display: flex; 38 | align-items: center; 39 | justify-content: flex-start; 40 | } 41 | 42 | progress { 43 | height: 6px; 44 | width: 0; 45 | background-color: #333; 46 | } 47 | 48 | .ponto { 49 | width: 20px; 50 | height: 20px; 51 | background-color: #eee; 52 | border-radius: 50%; 53 | margin-left: -10px; 54 | } 55 | 56 | .tempo { 57 | display: flex; 58 | width: 300px; 59 | justify-content: space-between; 60 | } 61 | 62 | .player { 63 | width: 300px; 64 | display: flex; 65 | justify-content: space-around; 66 | align-items: center; 67 | margin-top: 15px; 68 | } 69 | 70 | .botao-play, .botao-pause { 71 | font-size: 50px; 72 | cursor: pointer; 73 | } 74 | 75 | .setas { 76 | font-size: 40px; 77 | cursor: pointer; 78 | } 79 | 80 | .botao-pause { 81 | display: none; 82 | } -------------------------------------------------------------------------------- /youtube_download_node/script.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const ytdl = require('ytdl-core'); 3 | 4 | const videos = [ 5 | 'https://www.youtube.com/watch?v=YxFAR8wY6k0', 6 | 'https://www.youtube.com/watch?v=bf4clABYAQM', 7 | 'https://www.youtube.com/watch?v=Nz14pebHrc0' 8 | ]; 9 | 10 | const pathToSave = '/home/joaotinti75/Documentos/'; 11 | 12 | videos.forEach((video, index) => { 13 | ytdl(video).pipe(fs.createWriteStream(pathToSave + 'video'+index+'.mp4')); 14 | }) 15 | --------------------------------------------------------------------------------