Merge pull request #10 from codingkatty/wonkysound

Wonky Sound

index.html

@@ -32,12 +32,11 @@ <h1 id="chaos-header">ChaosWeb - The Disorderly UI Experiment</h1>
         }
     </style>
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const header = document.getElementById('chaos-header');
-            const words = header.textContent.split(' ');
-            header.innerHTML = words.map(word => `<span>${word}</span>`).join(' ');
-        });
-    </script>
+    <a href="#">Tester link</a>
+    <button>Tester button</button>
+    <input placeholder="test">
+
+    <script src="js/script.js"></script>
+    <script src="js/sound.js"></script>
 </body>
-</html>
+</html>

js/script.js

@@ -0,0 +1,5 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const header = document.getElementById('chaos-header');
+  const words = header.textContent.split(' ');
+  header.innerHTML = words.map(word => `<span>${word}</span>`).join(' ');
+});

js/sound.js

@@ -0,0 +1,21 @@
+const sound = document.createElement('audio');
+sound.style.display = 'none';
+document.body.appendChild(sound);
+
+let arrayofnoises = ["sfx/bird.mp3", "sfx/buffalo.mp3", "sfx/cat1.mp3", "sfx/cat2.mp3", "sfx/elephant1.mp3", "sfx/elephant2.mp3", "sfx/penguin.mp3", "sfx/rooster.mp3", "sfx/tiger.mp3"];
+
+function wonkySound() {
+  let random = Math.floor(Math.random() * arrayofnoises.length);
+  sound.src = arrayofnoises[random];
+
+  sound.currentTime = 0;
+  sound.play();
+}
+
+const links = document.querySelectorAll('a');
+links.forEach(a => a.addEventListener('click', wonkySound));
+
+const buttons = document.querySelectorAll('button');
+buttons.forEach(button => button.addEventListener('click', wonkySound));
+
+document.addEventListener('keyup', wonkySound);

sfx/source.md

@@ -0,0 +1 @@
+[website I got audio from](https://pixabay.com/sound-effects/search/animals/?duration=0-30)