add keyboard layout preview image

index.css

@@ -5,10 +5,13 @@
     unicode-range: U+E000-E23F;
 }
 
-
 textarea {
     font-family: 'SapotaWebfont', 'Pretendard', sans-serif !important;
     width: 100%;
     height: 10rem;
     font-size: 1.4rem;
 }
+
+.image-paragraph {
+    text-align: center;
+}

index.html

@@ -30,6 +30,9 @@ <h1><strong>Sapota</strong> Converter</h1>
       <p>
         <textarea name="textarea" id="textarea" class="form-control" autofocus></textarea>
       </p>
+      <p class="image-paragraph">
+        <img src="#" id="keyboard-layout">
+      </p>
     </div>
   </body>
 </html>

index.js

@@ -2,12 +2,23 @@ let languageSelect;
 let textarea;
 let boldCheck;
 let italicCheck;
+let keyboardLayout;
+
+function updateLayout(to) {
+    keyboardLayout.src = `./res/layouts/${to}.png`;
+}
 
 function load() {
     languageSelect = document.querySelector("#language");
     textarea = document.querySelector("#textarea");
     boldCheck = document.querySelector("#bold");
     italicCheck = document.querySelector("#italic");
+    keyboardLayout = document.querySelector("#keyboard-layout");
+
+    updateLayout(languageSelect.value);
+    languageSelect.addEventListener('change', e => {
+        updateLayout(e.target.value);
+    });
 
     boldCheck.addEventListener('click', e => {
         if (e.target.checked) {