Added Translations

src/app/home/home.component.html

@@ -7,27 +7,31 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
       </svg>
-      <span>Enter a location!!</span>
+      <span>{{translations.alertMessage}}</span>
     </div>
   </div>
 
-  <button class="btn btn-outline btn-primary" id="translate" (click)="translate()">Traduci</button>
+  <div class="dropdown dropdown-hover">
+    <label tabindex="0" class="btn m-1">{{translations.translate}}</label>
+    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+      <li (click)="switchLanguage('DE')"><a>DE</a></li>
+      <li (click)="switchLanguage('FR')"><a>FR</a></li>
+      <li (click)="switchLanguage('IT')"><a>IT</a></li>
+    </ul>
+  </div>
 
-  <!-- <div class="canvas nuvola">
-    <canvas #myCanvas width="100vw" class="canvas"></canvas>
-  </div> -->
   <div class="bg-image">
     <div class="search">
 
       <div class="inputElements">
         <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
-               (keydown)="selezionaSuggerimento($event)" placeholder="Type here"
+               (keydown)="selezionaSuggerimento($event)" placeholder="{{translations.searchPlaceholder}}"
                class="input input-bordered input-primary btn-wide">
 
         <button
           class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
           (click)="onSearch()">
-          Search
+          {{translations.searchButton}}
           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path
               d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
@@ -41,7 +45,7 @@
           [style.width.px]="myInput.offsetWidth">
 
         <li class="menu-title">
-          <span>Places</span>
+          <span>{{translations.menuPlaces}}</span>
         </li>
 
         <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
@@ -49,7 +53,7 @@
         </li>
 
         <li class="menu-title">
-          <span>Near</span>
+          <span>{{translations.menuNear}}</span>
         </li>
 
         <li *ngFor="let luogo of luoghiNear()">