js for cost on creating a recipe

src/main/resources/static/css/create-recipe.css

@@ -285,6 +285,30 @@ textarea {
   font-size: 12px;
   cursor: pointer;
 }
+/* Cost */
+
+.cost-selector {
+  display: flex;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.dollar {
+  font-size: 1.7em;
+  font-weight: 700;
+  color: var(--dusty-red);
+  cursor: pointer;
+  transition: color 0.1s ease;
+  user-select: none;
+}
+
+.dollar.active {
+  color: var(--dark);
+}
+
+.dollar:hover {
+  color: var(--dusty-red-hover);
+}
 
 /* Tags */
 

src/main/resources/templates/create-recipe.html

@@ -76,8 +76,14 @@
     </div>
     
      <div class="field">
-      <label for="cost">Estimated Cost: <span class="required">*</span></label>
-      <input type="text" id="cost" placeholder="0">
+  		<label>Estimated Cost: <span class="required">*</span></label>
+  		<div class="cost-selector" id="cost-selector">
+    	<span class="dollar" data-value="1">$</span>
+    	<span class="dollar" data-value="2">$</span>
+    	<span class="dollar" data-value="3">$</span>
+    	<span class="dollar" data-value="4">$</span>
+  	 </div>
+  	 <input type="hidden" id="cost" value="0">
     </div>
   </div>
   </div>
@@ -149,9 +155,35 @@ function renumberSteps() {
     bubble.textContent = i + 1;
   });
 }
+// Cost display
+const dollars = document.querySelectorAll('.dollar');
+
+dollars.forEach(dollar => {
+  dollar.addEventListener('click', () => {
+    const val = parseInt(dollar.dataset.value);
+    document.getElementById('cost').value = val;
+    dollars.forEach(d => {
+      d.classList.toggle('active', parseInt(d.dataset.value) <= val);
+    });
+  });
+
+  dollar.addEventListener('mouseover', () => {
+    const val = parseInt(dollar.dataset.value);
+    dollars.forEach(d => {
+      d.classList.toggle('active', parseInt(d.dataset.value) <= val);
+    });
+  });
+
+  dollar.addEventListener('mouseout', () => {
+    const selected = parseInt(document.getElementById('cost').value);
+    dollars.forEach(d => {
+      d.classList.toggle('active', parseInt(d.dataset.value) <= selected);
+    });
+  });
+});
+
 
 // ---- Collecting on submit ----
-// Call this wherever you build your POST payload:
 function getIngredients() {
   return [...ingredientContainer.querySelectorAll('.dynamic-row')].map(row => {
 	qtyValue = row.querySelector('.ing-qty').value.trim(); // quantity should be a number NOT A STRING