MarkCBJSS · MarkCBJSS · Jun 30, 2020 · Jun 30, 2020 · Jun 30, 2020
diff --git a/GameSounds/index.html b/GameSounds/index.html
@@ -0,0 +1,16 @@
+<html>
+    <head>
+        <title>Play Sounds</title>
+        <link href="style.css" rel="stylesheet" type="text/css">
+    </head>
+
+    <body>
+        <div class="inventory ring">Ring</div>
+        <div class="inventory page">Page</div>
+        <div class="inventory sell">Sell</div>
+
+        <script src="soundPlayer.js"></script>
+
+    </body>
+
+</html>
diff --git a/GameSounds/soundPlayer.js b/GameSounds/soundPlayer.js
@@ -0,0 +1,37 @@
+const inventoryItems = document.querySelectorAll(".inventory");
+console.log(inventoryItems);
+for(let i=0; i<inventoryItems.length; i++) {
+    inventoryItems[i].addEventListener("click", function(){
+        let inventory = this.innerHTML;
+        let lowerInventory = inventory.toLowerCase();
+        makeSound(lowerInventory);
+        addStyle(lowerInventory);
+    })
+}
+
+function addStyle(name) {
+    let activeElement = 
+        document.querySelector("."+name);
+    activeElement.classList.add("active");
+    setTimeout(function(){
+        activeElement.classList.remove("active");
+    },300)
+}
+
+function makeSound(name){
+    console.log(name);
+    switch(name){
+        case "ring":
+            let sound1 = new Audio("sounds/"+name+".wav");
+            sound1.play();
+            break;
+        case "page":
+            let sound2 = new Audio("sounds/"+name+".wav");
+            sound2.play();
+            break;
+        case "sell":
+            let sound3 = new Audio("sounds/"+name+".wav");
+            sound3.play();
+            break;
+    }
+}
diff --git a/GameSounds/sounds/page.wav b/GameSounds/sounds/page.wav
diff --git a/GameSounds/sounds/ring.wav b/GameSounds/sounds/ring.wav
diff --git a/GameSounds/sounds/sell.wav b/GameSounds/sounds/sell.wav
diff --git a/GameSounds/style.css b/GameSounds/style.css
@@ -0,0 +1,15 @@
+body { padding:0; margin:10px; vertical-align:top; background:#ffffff; font-family:Tahoma;}
+
+.inventory {
+    width: 100px;
+    height: 100px;
+    color: black;
+    text-align: center;
+    border: 2px solid black;
+    display: inline-block;
+    margin: 10px;
+}
+
+.active {
+    border: 2px solid red;
+}
diff --git a/GameSounds/todo_soundPlayer.html b/GameSounds/todo_soundPlayer.html
@@ -0,0 +1,14 @@
+<html>
+    <head>
+        <title>Sound Player To Do</title>
+    </head>
+
+    <body>
+        To Do List:
+
+        <ul>
+            <li>Add images into the DIVs</li>
+            <li>OR add images below and make them clickable too</li>
+        </ul>
+    </body>
+</html>
diff --git a/README.md b/README.md
@@ -16,14 +16,15 @@ If there's anything that you think could be improved due to misunderstanding, th
 # The 1000 Things
 Structure of the repo Things are as *folder > main js file*, along with the supporting HTML and CSS files.
 
-(6) Name Changer > namechange.js <br>
-(5) Message Changer > messageChanger.js <br>
-(4) Time of Day > timeOfDay.js <br>
-(3) VAT Calculator > vat-script.js <br>
-(2) Date and Time > myYearAndDate.js <br>
+(7) Game Sounds > soundPlayer.js<br>
+(6) Name Changer > namechange.js<br>
+(5) Message Changer > messageChanger.js<br>
+(4) Time of Day > timeOfDay.js<br>
+(3) VAT Calculator > vat-script.js<br>
+(2) Date and Time > myYearAndDate.js<br>
 (1) Date and Time > myDayFunction.js
 
-**994 to go...**
+**Only 993 to go... o_O**
 
 # Courses and Sources
 **[https://www.sololearn.com/Course/JavaScript/](https://www.sololearn.com/Course/JavaScript/)**