gender picker setting

singharaj-usai · Oct 1, 2024 · 299fb70 · 299fb70
1 parent 3e26d73
commit 299fb70
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/client/html/pages/settings/settings.html b/client/html/pages/settings/settings.html
@@ -32,9 +32,29 @@ <h3 class="panel-title">Appearance</h3>
                         <option value="cyborg">Dark Mode</option>
                     </select>
                 </div>
+
+                <div class="form-group">
+                    <label>Gender</label>
+                    <div id="gender-picker">
+                        <label>
+                            <input type="radio" name="gender" value="male">
+                            <i class="bi bi-gender-male"></i> Male
+                        </label>
+                        <label>
+                            <input type="radio" name="gender" value="female">
+                            <i class="bi bi-gender-female"></i> Female
+                        </label>
+                        <label>
+                            <input type="radio" name="gender" value="other">
+                            <i class="bi bi-gender-trans"></i> Other
+                        </label>
+                    </div>
+                </div>
                 <button id="save-settings" class="btn btn-primary">Save Settings</button>
             </div>
         </div>
+
+
     </div>
 
     <!-- Scripts -->

diff --git a/client/js/settings.js b/client/js/settings.js
@@ -3,20 +3,36 @@ $(document).ready(function() {
     App.init();
     loadUserSettings();
 
+    // gender picker
+    $('.gender-option').on('click', function() {
+        $('.gender-option').removeClass('selected');
+        $(this).addClass('selected');
+    });
+
     // Handle save settings button click
     $('#save-settings').on('click', saveUserSettings);
+
 });
 
 function loadUserSettings() {
     const theme = localStorage.getItem('theme') || 'cyborg';
     $('#theme-select').val(theme);
     applyTheme(theme);
+
+    const gender = localStorage.getItem('gender') || 'other';
+    $(`#gender-picker input[value="${gender}"]`).prop('checked', true);
+
 }
 
 function saveUserSettings() {
     const theme = $('#theme-select').val();
+    const gender = $('#gender-picker input:checked').val();
+
     localStorage.setItem('theme', theme);
+    localStorage.setItem('gender', gender);
+
     applyTheme(theme);
+
     showAlert('Settings saved successfully!', 'success');
 }