Radio and select field options

Author: faisalnjs

README.md

@@ -75,11 +75,17 @@ commtrackr.init({ // Initialize CommTracker with configurations
   fields: [
     {
       id: 'name', // Unique identifier for the field
-      type: 'text', // Field type (e.g., text, number, date, textarea, checkbox)
+      type: 'text', // Field type (e.g., text, number, date, textarea, checkbox, radio, select)
       label: 'Website Name', // Field label
       description: 'The name of the website or project.', // Field description
       placeholder: 'e.g. My Website', // Placeholder text for the field
       required: true // Whether the field is required
+      options: [ // Options for select or radio fields
+        {
+          label: 'Option 1', // Option label
+          value: 'option1' // Option value
+        }
+      ],
     },
   ],
 });

frontend/pages/user.ejs

@@ -11,6 +11,21 @@
 	<% } else if (field.type === 'checkbox') { %>
 	<input type="checkbox" class="hidden">
 	<div class="checkbox" change="cms">|||</div>
+	<% } else if (field.type === 'radio') { %>
+	<div class="radioOptions">
+		<% (field.options || []).forEach(option => { %>
+		<div class="radioOption">
+			<input type="radio" id="<%= option.value %>" name="<%= option.value %>" value="<%= option.label %>">
+			<label for="<%= option.value %>"><%= option.label %></label>
+		</div>
+		<% }) %>
+	</div>
+	<% } else if (field.type === 'select') { %>
+	<select>
+		<% (field.options || []).forEach(option => { %>
+		<option value="<%= option.value %>"><%= option.label %></option>
+		<% }) %>
+	</select>
 	<% } else { %>
 	<input type="<%= field.type %>" placeholder="<%= field.placeholder || '' %>">
 	<% } %>

frontend/public/scripts.js

@@ -92,38 +92,45 @@ function back() {
     document.getElementById('create')?.classList.add('hidden');
 };
 
+function saveChange(key, value) {
+    localStorage.setItem(key, value);
+    document.querySelector('.fixed2').classList.add('visible');
+    setTimeout(() => {
+        document.querySelector('.fixed2').classList.remove('visible');
+    }, 2000);
+};
+
 document.querySelectorAll('.inputField').forEach(field => {
     field.querySelectorAll('input, textarea').forEach(input => {
         input.addEventListener('keydown', function (event) {
             if (event.key === 'Enter') {
                 event.preventDefault();
                 next();
             };
-            localStorage.setItem(field.id, input.value);
-            document.querySelector('.fixed2').classList.add('visible');
-            setTimeout(() => {
-                document.querySelector('.fixed2').classList.remove('visible');
-            }, 2000);
+            saveChange(field.id, input.value);
         });
     });
     field.querySelectorAll('.checkbox').forEach(checkbox => {
         checkbox.addEventListener('click', function () {
             checkbox.classList.toggle('checked');
             const input = field.querySelector('input[type="checkbox"]');
             input.checked = !input.checked;
-            localStorage.setItem(field.id, input.checked);
-            document.querySelector('.fixed2').classList.add('visible');
-            setTimeout(() => {
-                document.querySelector('.fixed2').classList.remove('visible');
-            }, 2000);
+            saveChange(field.id, input.checked);
+        });
+    });
+    field.querySelectorAll('.radioOption').forEach(radio => {
+        radio.addEventListener('click', function () {
+            field.querySelectorAll('.radioOption input[type="radio"]').forEach(r => r.checked = false);
+            const input = radio.querySelector('input[type="radio"]');
+            input.checked = true;
+            saveChange(field.id, input.value);
         });
     });
 });
 
 document.addEventListener('keydown', function (event) {
     if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
         event.preventDefault();
-        console.log('Step:', step);
         if (step === 0) {
             start();
         } else {

frontend/public/styles.css

@@ -95,18 +95,21 @@ code {
 }
 
 input,
-textarea {
+textarea,
+select {
 	border: none;
 	width: -webkit-fill-available;
 	max-width: 500px;
 	min-height: 45px;
 	background: transparent;
 	border-bottom: 1px solid #ffffff;
 	outline: none;
+	border-radius: 1px;
 }
 
 input.hidden,
-textarea.hidden {
+textarea.hidden,
+select.hidden {
 	display: none;
 }
 
@@ -137,6 +140,42 @@ textarea {
 	color: #161616;
 }
 
+select {
+	font-size: 15px;
+
+	option {
+		background: #161616;
+		color: #ffffff;
+	}
+}
+
+input[type="radio"] {
+	height: 20px;
+	min-height: unset;
+	width: 20px;
+	appearance: none;
+	border: 1.5px solid #ffffff;
+	border-radius: 100%;
+	transition: 0.25s;
+}
+
+input[type="radio"]:checked {
+	background: #ffffff;
+	transition: 0.25s;
+}
+
+.radioOptions {
+	display: flex;
+	flex-direction: column;
+	gap: 7.5px;
+
+	.radioOption {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+	}
+}
+
 main {
 	display: flex;
 	padding: min(100px, 10vh) 0;