Skip to content

Commit df851d3

Browse files
fullstackNRJfullstackNRJ
committed
day 6
1 parent 6fe64bf commit df851d3

File tree

15 files changed

+199
-0
lines changed

15 files changed

+199
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ Motivate yourself to code daily till 60 days, and see the magic!
2222
| [Day 3](./each%20day%20build%20day!/Day%203/) | [css variables](./each%20day%20build%20day!/Day%203/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%203/README.md/) |
2323
| [Day 4](./each%20day%20build%20day!/Day%204/) | [Array Methods](./each%20day%20build%20day!/Day%203/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%204/README.md/) |
2424
| [Day 5](./each%20day%20build%20day!/Day%205/) | [Memory Game](./each%20day%20build%20day!/Day%205/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%205/README.md/) |
25+
| [Day 6](./each%20day%20build%20day!/Day%206/) | [The Broken Piano](./each%20day%20build%20day!/Day%206/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%206/README.md/) |
2526

‎each day build day!/Day 5/style.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ body{
1616
justify-content: space-around;
1717
}
1818

19+
.rules li{
20+
font-size: 1.5em;
21+
}
22+
1923

2024
h3{
2125
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
@@ -40,6 +44,7 @@ h3{
4044
width: 8rem;
4145
padding: .2rem .2rem;
4246
border: .1rem solid;
47+
transition: all .2s;
4348
}
4449

4550
.footer{

‎each day build day!/Day 6/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# The Broken Piano
2+
3+
A bare minimum piano made with just html&css , vanillaJS. The idea is to learn key-bidings that most of JS frameworks and libraries provide us out-the-box. Right now, it has minimum css and few notes but I plan to make it a complete piano soon.
4+
5+
Try it out here :
6+
7+
# Challenges
8+
- data-key bindings
9+
- transistions and `transistioned` event
10+
- The piano layout
11+
- html5 audio
12+

‎each day build day!/Day 6/app.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//const piano = document.querySelector('.piano');
2+
3+
const keys = Array.from(document.querySelectorAll('.key')) //nodelist to array of keys on dom
4+
//add eventlistener on keys to remove transition after they have been pressed
5+
keys.forEach(key => key.addEventListener('transitionend', removeTransition))
6+
7+
window.addEventListener('keydown', playPianoSound);
8+
9+
function playPianoSound(e){
10+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
11+
const key = document.querySelector(`div[data-key="${e.keyCode}"]`)
12+
if (!audio) return;
13+
14+
//apply animation
15+
key.classList.add('playing');
16+
//hack to reset the audio
17+
audio.currentTime = 0;
18+
audio.play()
19+
}
20+
21+
function removeTransition(e){
22+
if (e.propertyName !== 'transform') return;
23+
e.target.classList.remove('playing');
24+
25+
}
26+

‎each day build day!/Day 6/index.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>❓ Broken Piano 🎹 </title>
8+
<link rel="stylesheet" href="style.css">
9+
<script defer src="app.js"></script>
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<h2>JS based piano 🎹 </h2>
15+
16+
<p>A piano built using basic html, css & vanilla JS. Currently, it has only major notes 🎼
17+
18+
plans are to transfer it into fully functional piano.
19+
20+
21+
</p>
22+
23+
<div class="keys">
24+
<div data-key="65" class="key">
25+
<kbd>A</kbd>
26+
<span class="sound">A</span>
27+
</div>
28+
<div data-key="83" class="key">
29+
<kbd>S</kbd>
30+
<span class="sound">B</span>
31+
</div>
32+
<div data-key="68" class="key">
33+
<kbd>D</kbd>
34+
<span class="sound">C</span>
35+
</div>
36+
<div data-key="70" class="key">
37+
<kbd>F</kbd>
38+
<span class="sound">D</span>
39+
</div>
40+
<div data-key="71" class="key">
41+
<kbd>G</kbd>
42+
<span class="sound">E</span>
43+
</div>
44+
<div data-key="72" class="key">
45+
<kbd>H</kbd>
46+
<span class="sound">F</span>
47+
</div>
48+
<div data-key="74" class="key">
49+
<kbd>J</kbd>
50+
<span class="sound">G</span>
51+
</div>
52+
<div data-key="75" class="key">
53+
<kbd>K</kbd>
54+
<span class="sound">A#</span>
55+
</div>
56+
<div data-key="76" class="key">
57+
<kbd>L</kbd>
58+
<span class="sound">B'</span>
59+
</div>
60+
</div>
61+
62+
</div>
63+
64+
<!--Audio files hooked with data-key 1-1 mapping-->
65+
<audio data-key="65" src="sounds/A_.wav"></audio>
66+
<audio data-key="83" src="sounds/B_.wav"></audio>
67+
<audio data-key="68" src="sounds/C_.wav"></audio>
68+
<audio data-key="70" src="sounds/d.wav"></audio>
69+
<audio data-key="71" src="sounds/E_.wav"></audio>
70+
<audio data-key="72" src="sounds/F_.wav"></audio>
71+
<audio data-key="74" src="sounds/G_.wav"></audio>
72+
<audio data-key="75" src="sounds/piano_A0.wav"></audio>
73+
<audio data-key="76" src="sounds/piano1.wav"></audio>
74+
75+
</body>
76+
77+
</html>

‎each day build day!/Day 6/sounds/A_.wav

265 KB
Binary file not shown.

‎each day build day!/Day 6/sounds/B_.wav

265 KB
Binary file not shown.

‎each day build day!/Day 6/sounds/C_.wav

100 KB
Binary file not shown.

‎each day build day!/Day 6/sounds/E_.wav

265 KB
Binary file not shown.

‎each day build day!/Day 6/sounds/F_.wav

265 KB
Binary file not shown.

‎each day build day!/Day 6/sounds/G_.wav

268 KB
Binary file not shown.

‎each day build day!/Day 6/sounds/d.wav

97 KB
Binary file not shown.

‎each day build day!/Day 6/sounds/piano1.wav

15.5 KB
Binary file not shown.

‎each day build day!/Day 6/sounds/piano_A0.wav

23.8 KB
Binary file not shown.

‎each day build day!/Day 6/style.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
html {
2+
font-size: 62.5%;
3+
background: linear-gradient(360deg, rgba(2,0,36,1) 5%, rgba(15,15,82,1) 43%, rgba(2,212,255,1) 89%);
4+
background-size: cover;
5+
}
6+
7+
body,html {
8+
margin: 0;
9+
padding: 0;
10+
font-family: sans-serif;
11+
}
12+
13+
.container{
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
justify-content: center;
18+
height: 80rem;
19+
fill-opacity: .5;
20+
}
21+
22+
h2{
23+
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
24+
font-size: 5rem;
25+
}
26+
p{
27+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
28+
font-size: 2rem;
29+
text-align: center;
30+
margin: 1rem;
31+
}
32+
33+
.keys {
34+
margin-top: -10rem;
35+
display: flex;
36+
flex: 1;
37+
align-items: center;
38+
justify-content: center;
39+
40+
}
41+
42+
.key {
43+
44+
border: .4rem solid rgb(233, 226, 226);
45+
border-radius: .5rem;
46+
margin: 1rem;
47+
font-size: 1.5rem;
48+
padding: 1rem .5rem;
49+
transition: all .07s ease;
50+
width: 4rem;
51+
height:10rem;
52+
text-align: center;
53+
color: rgb(73, 71, 71);
54+
background: rgb(255, 255, 255);
55+
text-shadow: 0 0 .5rem rgb(199, 197, 197);
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: space-around;
59+
}
60+
61+
.playing {
62+
transform: scale(.8);
63+
border-color: #3390bb;
64+
box-shadow: 0 0 1rem #4eafdb;
65+
}
66+
67+
kbd {
68+
display: block;
69+
font-size: 4rem;
70+
}
71+
72+
.sound {
73+
font-size: 1.6rem;
74+
text-transform: uppercase;
75+
letter-spacing: .1rem;
76+
color: #4ad6e9;
77+
}
78+

0 commit comments

Comments
 (0)