dollar signs and filtering css

src/main/resources/templates/home.html

@@ -50,7 +50,7 @@
                 	<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
                     	<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                 	</div>
-                	<span th:text="${recipe.cost != null ? #strings.repeat('$', recipe.cost) : ''}"></span>
+                    <p class="card-cost" th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>	
         </div>
@@ -63,5 +63,15 @@
         </div>
     </div>
 </div>
+
+<script>
+/// For cost display
+	document.querySelectorAll('.card-cost').forEach(el => {
+    	const num = parseInt(el.textContent);
+    	el.textContent = num === 0 ? '' : '$'.repeat(num);
+});
+
+</script>
+
 </body>
 </html>