Merge pull request #81 from sujal-98/sujal2

Added Sound effects #61

index.html

@@ -60,18 +60,22 @@ <h1>Random Disco Light Simulator</h1>
         placeholder="Enter time in seconds"
         />
       </div>
-      <div>
+      <div >
         <label for="sound">4. Sound Effect:</label>
         <select
           id="sound"
          value="select"
+
         >
           <option value="none">None</option>
           <option value="disco">disco</option>
           <option value="fairies">fairies</option>
           <option value="funky1">funky1</option>
           <option value="funky2">funky2</option>
-          <option value="upbeatdisco">upbeatdisco</option>
+          <option value="omniscent">omniscent</option>
+          <option value="vintage">vintage</option>
+          <option value="whistle">whistle</option>
+          <option value="snare">Snare</option>
         </select>
       </div>
 				<div class="button">
@@ -108,6 +112,10 @@ <h1>Random Disco Light Simulator</h1>
   <audio id="funky1" src="assets/audios/funkydisco.mp3"></audio>
   <audio id="funky2" src="assets/audios/funkydisco2.mp3"></audio>
   <audio id="upbeatdisco" src="assets/audios/upbeatdisco.mp3"></audio>
+  <audio id="omniscent" src="assets/audios/omniscent.mp3"></audio>
+  <audio id="snare" src="assets/audios/Snare.mp3"></audio>
+  <audio id="vintage" src="assets/audios/vintage.mp3"></audio>
+  <audio id="whistle" src="assets/audios/whistle.mp3"></audio>
 		<div id="message">The timer has ended. The page will reload.</div>
     <button id="fullscreenBtn">Fullscreen</button>
     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

style.css

@@ -108,7 +108,7 @@ strong {
 }
 
 #view,
-#unit, #sound{
+#unit,#sound{
   text-align: center;
   border-radius: 10px;
   background-color: rgba(255, 255, 255, 0.07);
@@ -120,6 +120,7 @@ strong {
   width: auto;
 }
 
+
 select option {
   color: #e5e5e5;
   font-size: 24px;