Select User Type Back Button

- Now if you select User or Host you can hit the back button to change

Author: programmingKyle

src/index.html

@@ -66,14 +66,16 @@ <h3>Host</h3>
     </div>
 
     <div id="settingsOverlay" class="overlay" style="display: none;">
-      <div id="selectedHost" class="centered-container" style="grid-template-rows: 1fr auto; grid-gap: 5px; display: none;">
+      <div id="selectedHost" class="centered-container" style="grid-template-rows: 1fr auto auto; grid-gap: 5px; display: none;">
         <button id="pasteHostDataButton" class="paste-data-button">Paste Host Data</button>
         <button id="specificHostDataButton" class="specific-data-button">Enter Specifics</button>
+        <button id="backHostButton" class="paste-data-button">Back</button>
       </div>
 
-      <div id="selectedUser" class="centered-container" style="grid-template-rows: 1fr auto; grid-gap: 5px; display: none;">
+      <div id="selectedUser" class="centered-container" style="grid-template-rows: 1fr auto auto; grid-gap: 5px; display: none;">
         <button id="pasteUserDataButton" class="paste-data-button">Paste User Data</button>
         <button id="specificUserDataButton" class="specific-data-button">Enter Specifics</button>
+        <button id="backUserButton" class="paste-data-button">Back</button>
       </div>
 
       <div id="hostSettingsSpecifics" class="centered-container" style="text-align: center; display: none;">

src/settings.js

@@ -158,6 +158,10 @@ const selectedHost_el = document.getElementById('selectedHost');
 const selectedUser_el = document.getElementById('selectedUser');
 const hostSettingsSpecifics_el = document.getElementById('hostSettingsSpecifics');
 
+// Back Buttons
+const backUserButton_el = document.getElementById('backUserButton');
+const backHostButton_el = document.getElementById('backHostButton');
+
 selectUserButton_el.addEventListener('click', () => {
     selectUserTypeOverlay_el.style.display = 'none';
     settingsOverlay_el.style.display = 'flex';
@@ -206,5 +210,16 @@ function toggleHostInputs(display){
     hostInputs.forEach(element => {
         element.style.display = display;
     });    
+}
 
-}
+backUserButton_el.addEventListener('click', () => {
+    settingsOverlay_el.style.display = 'none';;
+    selectedUser_el.style.display = 'none';
+    selectUserTypeOverlay_el.style.display = 'flex';
+});
+
+backHostButton_el.addEventListener('click', () => {
+    settingsOverlay_el.style.display = 'none';
+    selectedHost_el.style.display = 'none';
+    selectUserTypeOverlay_el.style.display = 'flex';
+});