pulkit-30 · VikasYadav-1 · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021
diff --git a/Drum-kit/Screenshot (289).png b/Drum-kit/Screenshot (289).png
diff --git a/Drum-kit/index.html b/Drum-kit/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Drum Kit</title>
+    <style>
+        *{
+            box-sizing: border-box;
+            padding: 0px;
+            margin: 0px;
+        }
+        .container{
+            position: relative;
+            /* background-image: url(https://tse4.mm.bing.net/th?id=OIP.7yoKmOccPnGiKz8MbgaobwHaEK&pid=Api&P=0&w=310&h=175); */
+            background-image: url(http://2.bp.blogspot.com/-_V1qhFl20WU/Tw8IfViLdAI/AAAAAAAABO8/_-0PZsmmPcQ/s1600/music-backgrounds-1.jpg);
+            background-repeat: no-repeat;
+            height: 100vh;
+            /* width: 100vh; */
+            background-size: cover;
+            opacity: 0.7;
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+        }
+        .key{
+            display: flex;
+            flex-direction: column;
+            /* justify-content: space-between; */
+            border: 3px solid black;
+            border-radius: 8px;
+            padding: 10px;
+            margin: 20px;
+            text-align: center;
+            height: 100px;
+            min-width: 100px;
+            /* background-color: rgb(216, 211, 211); */
+            background-color: transparent;
+            cursor: pointer;
+            transition: all 0.07s;
+        }
+        .key:hover{
+            background-color: rgb(216, 211, 211);
+        }
+        kbd{
+            color: rgb(161, 37, 37);
+            font-size: 32px;
+            font-weight: 800;
+        }
+        .sound{
+            font-size: 24px;
+            padding-top: 5px;
+            text-transform: capitalize;
+        }
+        .playing{
+            transform: scale(1.2);
+            border-color:yellow;
+            box-shadow: 1px 1px 4px 3px lightcyan;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div onclick="givesound(this)" data-key="65" class="key">
+            <kbd> <u>A</u></kbd>
+            <span class="sound">clap</span>
+        </div>
+        <div onclick="givesound(this)" data-key="83" class="key">
+            <kbd><u>S</u></kbd>
+            <span class="sound">hihat</span>
+        </div>
+        <div onclick="givesound(this)" data-key="68" class="key">
+            <kbd><u>D</u></kbd>
+            <span class="sound">kick</span>
+        </div>
+        <div onclick="givesound(this)" data-key="70" class="key">
+            <kbd><u>F</u></kbd>
+            <span class="sound">openhat</span>
+        </div>
+        <div onclick="givesound(this)" data-key="71" class="key">
+            <kbd><u>G</u></kbd>
+            <span class="sound">boom</span>
+        </div>
+        <div onclick="givesound(this)" data-key="72" class="key">
+            <kbd><u>H</u></kbd>
+            <span class="sound">ride</span>
+        </div>
+        <div onclick="givesound(this)" data-key="74" class="key">
+            <kbd><u>J</u></kbd>
+            <span class="sound">snare</span>
+        </div>
+        <div onclick="givesound(this)" data-key="75" class="key">
+            <kbd><u>K</u></kbd>
+            <span class="sound">tom</span>
+        </div>
+        <div onclick="givesound(this)" data-key="76" class="key">
+            <kbd><u>L</u></kbd>
+            <span class="sound">tink</span>
+        </div>
+    </div>
+    <audio data-key="65" src="sounds/clap.wav"></audio>
+    <audio data-key="83" src="sounds/hihat.wav"></audio>
+    <audio data-key="68" src="sounds/kick.wav"></audio>
+    <audio data-key="70" src="sounds/openhat.wav"></audio>
+    <audio data-key="71" src="sounds/boom.wav"></audio>
+    <audio data-key="72" src="sounds/ride.wav"><s</s></audio>
+    <audio data-key="74" src="sounds/snare.wav"></audio>
+    <audio data-key="75" src="sounds/tom.wav"></audio>
+    <audio data-key="76" src="sounds/tink.wav"></audio>
+    <!-- <audio id="65" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/clap.wav"></audio>
+    <audio id="83" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/hihat.wav"></audio>
+    <audio id="68" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/kick.wav"></audio>
+    <audio id="70" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/openhat.wav"></audio>
+    <audio id="67" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav"></audio>
+    <audio id="72" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/ride.wav"></audio>
+    <audio id="74" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/snare.wav"></audio>
+    <audio id="75" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tom.wav"></audio>
+    <audio id="76" src="https://raw.githubusercontent.com/wesbos/JavaScript30/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav"></audio> -->
+
+    <script>
+        window.addEventListener('keydown' , function(e){
+            const curr_key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
+            // console.log(curr_key)
+            const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+            if (!audio) {
+                return;
+            }
+            audio.currentTime=0; //rewind
+            audio.play();
+            curr_key.classList.add('playing');
+        });
+        function givesound(ki){
+            var aud = ki.getAttribute("data-key");
+            const audio = document.querySelector(`audio[data-key="${ki.getAttribute("data-key")}"]`);
+            audio.currentTime=0; //rewind
+            audio.play();
+            const curr_key = document.querySelector(`.key[data-key="${aud}"]`);
+            // console.log(curr_key)
+            curr_key.classList.add('playing');
+        }
+        const keys = document.querySelectorAll('.key');
+        keys.forEach(key => key.addEventListener('transitionend', removetransition));
+
+        function removetransition(e){
+            if (e.propertyName!== 'transform') 
+            return;
+            this.classList.remove('playing');
+        }
+    </script>
+</body>
+</html>
diff --git a/Drum-kit/readme.md b/Drum-kit/readme.md
@@ -0,0 +1,2 @@
+<b> DRUM-KIT </b>
+<img src="Screenshot (289).png" alt="soccer_svg">
diff --git a/search-box/index.html b/search-box/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <title>Search Box</title>
+    <style>
+        body{
+            margin: 0px;
+            padding: 0px;
+            background-color: #e84118;
+        }
+        .search-box{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            height: 40px;
+            border-radius: 40px;
+            background-color: #2f3640;
+            padding: 10px;
+        }
+        .search-btn{
+            color: #e84118;
+            float: right;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #2f3640;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: 0.5s;
+        }
+        .search-txt{
+            border: none;
+            background: none;
+            outline: none;
+            float: left;
+            padding: 0px;
+            color: white;
+            font-size: 16px;
+            transition: 0.5s;
+            line-height: 40px;
+            width: 0px;
+        }
+        .search-box:hover > .search-txt{
+            width: 240px;
+            padding: 0px 6px;
+        }
+        .search-box:hover > .search-btn{
+            background-color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="search-box">
+        <input class="search-txt" type="text" name="" placeholder="Type to Search">
+        <a class="search-btn" href="#" ><i class="fa fa-search"></i></a>
+    </div>
+</body>
+</html>
diff --git a/search-box/initially.png b/search-box/initially.png
diff --git a/search-box/on hover.png b/search-box/on hover.png
diff --git a/search-box/readme.md b/search-box/readme.md
@@ -0,0 +1,3 @@
+<b> search-box animation</b>
+<img src="initially.png" alt="soccer_svg">
+<img src="on hover.png" alt="soccer_svg">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<b> DRUM-KIT </b>
		<img src="Screenshot (289).png" alt="soccer_svg">