made commercial cleaner

angular.json

@@ -20,7 +20,8 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/assets/sounds"
             ],
             "styles": [
               "src/styles.scss"

src/app/app.component.scss

@@ -1,7 +1,6 @@
 #appcontainer {
   height: 100vh;
   width: 100vw;
-  background-color: #0000ff40;
   display: grid;
   grid-template-areas:
     "topmenu"

src/app/reclamespinner/reclamespinner.component.html

@@ -1,8 +1,8 @@
 <div id="reclamespinner">
-  <button id="goleftbutton" (click)="goRight()">LEFT</button>
+  <button id="goleftbutton" (click)="goRight()"><</button>
   <div id="reclamecontainer">
-    <img class="reclameitem" src="/assets/{{image}}" *ngFor="let image of images"/>
+    <img (click)="react(image)" class="reclameitem" src="/assets/{{image}}" *ngFor="let image of images"/>
   </div>
-  <button id="gorightbutton" (click)="goLeft()">RIGHT</button>
+  <button id="gorightbutton" (click)="goLeft()">></button>
 </div>
 

src/app/reclamespinner/reclamespinner.component.scss

@@ -1,6 +1,7 @@
 #reclamespinner {
   display: grid;
   grid-template-rows: 1fr;
+  grid-template-columns: 35px 1fr 35px;
   overflow: hidden;
   height: 100%;
 }
@@ -16,7 +17,7 @@
 }
 
 #goleftbutton, #gorightbutton {
- position: absolute;
+ //position: absolute;
 }
 
 #goleftbutton {

src/app/reclamespinner/reclamespinner.component.ts

@@ -31,4 +31,15 @@ export class ReclamespinnerComponent implements OnInit {
     this.images.splice(0, 1);
     this.images.push(string);
   }
+
+  playAudio() {
+    const audio = new Audio();
+    audio.src = 'assets/sounds/nature2.wav';
+    audio.load();
+    audio.play();
+  }
+
+  react(image: string) {
+    this.playAudio();
+  }
 }