Skip to content

Commit 6a2f4c6

Browse files
khushi-purwarkhushi-purwar
authored
Merge branch 'main' into dev-khushiP
2 parents 5fca730 + b14dd29 commit 6a2f4c6

File tree

12 files changed

+170
-2
lines changed

12 files changed

+170
-2
lines changed

‎Index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,11 @@
110110
| [Architecture Website Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Architecture-Website) |It is a simple and responsive Architecture Website template.
111111
| [BMI Calculator (JS)](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/BMI%20Calculator%20(JS)) |Calculates the Body Mass Index of a person, provided with a BMI chart.
112112
| [React Movie Finder Application](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/react-movie-app) |A single page web application that allows users to search movies based on their query.
113-
| [Maths Quiz Game](https://github.com/nisha331/Web-dev-mini-projects/tree/main/Maths%20quiz%20game) | A maths quiz game for kids to practice addition.
113+
| [Maths Quiz Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Maths%20quiz%20game) | A maths quiz game for kids to practice addition.
114114
| [Personal Blog Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Personal-blog) |A simple and responsive personal blog template.
115115
| [Architecture Website Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Architecture-Website) |A simple and responsive Architecture Website template.
116116
| [Art Gallery Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Art-Gallery) |It is a simple and resonsive Art Gallery Website where you can add multiple pictures and navigate through them.
117117
| [Food Website Template](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Food-Web) |It is a simple and resonsive Food Website Website, you can navigate through them.
118118
| [iCoder](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/iCoder) |It is a simple and resonsive website made using bootstrap.
119119
| [Classifiers using JS](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Classifier-Using-JS) | It is a website which contains three different classifiers, built with the help of API
120-
120+
| [Tabla](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/tabla) | It is a webapp that plays tabla beat on clicked on the tabla or clicked d or t.

‎tabla/img/tap1.png

56.5 KB
Loading

‎tabla/img/tap2.png

63 KB
Loading

‎tabla/img/tap3.jpg

17.9 KB
Loading

‎tabla/img/tap4.jpg

18.4 KB
Loading

‎tabla/img/tap5.jpg

14.8 KB
Loading

‎tabla/index.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
* {
2+
padding: 10px;
3+
margin: 10px;
4+
box-sizing: border-box;
5+
}
6+
7+
html{
8+
scroll-behavior: smooth;
9+
}
10+
11+
::-webkit-scrollbar-track {
12+
-webkit-box-shadow: inset 0 0 6px rgba(238, 234, 234, 0.205);
13+
background-color: #1d1c1c;
14+
border-radius: 10px;
15+
}
16+
17+
::-webkit-scrollbar {
18+
width: 10px;
19+
background-color: #1d1c1c;
20+
}
21+
22+
::-webkit-scrollbar-thumb {
23+
border-radius: 10px;
24+
background-color: #fff;
25+
background-image: -webkit-gradient( linear, 40% 0%, 75% 84%, from(#96a9b4), to(#6c6c70), color-stop(0.6,#898b8f ));
26+
}
27+
28+
body {
29+
font-family: 'Space Grotesk', sans-serif;
30+
background-color: black;
31+
}
32+
33+
#title {
34+
margin-top: 5px;
35+
text-align: center;
36+
font-size: 3.5rem;
37+
letter-spacing: 0.25rem;
38+
font-weight: 900;
39+
color: white;
40+
}
41+
p{
42+
margin-top: 0;
43+
text-align: center;
44+
font-size: 1rem;
45+
color: #67db39
46+
}
47+
48+
.set {
49+
margin-top: 0%;
50+
margin-left: 30%;
51+
}
52+
53+
.t {
54+
background-image: url("img/tap1.png");
55+
}
56+
57+
.d {
58+
background-image: url("img/tap2.png");
59+
}
60+
61+
.u {
62+
background-image: url("img/tap3.jpg");
63+
}
64+
65+
.w {
66+
background-image: url("img/tap4.jpg");
67+
}
68+
69+
.y {
70+
background-image: url("img/tap5.jpg");
71+
}
72+
73+
.tabla {
74+
display: inline-block;
75+
width: 270px;
76+
height: 250px;
77+
align-self: center;
78+
box-shadow: none;
79+
background-color: black;
80+
background-repeat: no-repeat;
81+
border: black;
82+
}
83+
84+
button {
85+
border: none;
86+
border-radius: 20px;
87+
cursor: pointer;
88+
}

‎tabla/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Tabla</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
11+
<body>
12+
<h1 id="title"> TABLA </h1>
13+
<p>Click on any images to listen tabla beats</p>
14+
15+
<div class="set">
16+
<button class="t tabla">t</button>
17+
<button class="d tabla">d</button>
18+
</div>
19+
<script src="index.js"></script>
20+
</body>
21+
22+
</html>

‎tabla/index.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
document.querySelector(".t").addEventListener("click",function (){
3+
var audio=new Audio("sound/t.mp3");
4+
audio.play();
5+
})
6+
document.querySelector(".d").addEventListener("click",function (){
7+
var audio=new Audio("sound/d.mp3");
8+
audio.play();
9+
})
10+
11+
var audioa = new Audio("sound/t.mp3");
12+
var audiob = new Audio("sound/d.mp3");
13+
14+
window.addEventListener("keydown", checkKeyPress, false);
15+
16+
function checkKeyPress(key) {
17+
if (key.keyCode == "84") {
18+
audioa.play();
19+
}
20+
if(key.keyCode == "68"){
21+
audiob.play();
22+
}
23+
}

‎tabla/readme.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Lets play some tabla beats 🖐
2+
It is a webapp that plays tabla beats when clicked on tabla or pressed d or t.
3+
4+
## 💻Tech Stack
5+
<br>
6+
7+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
8+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
9+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
10+
11+
<br>
12+
13+
### How to get the wbapp on your local machine:
14+
15+
---
16+
17+
- Download or clone the repository
18+
19+
```
20+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
21+
```
22+
23+
- Go to the directory
24+
- Run the index.html file
25+
- Click on the tabla or press t or d and enjoy the beats.
26+
27+
<br>
28+
29+
### How to use
30+
- Click on the tabla or press t or d and enjoy the beats.
31+
32+
![1](https://user-images.githubusercontent.com/76838660/126932374-dc59481e-c9ba-4725-bac1-ada84550ce22.PNG)
33+
34+
35+
## Happy Coding!

0 commit comments

Comments
 (0)