Merge branch 'master' of https://github.com/swapnilsparsh/30DaysOfJav… · k1499/30DaysOfJavaScript@34e8c6e · GitHub
Skip to content

Commit 34e8c6e

Browse files
ShivangiRai1310ShivangiRai1310
committed
2 parents f858c50 + bdf984b commit 34e8c6e

17 files changed

Lines changed: 268 additions & 53 deletions

File tree

‎01 - Drum Kit/index.html‎

Lines changed: 1 addition & 1 deletion

‎01 - Drum Kit/main.js‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,44 @@
1+
const keys = Array.from(document.querySelectorAll('.key'));
2+
3+
const keyCode = {
4+
A: 65,
5+
S: 83,
6+
D: 68,
7+
F: 70,
8+
G: 71,
9+
H: 72,
10+
J: 74,
11+
K: 75,
12+
L: 76,
13+
};
14+
115
function removeTransition(e) {
216
if (e.propertyName !== 'transform') return;
317
e.target.classList.remove('playing');
4-
}
18+
}
19+
20+
function playSound(e) {
21+
const audio = document.querySelector(
22+
`audio[data-key="${e.keyCode || keyCode[e.target.innerHTML]}"]`
23+
);
24+
25+
const key = document.querySelector(
26+
`div[data-key="${e.keyCode || keyCode[e.target.innerHTML]}"]`
27+
);
528

6-
function playSound(e) {
7-
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
8-
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
929
if (!audio) return;
1030

1131
key.classList.add('playing');
1232
audio.currentTime = 0;
1333
audio.play();
14-
}
34+
}
35+
36+
keys.forEach((key) => key.addEventListener('transitionend', removeTransition));
37+
38+
window.addEventListener('keydown', playSound);
1539

16-
const keys = Array.from(document.querySelectorAll('.key'));
17-
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
18-
window.addEventListener('keydown', playSound);
40+
keys.forEach((key) =>
41+
key.addEventListener('click', (e) => {
42+
playSound(e);
43+
})
44+
);

‎01 - Drum Kit/style.css‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,74 +2,76 @@ html {
22
font-size: 10px;
33
background-color: #19172e;
44
overflow: hidden;
5-
}
6-
7-
body,html {
5+
}
6+
7+
body,
8+
html {
89
margin: 0;
910
padding: 0;
10-
font-family: "sans";
11-
}
11+
font-family: 'sans';
12+
}
1213

13-
@font-face {
14-
src: url("font/sans.ttf");
15-
font-family: "sans";
16-
}
17-
18-
h3{
14+
@font-face {
15+
src: url('font/sans.ttf');
16+
font-family: 'sans';
17+
}
18+
19+
h3 {
1920
font-size: 3rem;
2021
text-align: center;
2122
color: white;
22-
}
23+
}
2324

24-
h4{
25-
font-size: 2rem;
26-
text-align: center;
27-
top: 0;
28-
padding-top: 5px;
29-
color: #fff;
30-
}
25+
h4 {
26+
font-size: 2rem;
27+
text-align: center;
28+
top: 0;
29+
padding-top: 5px;
30+
color: #fff;
31+
}
3132

32-
.keys {
33+
.keys {
3334
display: flex;
3435
flex: 1;
3536
min-height: 80vh;
3637
align-items: center;
3738
justify-content: center;
38-
}
39-
40-
.key {
41-
border: .4rem solid white;
42-
border-radius: .5rem;
39+
}
40+
41+
.key {
42+
border: 0.4rem solid white;
43+
border-radius: 0.5rem;
4344
margin: 1rem;
4445
font-size: 1.5rem;
45-
padding: 1rem .5rem;
46-
transition: all .07s ease;
46+
padding: 1rem 0.5rem;
47+
transition: all 0.07s ease;
4748
width: 10rem;
4849
text-align: center;
4950
color: white;
5051
background-color: #212121;
51-
}
52-
53-
.playing {
52+
}
53+
54+
.playing {
5455
transform: scale(1.1);
5556
border-color: #bb86fc;
5657
box-shadow: 0 0 2rem #bb86fc;
57-
}
58-
59-
kbd {
58+
}
59+
60+
kbd {
6061
display: block;
6162
font-size: 4rem;
62-
}
63-
64-
.sound {
63+
cursor: pointer;
64+
}
65+
66+
.sound {
6567
font-size: 1.2rem;
6668
font-weight: 700;
6769
text-transform: uppercase;
68-
letter-spacing: .1rem;
70+
letter-spacing: 0.1rem;
6971
color: #bb86fc;
70-
}
72+
}
7173

72-
footer {
74+
footer {
7375
text-align: center;
7476
color: white;
7577
font-size: 1.5rem;
@@ -79,8 +81,8 @@ html {
7981
bottom: 0;
8082
margin-bottom: 0;
8183
padding: 5px;
82-
}
84+
}
8385

84-
footer a:visited{
86+
footer a:visited {
8587
color: inherit;
86-
}
88+
}

‎30DaysOfJavaScript/assets/35.png‎

-15.8 KB
Loading

‎30DaysOfJavaScript/assets/36.png‎

49 KB
Loading

‎35 - Decimal To Binary/assests/Binary icon.png‎

49 KB
Loading

‎35 - Decimal To Binary/font/sans.ttf‎

54.5 KB
Binary file not shown.

‎35 - Decimal To Binary/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
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+
<link
8+
rel="shortcut icon"
9+
href="assests/Binary icon.png"
10+
type="image/x-icon"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Decimal To Binary</title>
14+
</head>
15+
<body>
16+
<div class="container">
17+
<h2>Decimal To Binary</h2>
18+
<div class="input">
19+
<h4>Decimal</h4>
20+
<input type="number" id="input_number" />
21+
</div>
22+
<button id="Binary_convert" onclick="calculate()">Convert</button>
23+
<div class="input">
24+
<h4>Binary</h4>
25+
<input type="number" id="output_number" />
26+
</div>
27+
</div>
28+
<footer>
29+
<p>
30+
&#x3c; &#47; &#x3e; with ❤️ by
31+
<a href="https://swapnilsparsh.github.io/">Swapnil Srivastava</a>
32+
<br />
33+
<a
34+
href="https://github.com/swapnilsparsh/30DaysOfJavaScript"
35+
target="_blank"
36+
>#30DaysOfJavaScript</a
37+
>
38+
</p>
39+
</footer>
40+
41+
<script src="script.js"></script>
42+
</body>
43+
</html>

‎35 - Decimal To Binary/script.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
let input = document.getElementById('input_number');
2+
let output = document.getElementById('output_number');
3+
4+
5+
function calculate(){
6+
let number = input.value;
7+
if(isNaN(number) || number==""){
8+
alert("given value is not a number");
9+
output.value = "";
10+
}
11+
if(number==0){
12+
output.value = 0;
13+
}
14+
else{
15+
let response = "";
16+
while(number>0){
17+
response=number%2 + response;
18+
number=Math.floor(number/2);
19+
}
20+
output.value = response;
21+
}
22+
23+
}

‎35 - Decimal To Binary/style.css‎

Lines changed: 114 additions & 0 deletions

0 commit comments

Comments
 (0)