js for cost

src/main/resources/templates/explore.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
     <meta name="_csrf" th:content="${_csrf.token}"/>
-    <title>Thyme Crunch Home</title>
+    <title>Explore - Thyme Crunch</title>
     <link rel="stylesheet" th:href="@{css/explore.css}">
     <link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
@@ -65,7 +65,7 @@
                 	<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
                     	<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                 	</div>
-                	<p th:text="${recipe.cost}">Cost</p>
+                	<p class="card-cost" th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>
 		</div>	
@@ -234,6 +234,12 @@
 	    window.location.href = '/explore?' + out.toString();
 	  }
 	})();
+	
+	// For cost display
+	document.querySelectorAll('.card-cost').forEach(el => {
+    	const num = parseInt(el.textContent);
+    	el.textContent = num === 0 ? '' : '$'.repeat(num);
+});
 </script>
             
 </body>