Skip to content

Commit 933adb1

Browse files
Fyre-FlyeFyre-Flye
authored
Add files via upload
1 parent 9d882fc commit 933adb1

File tree

14 files changed

+246
-0
lines changed

14 files changed

+246
-0
lines changed

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/css/estilos.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
:root {
2+
--cinza: #aaa;
3+
--vermelha: #e93d50;
4+
--vermelha-escura: #af303f;
5+
--branca: #fff;
6+
--luz: rgb(229, 255, 0);
7+
}
8+
9+
body {
10+
align-items: center;
11+
background: linear-gradient(45deg, #a7cfdf 0%,#23538a 100%);
12+
display: flex;
13+
justify-content: center;
14+
flex-direction: column;
15+
font-family: 'Montserrat', sans-serif;
16+
min-height: 100vh;
17+
}
18+
19+
h1 {
20+
color: var(--branca);
21+
margin-bottom: 20px;
22+
font-size: 2rem;
23+
}
24+
25+
.teclado {
26+
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
27+
box-shadow: 6px 8px 0 6px #666, 10px 10px 10px #000;
28+
border-radius: 30px;
29+
display: grid;
30+
gap: 10px;
31+
grid-template-columns: repeat(3, 1fr);
32+
padding: 10px;
33+
}
34+
35+
.tecla {
36+
background-color: var(--branca);
37+
border-radius: 30px;
38+
box-shadow: 3px 3px 0 var(--cinza);
39+
color: var(--vermelha);
40+
cursor: pointer;
41+
height: 120px;
42+
font-size: 1.75em;
43+
font-weight: bold;
44+
line-height: 120px;
45+
text-align: center;
46+
width: 120px;
47+
}
48+
49+
.tecla.ativa,
50+
.tecla:active {
51+
background-color: var(--vermelha);
52+
border: 4px solid var(--vermelha);
53+
box-shadow: 3px 3px 0 var(--vermelha-escura) inset;
54+
color: var(--branca);
55+
outline: none;
56+
}
57+
58+
.tecla.focus,
59+
.tecla:focus {
60+
outline: none;
61+
box-shadow: 1px 1px 10px var(--luz);
62+
}
63+
64+
.tecla.ativa:focus,
65+
.tecla:active:focus {
66+
box-shadow: 3px 3px 0 var(--vermelha-escura) inset, 1px 1px 10px var(--luz);
67+
}

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/css/reset.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html, body, div, span, applet, object, iframe,
6+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7+
a, abbr, acronym, address, big, cite, code,
8+
del, dfn, em, img, ins, kbd, q, s, samp,
9+
small, strike, strong, sub, sup, tt, var,
10+
b, u, i, center,
11+
dl, dt, dd, ol, ul, li,
12+
fieldset, form, label, legend,
13+
table, caption, tbody, tfoot, thead, tr, th, td,
14+
article, aside, canvas, details, embed,
15+
figure, figcaption, footer, header, hgroup,
16+
menu, nav, output, ruby, section, summary,
17+
time, mark, audio, video {
18+
margin: 0;
19+
padding: 0;
20+
border: 0;
21+
font-size: 100%;
22+
font: inherit;
23+
vertical-align: baseline;
24+
}
25+
26+
article, aside, details, figcaption, figure,
27+
footer, header, hgroup, menu, nav, section {
28+
display: block;
29+
}
30+
body {
31+
line-height: 1;
32+
}
33+
ol, ul {
34+
list-style: none;
35+
}
36+
blockquote, q {
37+
quotes: none;
38+
}
39+
blockquote:before, blockquote:after,
40+
q:before, q:after {
41+
content: '';
42+
content: none;
43+
}
44+
table {
45+
border-collapse: collapse;
46+
border-spacing: 0;
47+
}
48+
49+
a {
50+
color: inherit;
51+
text-decoration: none;
52+
}
53+
54+
img {
55+
width: inherit;
56+
}
57+
58+
button {
59+
font-family: inherit;
60+
font-size: inherit;
61+
color: inherit;
62+
font-weight: inherit;
63+
padding: 0;
64+
border: none;
65+
background-color: unset;
66+
}
67+
68+
input {
69+
border: none;
70+
color: inherit;
71+
font-size: inherit;
72+
font-weight: inherit;
73+
font-family: inherit;
74+
}
75+
76+
textarea {
77+
border: none;
78+
color: inherit;
79+
font-size: inherit;
80+
font-weight: inherit;
81+
font-family: inherit;
82+
}
83+
84+
select {
85+
border: none;
86+
color: inherit;
87+
font-size: inherit;
88+
font-weight: inherit;
89+
font-family: inherit;
90+
}

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/images/bateria.png‎

49 KB
Loading

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<title>Alura MIDI</title>
9+
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap" rel="stylesheet">
13+
14+
<link rel="icon" type="image/png" href="images/bateria.png">
15+
<link rel="stylesheet" href="css/reset.css">
16+
<link rel="stylesheet" href="css/estilos.css">
17+
18+
</head>
19+
<body>
20+
21+
<h1>Alura Midi</h1>
22+
23+
<section class="teclado">
24+
<button class="tecla tecla_pom">Pom</button>
25+
<button class="tecla tecla_clap">Clap</button>
26+
<button class="tecla tecla_tim">Tim</button>
27+
28+
<button class="tecla tecla_puff">Puff</button>
29+
<button class="tecla tecla_splash">Splash</button>
30+
<button class="tecla tecla_toim">Toim</button>
31+
32+
<button class="tecla tecla_psh">Psh</button>
33+
<button class="tecla tecla_tic">Tic</button>
34+
<button class="tecla tecla_tom">Tom</button>
35+
</section>
36+
37+
<audio src="sounds/keyq.wav" id="som_tecla_pom"></audio>
38+
<audio src="sounds/keyw.wav" id="som_tecla_clap"></audio>
39+
<audio src="sounds/keye.wav" id="som_tecla_tim"></audio>
40+
<audio src="sounds/keya.wav" id="som_tecla_puff"></audio>
41+
<audio src="sounds/keys.wav" id="som_tecla_splash"></audio>
42+
<audio src="sounds/keyd.wav" id="som_tecla_toim"></audio>
43+
<audio src="sounds/keyz.wav" id="som_tecla_psh"></audio>
44+
<audio src="sounds/keyx.wav" id="som_tecla_tic"></audio>
45+
<audio src="sounds/keyc.wav" id="som_tecla_tom"></audio>
46+
47+
<script src="main.js"></script>
48+
49+
</body>
50+
</html>

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/main.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
function tocaSom (seletorAudio) {
2+
const elemento = document.querySelector(seletorAudio);
3+
4+
if (elemento && elemento.localName === 'audio') {
5+
elemento.play();
6+
}
7+
else {
8+
//alert('Elemento não encontrado');
9+
console.log('Elemento não encontrado ou seletor inválido');
10+
}
11+
12+
}
13+
14+
const listaDeTeclas = document.querySelectorAll('.tecla');
15+
16+
//para
17+
for (let contador = 0; contador < listaDeTeclas.length; contador++) {
18+
19+
const tecla = listaDeTeclas[contador];
20+
const instrumento = tecla.classList[1];
21+
const idAudio = `#som_${instrumento}`; //template string
22+
23+
tecla.onclick = function () {
24+
tocaSom(idAudio);
25+
}
26+
27+
tecla.onkeydown = function (evento) {
28+
29+
if (evento.code === 'Space' || evento.code === 'Enter') {
30+
tecla.classList.add('ativa');
31+
}
32+
33+
}
34+
35+
tecla.onkeyup = function () {
36+
tecla.classList.remove('ativa');
37+
}
38+
39+
}

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/sounds/keya.wav‎

15.2 KB
Binary file not shown.

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/sounds/keyc.wav‎

105 KB
Binary file not shown.

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/sounds/keyd.wav‎

429 KB
Binary file not shown.

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/sounds/keye.wav‎

50.9 KB
Binary file not shown.

‎JavaScript_Para_Web/aluramidi-curso-aula5/aluramidi-curso-aula5/sounds/keyq.wav‎

130 KB
Binary file not shown.

0 commit comments

Comments
 (0)