diff --git a/happiness.html b/happiness.html
new file mode 100644
index 0000000..e86a632
--- /dev/null
+++ b/happiness.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title><strong>Woofs of Happiness!</strong></title>
+</head>
+
+<body>
+    <h1 style="text-align:center">Woofs of Happiness!</h1>
+      <div id="woofs">
+        <h2 onclick="play()" , style="text-align:center"><button>Click me for a good time!</button></h2>
+        <div>
+            <div id="dogImage1"></div>
+            <div id="dogImage2"></div>
+            <div id="dogImage3"></div>
+        </div>
+      </div>
+      <script src="woofs.js"></script>
+</body>
+</html>
diff --git a/media/sound1.mp3 b/media/sound1.mp3
new file mode 100644
index 0000000..9bbe182
Binary files /dev/null and b/media/sound1.mp3 differ
diff --git a/woofs.js b/woofs.js
new file mode 100644
index 0000000..27b95a7
--- /dev/null
+++ b/woofs.js
@@ -0,0 +1,25 @@
+const dogLink = 'https://dog.ceo/api/breeds/image/random/3';
+
+let button = document.querySelector('button');
+
+const image = document.getElementById('dogImage1')
+const image1 = document.getElementById('dogImage2')
+const image2 = document.getElementById('dogImage3')
+
+const docs = document.querySelector('#woofs');
+
+button.addEventListener('click', sendAJAX);
+
+function play(){
+    var audio = new Audio('media/sound1.mp3');
+    audio.play();
+}
+
+function sendAJAX() {
+    fetch(dogLink).then(res => res.json()).then(({message})=>{
+      image.innerHTML = `<img src=${message[0]}>`;
+      image1.innerHTML = `<img src=${message[1]}>`;
+      image2.innerHTML = `<img src=${message[2]}>`;
+  }
+ )
+};
